I am currently working with a kendo grid that binds its data source using ajax in JavaScript. Here is how it's set up:
Kendogrid:
@(Html.Kendo().Grid<WEB02.ConfigurationModel.ActivityGridDetails>()
.Name("Activitydet")
.Columns(columns =>
{
columns.Bound(o => o.Id).Width(40);
columns.Bound(o => o.Config).Width(200);
columns.Bound(o => o.Status).Width(250);
columns.Bound(o => o.In).Width(250);
columns.Bound(o => o.Out).Width(250);
})
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
)
)
)
JavaScript:
function onChange(e) {
var grid = $("#grid").data("kendoGrid");
var dataRows = grid.items();
var rowIndex = dataRows.index(grid.select());
var selectedname = grid.dataItems()[rowIndex];
console.log("aly" + selectedname.NodeId);
document.getElementById("ActivityGrid").style.bottom = "100px";
$.ajax({
type: 'POST',
url: '/Configuration/ActivityGridDisplay/',
dataType: 'json',
data: { nodeName: selectedname.Name, nodeType: selectedname.Type, nodeID: selectedname.NodeId },
success: function (result) {
$("#Activitydet").data("kendoGrid").dataSource.data(result);
}
})}
Controller:
public ActionResult ActivityGridDisplay([DataSourceRequest] DataSourceRequest request, string nodeName, string nodeType, string nodeID)
{
// Controller logic here...
return Json(Table.ToDataSourceResult(request));
}
I have successfully implemented a similar grid using the model directly without any issues. However, when I tried to bind the data using ajax this time, it resulted in an error message: "Uncaught TypeError: e.slice is not a function". I've attempted different solutions such as adjusting the JSON call and setting a model ID, but with no success. Removing the DataSource part from the Kendo Grid also did not resolve the issue. Any suggestions on how to fix this problem?