Grid server-side binding JS error on sort

[Alexandre]

I'm trying to use a grid using the server-side binding like in the documentation. But when I click on the header of a column to sort I get the following javascript exeption

Unhandled exception at line 28, column 11311 in http://localhost:64716/bundles/kendo?v=Mt_vnIDxltOGpsu7Y4JtLwq860FIgJ_8g1LouxzoGkE1
0x800a138f - JavaScript runtime error: Unable to get the property "0" a reference null or undefined.

From what I gather from the developer tools it is the  return this._data[i] that throw the exception because this.data is undefined.

[Rosen]

Hello Alexandre,

I'm afraid that I'm not sure what may be the cause for the error you have described judging by the provided information. Therefore, could you please provide a small runnable sample in which the issue in question can be recreated locally.

Regards,
Rosen
Telerik

 

 

[Alexandre]

Here a small runnable sample with the issue

[Rosen]

Hello Alexandre,

Although, the sample you have provided seems to not be fully runnable as there are various missing JavaScript dependencies, I was unable to observe such error when sorting the grid.
However, it seems that similar error appears when clicking on the grid cells. And it is caused by the fact that the client API is used, but the Grid is populated via server binding. As you may know in this configuration the grid is rendered on the server, thus no data is send to the client and most of the client-side API (such as dataItem method for example) is not available. If you want to use the client-side functionality you will need to use the AJAX binding, either with or without ServerOperations option enabled.

Regards,
Rosen
Telerik

 

 

[Alexandre]

Ajax binding is not an option in this case because we need the grid to persist the pagin, sorting, and filtering in the url. I need a way to access the values from the data item on the client side. How can I achieve this?

[Rosen]

Hi Alexandre,

Unfortunately, as I have stated in my previous message, the data item cannot be accessed as the data has not been serialized to the client when server binding is used. Thus, you are limited only to the data rendered in the grid cells. You will need to parse the cells' text instead of directly using the data item available with AJAX binding. For example:

function GetDataItem(target) {
    var grid = $("#ProjectsGrid").data("kendoGrid");
    var columns = grid.options.columns;
    var cells = $(target).children();

    var dataItem = {};

    for (var idx = 0; idx < columns.length; idx++) {
        dataItem[columns[idx].field] = cells.eq(idx).text();
    }
    return dataItem;
}

Also it may be useful to use hidden columns if given field required for the processing but should not be shown to the user.

Regards,
Rosen
Telerik