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)

Sunden · Accepted Answer · 2017-08-16 20:49:29Z

3

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.

edited Aug 16, 2017 at 20:49

answered Aug 16, 2017 at 18:48

Sunden

8633 gold badges13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SomeRandomDeveloper Over a year ago

Thanks. The ToDataSourceResult() has already been applied to the list it's just less clear because its all chained together. I simplified the dataSource object like you suggested but still returns the same e.slice javascript error in the console.

Sunden Over a year ago

Have you tried not using ToDataSourceResult? I usually just return a Json string and don't need to play with Kendo's methods.

SomeRandomDeveloper Over a year ago

It worked. I think i tried that b4 but i must of had some other variation which also made it not work. I guess that method only works for the MVC wrappers but i feel like i have gotten this to work in the past. Update answer so i can mark.

John Lord · Accepted Answer · 2020-09-05 02:22:35Z

0

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).

answered Sep 5, 2020 at 2:22

John Lord

2,18416 silver badges36 bronze badges

Collectives™ on Stack Overflow

Kendo UI Grid Javascript datasource call to controller action

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related