Kendo UI Grid Javascript datasource call to controller action

Question

I'm having trouble binding my JavaScript kendo ui grid to model data from an action method. All the examples i see are mostly MVC wrappers and the JavaScript examples are all different and none seem to work for me.

Here is where i'm at below.

I did a generic test with static data that works.

var dataSource_Test = new kendo.data.DataSource({
        data: [{ LeagueDetailGroupId: "15", GroupName: "Best Team 5"}]
});

Here is the datasource object im trying to create with the controller action:

var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "@Url.Action("LeagueDetailGroup_Read", "Configuration")?_leagueTypeId=" + leagueTypeId,
                    // i have tried all kinds of variants here, and not sure what to put
                    // my action method is returning json using kendo's DataSourceResult method
                    //contentType: "application/json",
                    type: "POST"
                    //dataType: "odata"
                },
                schema: {
                    data: "Data", // seen this in examples, dunno what it does
                    total: "Total", // seen this in examples, dunno what it does
                    model: {
                        id: "LeagueDetailGroupId",
                        fields: {
                            LeagueDetailGroupId: { editable: false, nullable: true },
                            GroupName: { validation: { required: true } }
                        }
                    }
                },          
                // i seen this is an example from telerik but dont understand the use case for it                       
                parameterMap: function (data, operation) {
                    // this prints no data before i even start so its a moot point configuring it from products to my stuff at this moment
                    // but not sure what todo here of if i need this anyways
                    console.log(data);          
                    if (operation != "read") {
                        // post the products so the ASP.NET DefaultModelBinder will understand them
                        var result = {};
                        for (var i = 0; i < data.models.length; i++) {
                            var product = data.models[i];

                            for (var member in product) {
                                result["products[" + i + "]." + member] = product[member];
                            }
                        }
                        return result;                                 
                    } else {
                        return JSON.stringify(data)
                    }
                }
            }
        });

Here is the grid which works ok with the generic static datasouce object.

var grid = $("#leagueEdit_ldg_grid").kendoGrid({
                        dataSource: dataSource,
                        sortable: true,
                        pageable: true,
                        autobind: false,
                        //detailInit: leagueEdit_ldg_detailInit,
                        dataBound: function () {
                            this.expandRow(this.tbody.find("tr.k-master-row").first());
                        },
                        columns: [
                            {
                                field: "LeagueDetailGroupId",
                                title: "Group Id",
                                width: "110px"
                            },
                            {
                                field: "GroupName",
                                title: "Group Name",
                                width: "110px"
                            }
                        ]
                    });         

Delayed read, autobind set to false.

dataSource.read();

Here is my simplified Controller action. It runs and gets data, and works fine for my MVC wrapper grids.

    [Route("LeagueDetailGroup_Read/{_leagueTypeId:int}")]
    public ActionResult LeagueDetailGroup_Read([DataSourceRequest]DataSourceRequest request, int _leagueTypeId = -1)
    {
       DataSourceResult result =
           _unitOfWork.FSMDataRepositories.LeagueDetailGroupRepository.Get(
               ld => ld.LeagueTypeId == _leagueTypeId
               )
        .ToDataSourceResult(request,
            ld => new LeagueDetailGroupViewModel
        {

            LeagueDetailGroupId = ld.LeagueDetailGroupId,
            LeagueTypeId = ld.LeagueTypeId,
            GroupName = ld.GroupName,
            DateCreated = ld.DateCreated,
            DateLastChanged = ld.DateLastChanged
        }
        );
        // data looks fine here
        return Json(result, JsonRequestBehavior.AllowGet);
    }

Currently i'm getting this error:

Uncaught TypeError: e.slice is not a function
    at init.success (kendo.all.js:6704)
    at success (kendo.all.js:6637)
    at Object.n.success (kendo.all.js:5616)
    at i (jquery-3.1.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.1.1.min.js:2)
    at A (jquery-3.1.1.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery-3.1.1.min.js:4)

Answer 1

In my experience, an e.slice error happens when you have a record that has a null value in it somewhere. The kendo grid is not really smart enough to deal with this so you either have to make sure your datasource returns empty strings instead of nulls for string fields, or put a client template on the columns that translates a null into an empty string. It's possible that the kendo todatasourceresult made the problem come to light. Note that that is usually the last step before returning your dataset since it can modify the entity queries to give paging, so that you never query more than a single page of data (for ajax grids).

Answer 2

It's hard to know without testing but let me know how this works.

Change your controller so that you are just returning a json string. Also, try removing your schema and the parameter map, and set your dataType to json:

var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "@Url.Action("LeagueDetailGroup_Read", "Configuration")?_leagueTypeId=" + leagueTypeId,
                dataType: "json"
            }
        }
});

For the grid I find simple json data does not usually need a schema/model defined. Kendo is super annoying and hard to debug. Let me know how it goes.