I need help writing a script/Function for my Telerik UI for asp.net MVC program. I have a delete button in my tool bar and I think my script is correct for it deleting. Now, I'm told that my check boxes haft to have a script also to be deleted when checked. As a C# coder, I'm not entirely knowledgeable about Json coding. So, any help would be appreciated! Here is my code below.
#(Html.Kendo().Grid<MVCSQLDatabase.Models>()
.Name("Grid")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Batch(true)
.Model(model => model.Id(p => p.Proposal_Uid))
.Read(read => read.Action("Proposals_Read", "Grid"))
.Create(create => create.Action("Proposals_Create", "Grid"))
.Update(update => update.Action("Proposals_Update", "Grid"))
.Destroy(destroy => destroy.Action("Proposals_Destroy", "Grid"))
)
.Resizable(resize => resize.Columns(true))
.Columns(columns =>
{
columns.Select().Width(100); //<-- my check boxes code.
columns.Bound(c => c.Prime).Width(215);
columns.Bound(c => c.Proposal).Width(200);
columns.Bound(c => c.C).Width(190);
columns.Bound(c => c.Cl).Width(185);
columns.Bound(c => c.T).Width(290);
columns.Bound(c => c.M).Width(220);
columns.Bound(c => c.S).Format("{0: dd/MM/yyyy}").Width(170);
columns.Bound(c => c.E).Format("{0: dd/MM/yyyy}").Width(170);
columns.Bound(c => c.P).Width(235);
columns.Bound(c => c.Con).Width(215);
columns.Command(command => { command.Destroy(); }).Width(180);// <--- My delete button in my column
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
toolbar.Excel();
toolbar.Custom().Text("Delete").Name("batchDestroy").IconClass("k-icon k-i-close"); //<-- my custom made delete button in my toolbar.
})
.ColumnMenu()
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Selectable(selectable =>
{
selectable.Mode(GridSelectionMode.Multiple);
selectable.Type(GridSelectionType.Row);
})
.PersistSelection()
.Filterable(filterable => filterable.Mode(GridFilterMode.Row))
.Scrollable()
.HtmlAttributes(new { style = "height:835px;" })
)
<script>
$("#grid").on("click", "batchDestroy", function() {
var $tr = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem($tr);
grid.dataSource.remove(dataItem);
});
</script>
Here is the code for anybody else stuck in this situation. The thing that got me the most, was the .done function to end the button click function and then saving the grid AFTER the delete was made. Hopefully, this helps others!
<script>
$(document).ready(function ()
{
$(".k-grid-Destroy").on("click", function (e)
{
e.preventDefault();
var grid = $("#Grid").data("kendoGrid");
var selectedRows = grid.select();
kendo.confirm(kendo.format("Are you sure you wish to delete {0} records?", selectedRows.length))
.done(function ()
{
$.each(selectedRows, function (i, row)
{
grid.removeRow(row);
})
grid.saveChanges();
});
});
});
</script>
I'm using asp.net core razor pages with a Kendo Grid that is datasourced using SignalR. It gets the initial read ok, but the update does not fire. I've looked at the Kendo Demo, and other stackover flow pages, but nothing seems to work.
I know the API works fine in sending the update because I see the call when debugging through Chrome that the websocket received an update commmand with the new data in json format. But the Grid doesn't update, or fire any update commands. It's as if it never received it, or doesn't know that it received it.
Index.cshmtl
<script src="~/signalr/signalr.js"></script>
<script>
var url = https://demosite.com/hub/controller;
var hub = new signalR.HubConnectionBuilder()
.configureLogging(signalR.LogLevel.Information)
.withUrl(url,
{
transport: signalR.HttpTransportType.WebSockets | signalR.HttpTransportType.LongPolling
})
.build();
var hubStart = hub.start();
</script>
#(Html.Kendo().Grid<myModel>
()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Name);
columns.Bound(c => c.Date);
})
.HtmlAttributes(new { style = "width: 98%;" })
.DataSource(dataSource => dataSource
.SignalR()
.AutoSync(true)
.ServerFiltering(true)
.ServerSorting(true)
.PageSize(10)
.Transport(tr => tr
.Promise("hubStart")
.Hub("hub")
.Client(c => c
.Read("read") //Read works, initial data loads
.Create("create")
.Update("update")
.Destroy("destroy")
)
.Server(s => s
.Read("read")
.Create("create")
.Update("update")
.Destroy("destroy")
)
)
.Schema(schema => schema
.Data("Data")
.Total("Total")
.Aggregates("Aggregates")
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p=> p.Name);
model.Field(p => p.Date);
}
)
)
)
.Group(g => g.Add(x => x.Name))
)
.Events(x=>
{
x.DataBound("collapseAllGroups");
}
)
.Groupable(true)
.Sortable()
.Filterable()
.Pageable(pager => pager.AlwaysVisible(true).PageSizes(new int[] { 10, 20, 50, 100 }))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.Selectable()
)
Api
[HttpGet]
public async Task<myModel> GetTest()
{
myModel mod= new myModel();
mod.Name = "New Name";
mod.Date = DateTime.UTCNow.ToString();
//Send update command to connected SignalR Clients
await _hub.Clients.All.SendAsync("update", mod);
return mod;
}
Any help would be appreciated.
Ok I got this to work. Turns out that since the Grid is originally expecting a DataSourceResult I had to convert myModel to a DataSourceResult type before doing the update. Example below should be considered Pseudocode as I’m typing this on my phone.
await _hub.Clients.All.SendAsync("update", new DataSourceResult(mod));
I am trying to get a telerik grid to display json data that is being return from a controller action but the only it displays the actual json data in the browser window.
Am i supposed to call .BindTo after read?
Am i doing something wrong in my action?
am i going about this all wrong?
[HttpGet]
public ActionResult ReadLeads([DataSourceRequest]DataSourceRequest request)
{
var model = new RecordLookupViewModel();
using (var db = new RGI_MasterEntities())
{
db.Configuration.ProxyCreationEnabled = false;
var results = db.tblMasterLeads
.Where(
x => (model.FirstName == null || x.FirstName.Equals("Eric"))
&& (model.RecordType == null || x.MasterLeadType.Equals("Responder"))
)
.Select(s => new LookupGridResults
{
FirstName = s.FirstName,
LastName = s.LastName,
City = s.city,
State = s.state,
County = s.county,
Zip = s.zip
}).Take(10);
var result = results.ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
}
}
Hers is my view code for the grid.
#(Html.Kendo().Grid<LookupGridResults>()
.Name("grid")
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(p => p.FirstName).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))).Width(225);
columns.Bound(p => p.LastName).Width(225).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(p => p.City).Width(225).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(p => p.County).Width(225).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(p => p.State).Width(225).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(p => p.Zip).Width(225).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(true)
.Read(read => read.Action("ReadLeads", "LeadsManagement").Type(HttpVerbs.Get))
)
)
Here are my results btw.
{"Data":[{"LastName":"COFFEY","FirstName":"EDWARD","City":"FRANKFORT","County":"FRANKLIN","State":"KY","Zip":"40601-2304"},{"LastName":"DESPAIN","FirstName":"TONY","City":"CAMPBELLSVILLE","County":"TAYLOR","State":"KY","Zip":"42718-9397"},{"LastName":"HALBIG","FirstName":"RONALD","City":"CAMPBELLSVILLE","County":"TAYLOR","State":"KY","Zip":"42718-1556"},{"LastName":"KRAUS","FirstName":"REBECCA","City":"FRANKFORT","County":"FRANKLIN","State":"KY","Zip":"40601-2714"},{"LastName":"LAWLESS","FirstName":"MEREDITH","City":"CAMPBELLSVILLE","County":"TAYLOR","State":"KY","Zip":"42718-1556"},{"LastName":"RANKIN","FirstName":"PAULINE","City":"LAWRENCEBURG","County":"ANDERSON","State":"KY","Zip":"40342-1374"},{"LastName":"SHIRLEY","FirstName":"LORRAINE","City":"CAMPBELLSVLLE","County":"TAYLOR","State":"KY","Zip":"42718-1557"},{"LastName":"STAPLES","FirstName":"DAMON","City":"HODGENVILLE","County":"LARUE","State":"KY","Zip":"42748-1208"},{"LastName":"WILLIAMS","FirstName":"LUCY","City":"FRANKFORT","County":"FRANKLIN","State":"KY","Zip":"40601-2308"},{"LastName":"WILSON","FirstName":"BELIDA","City":"FRANKFORT","County":"FRANKLIN","State":"KY","Zip":"40601-1321"}],"Total":10,"AggregateResults":null,"Errors":null}
Thanks for all the help, it seemed i was missing a reference to a bundle. I do credit Mark Schultheiss for pointing me in the right direction.
Got it completly working today. Here is what fixed it.
I changed my actionresult to a JsonResult.
I had filtering turned on in the grid but none of my columns had filtering attributes.
I think thats about it. It works great now.
I have a Kendo Grid (MVC Razor) that I am trying to have pass extra data to the controller via the .Data call off of the Read method:
#(Html.Kendo().Grid<AssignedSiteGridPoco>()
.Name("UnAssignedSiteGrid")
.Filterable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Columns(columns =>
{
columns.Bound(p => p.SiteId).Hidden();
columns.Bound(p => p.SiteName).Title("Site Name").Width(180);
columns.Bound(p => p.City).Title("City").Width(80);
columns.Bound(p => p.StateName).Title("State Name").Width(100);
columns.Command(command => command
.Custom("Add")
.Click("unassignedSiteGridClick")
).Width(90);
})
.Scrollable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Resizable(resize => resize.Columns(true))
.Events(events =>
{
//events.Change("GridChange");
//events.DataBound("OnDataBound");
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.SiteId);
model.Field(p => p.SiteName);
model.Field(p => p.City).Editable(false);
model.Field(p => p.StateName).Editable(false);
})
.PageSize(15)
.Read(read => read.Action("GetUnassignedSiteGridDataList", "Manager").Data("getUserRightName"))
))
The Javascript block, placed above the grid div, is as follows:
function getUserRightName() {
return
{
UserRightName : "2"
};
}
And the controller:
public JsonResult GetUnassignedSiteGridDataList([DataSourceRequest]DataSourceRequest request, string UserRightName)
{
var model = new AssignedSiteGridPoco();
var siteList = _managerPresentationService.GetUnassignedSiteGridDataList(model);
return Json(siteList.ToDataSourceResult(request));
}
The string value being passed from the view's read method is null in the "UserRightName" string. According to the examples, it should pass back the text value "2" My Version of Kendo is: 2014.2.807 InternalBuild. Is there a problem in this build in this area?
Thanks,
Steven
Wrap the key name in the json structure into quotes i.e.
change your js function to this:
function getUserRightName() {
return {'UserRightName':"2"};
}
I have a Kendo Grid with Popup editing. However, I need to have my own PartialView displayed for editing.
Is there any way to tell the grid what PartialView to display for editing?
If that can't be done, is there a way to wire up the grid so it calls a JavaScript function which would then pop up a custom window that I will populate with a partial view? It would have to be able to pass the ID of Row that was selected so that the view would edit the correct row. I know how to create the Window, I just don't know how to call it from the grid and get the Id of the row.
This is the grid:
#(Html.Kendo().Grid<OrderSummaryLineItem>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.ReportType).Width(75);
columns.Bound(c => c.ReferenceId).Width(75);
columns.Bound(c => c.BorrowerName).Width(75);
columns.Bound(c => c.PropertyAddress).Width(100);
columns.Bound(c => c.EstimatedCompletionDate).Width(100);
columns.Bound(c => c.ReportPrice).Width(75);
columns.Bound(c => c.ExpediteFee).Width(75);
columns.Bound(c => c.Discount).Width(75);
columns.Bound(c => c.TotalPrice).Width(75);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
})
.HtmlAttributes(new { style = "height: 600px;" })
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model=> model.Id(c=> c.ReferenceId))
.Read(read => read.Action("Orders_Read", "OrderSummary"))
.Destroy(update => update.Action("EditingPopup_Destroy", "OrderSummary"))
)
)
Update:
I have this partially resolved: I added a custom Command like this:
columns.Command(command => { command.Custom("ViewDetails").Click("showDetails");
This wires up the "showDetails" JavaScript function. But I am still not able to pass the current row Id.
This is what I came up with:
columns.Template(#<text></text>).ClientTemplate("<a href='"+Url.Action("EditOrderLineItem","OrderSummary")+"/#=Id#'>Edit</a>");