I have been working on some admin screens for an internal application and we recently purchased the Telerik Dev Tools library for use on the site. The first scenario I tackled was displaying a list of the application’s active users.
The Kendo UI Grid supports both client side rendering and server side rendering.
Client-side rendering uses HTML/JS to setup the grid and then makes a remote call to load data into the Grid.
Server-side rendering a developer uses C# to setup the grid and populate its contents from a property on the Model.
At first, due to my natural preference for C# vs. JavaScript, I tried using the server-side rendering. The grid rendered with the data in it but sorting, filtering, and grouping did not work.
Next, I tried client-side rendering. I found this wonderful article describing how to setup your controller endpoints to take in the correct parameters that the Kendo UI Grid sends but I still had the same problem. Sort wouldn’t work. However, this time, I had a pretty good idea why.
Based on the fore-mentioned article, I setup my controller endpoint with skip, take, page, pageSize, sort, and filter parameters.
I defined SortDescription class:
Then I defined the FilterContainer and FilterDescription classes:
So far so good? Or so I thought…
I launch my site (in the Azure simulator of course ) and turn on the web console within FireFox so I can monitor the activity. I see the call come across from the Kendo UI JavaScript.
The Query String of the request looks like this:
All the usual suspects are there.
I even used a URL decoder ring to make it a bit more readable just to be sure I knew what I was looking at.
The URL looks okay but when my controller picks it up I have an array of SortDescription objects with one item in item. As expected. However, the Dir and Field properties are null. Based on the query string I am expecting Dir=”asc” and Field=”LastName”.
I thought the likely problem would be some serialization failure. So I tried modifying my SortDescription class to make directly to the case sensitive names.
But it makes no difference.
I am having the exact same problem with this UI. I’m trying to do my sorting and paging on the serverside, but the same issue arrises. I get an array of objects for my sort parameter with one item, and it has nulls for both the Dir and Field.
LikeLike
Hi!
try to put this in your datasource:
dataSource: {
transport: {
read: {
type: ‘POST’,
url: ‘yyxxzz’,
dataType: ‘json’,
// 1
contentType: ‘application/json; charset=utf-8’
},
// 2
parameterMap: function (options) {
return JSON.stringify(options);
}
},
}
LikeLike