Kendo grid error : kendo.all.min.js:12 Uncaught TypeError: e.slice is not a function

Question

I have a kendo grid which binds its datasource using ajax from javascript as follows:

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);
            //$("#Activitydet").data("kendoGrid").dataSource.fetch();
        }
    })}

Controller:

public ActionResult ActivityGridDisplay([DataSourceRequest] DataSourceRequest request, string nodeName, string nodeType, string nodeID)

    {



        ActivityGrid Activity = new ActivityGrid();
        Activity.Grid = new DataTable();

        string rep = "ns=2;s=";
        nodeID = nodeID.Replace(rep, "");

        string nodeConfig= nodeID+".CONFIG";
        string nodeStatus= nodeID+".STATUS";
        string nodeIN= nodeID+".IN";
        string nodeOUT= nodeID+".OUT";
        Dictionary<string, string> ActivityConfig = RxMUaClient.DetailsBrowse("2", "127.0.0.1:48030", nodeConfig);
        Dictionary<string, string> ActivityStatus = RxMUaClient.DetailsBrowse("2", "127.0.0.1:48030", nodeStatus);
        Dictionary<string, string> ActivityIN = RxMUaClient.DetailsBrowse("2", "127.0.0.1:48030", nodeIN);
        Dictionary<string, string> ActivityOUT = RxMUaClient.DetailsBrowse("2", "127.0.0.1:48030", nodeOUT);


        List<Dictionary<string, string>> Collection = new  List<Dictionary<string, string>>();
        Collection.Add(ActivityConfig);
        Collection.Add(ActivityStatus);
        Collection.Add(ActivityIN);
        Collection.Add(ActivityOUT);

        int max =Collection[0].Count;
        for (int CC = 1; CC < 4; CC++)
        {

            if (Collection[CC].Count > max)
            {
                max = Collection[CC].Count;
            }
        }
        DataTable Table = new DataTable();
        Table.Columns.Add("Id");
        Table.Columns.Add("Config");
        Table.Columns.Add("Status");
        Table.Columns.Add("In");
        Table.Columns.Add("Out");
        for (int i = 0; i <= max; i++)
        {
            DataRow newRow = Table.NewRow();
            newRow[0] = i;

            int l=1;
                foreach (Dictionary<string, string> e in Collection)
                {

                    if (i < e.Count)
                    {
                        var element = e.ElementAt(i);
                        newRow[l] = element.Value;
                    }
                    l++;

                }
                Table.Rows.Add(newRow);

        }



        if (request.Aggregates.Any())
        {
            request.Aggregates.Each(agg => agg.Aggregates.Each(a =>
            {
                a.MemberType = Table.Columns[agg.Member].DataType;
            }));
        }
        return Json(Table.ToDataSourceResult(request));

}

I have done the same grid using model before and but using the read function directly from the kendo grid and it used to work with no problem. This time binding the read using ajax does not work as it gives this error: kendo.all.min.js:12 Uncaught TypeError: e.slice is not a function

I tried to put the allowget to the json call but did not solve it, i had no model id set before so i set one and did not solve it as well. I tried to remove the Datasource part from the kendo grid and that did not do. Any suggestions??

Answer 1

Was getting the same issue using $("#grid").kendoGrid and solved it by putting the 'data' attribute in the controller. For example: return Json(results.Data, JsonRequestBehavior.AllowGet);

Answer 2

Found the problem : It was in the javascript part as the whole data is passed, instead only the data array part should be passed:

The ajax function to be changed as follows:

 $.ajax({

        type: 'POST',
        url: '/Configuration/ActivityGridDisplay/',
        dataType: 'json',
        data: { nodeName: selectedname.Name, nodeType: selectedname.Type, nodeID: selectedname.NodeId },
        success: function (result) {
            console.log(result);
            var pass = result.Data;
            $("#Activitydet").data("kendoGrid").dataSource.data(pass);
            //$("#Activitydet").data("kendoGrid").dataSource.fetch();
        }
    })