Kendo Grid, using javascript to create the grid dynamically. The read event is not calling the server side controller function

Question

I am working with Kendo Grid. I am creating the grid dynamically and I am trying to also use the server side paging. I setup the parameters to use the read ajax call to read data from server side controller. But when debugging I cannot get the server side function in the controller to fire and the grid returns with no data. Here is the javascript code on the cshtml file.


function createGrid(gridColumnList);
{
    var model = createModel(gridColumnList);

    $(gridReportResults").kendoGrid({
        
        dataSource: {
            transport:{
                 read: {
                     url: "@Url.Action("GetReportResults", "Report", new { ReportId = Model.ReportId, NavId = Session.GetNavigationId() })";
                     dataType: "json",
                     contentType: "application/json",
                     type: "POST",
                     cache: false
                 }
            },
            model: model,
            type: "json"
        },
        schema: {
            data: "data",
            total: "total"
        },

        serverPaging: true,
        selectable: true,
        pageable: {
            pageSize: 250
        },
        autoBind: true,
        height: 400,
        scrollable: true,
        columns: createColumns(gridColumnList); 


    }).data("kendoGrid");
}

Does the same thing happen if you create a new instance of a kendo.data.DataSource object for the dataSource property instead of using a JSON object? For example, look at the last example found here: docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/… — David

Joe Glover Joe Glover · Accepted Answer · 2021-08-10T15:38:12

You've assigned a couple of properties to your grid which should have been used to configure your dataSource, namely serverPaging and schema. Also, the model definition belongs inside the schema.

You may find the grid and dataSource documentation useful.

Try this instead:

$(gridReportResults").kendoGrid({
    
    dataSource: {
        transport:{
             read: {
                 url: "@Url.Action("GetReportResults", "Report", new { ReportId = Model.ReportId, NavId = Session.GetNavigationId() })";
                 dataType: "json",
                 contentType: "application/json",
                 type: "POST",
                 cache: false
             }
        },
        schema: {
            model: model,
            data: "data",
            total: "total"
        },
        serverPaging: true,
        type: "json"
    },

    selectable: true,
    pageable: {
        pageSize: 250
    },
    autoBind: true,
    height: 400,
    scrollable: true,
    columns: createColumns(gridColumnList); 


}).data("kendoGrid");

Kendo Grid, using javascript to create the grid dynamically. The read event is not calling the server side controller function

1 Answers