I recently did some project into Kendo UI so here I sharing my experience that I have regarding to Kendo UI.
So here I going to writing useful notes for those who want to do server side paging in Kendo UI Grid. Lets begin first from client side.
Below you can see js code for Kendo Grid binding in JS.
Copy below code and paste into your default.aspx or wherever you want into your page. Change the div Id as per your requirement.
VB.net
C#
When you are going to create API controller in Asp.net then don't forget to configure route setting for API controller in global.asax.
Here is code for setting API controller in global.asax, this code should be call into Application_start method.
The code written into vb.net so if someone need into C# then please convert it into C# code format from online code converter tools.
Grid paging work flow :
Kendo grid provide a useful way to do server side paging, you just need to configure server side page setting in Kendo grid. As you see in above Grid binding js code where I enable serverPaging:true and setup schema which says to grid in which format Grid receive a data from server side (Api Controller).
Programmer don't need to care about page settings related logic because it handle at client side in Kendo grid. Paging related settings are receive at server side like Skip, Take, Page, Page Size. So here what I did into API controller, I just receive paging parameter which was requested from client side and apply those parameter into fetching records.
If you want more trace on URL which was generated after changing page into Kendo Grid, for that just do right click on page and select Inspect element there you can see Network tab and there you will see all requested trace URLs which was made from this page. For example you can see below screen shots for more information.
So here I going to writing useful notes for those who want to do server side paging in Kendo UI Grid. Lets begin first from client side.
Below you can see js code for Kendo Grid binding in JS.
$("#UserGrid").kendoGrid({ dataSource: { transport: { read: "<%=ResolveUrl("/api/KendoData/GetJsonData")%>" }, pageSize: 5, serverPaging: true, schema: { data: "data", total: "total" } }, height: 200, groupable: true, sortable: true, pageable: true, });
Copy below code and paste into your default.aspx or wherever you want into your page. Change the div Id as per your requirement.
VB.net
Imports System.Net Imports System.Web.Http Imports System.Collections Imports Newtonsoft.Json Imports System.Net.Http Imports Newtonsoft.Json.Linq Public Class KendoDataController Inherits ApiController <HttpGet> Public Function GetJsonData(take As Integer, skip As Integer, page As Integer, pageSize As Integer) As JToken If (skip <> Nothing And take <> Nothing) Then Return JObject.FromObject(New With {.total = 9, .data = Context.Users().Skip(skip).Take(take)}) Else Return JObject.FromObject(New With {.total = 9, .data = Context.Users().Skip(0).Take(pageSize)})
End If End Function End Class
C#
[HttpGet] Public JToken GetJsonData(int take, int skip, page int, int pageSize){ If(skip!=null && take !=null) Return JObject.FromObject(New {.total = 9, .data = Context.Users().Skip(skip).Take(take)}); else Return JObject.FromObject(New {.total = 9, .data = Context.Users()}); }
When you are going to create API controller in Asp.net then don't forget to configure route setting for API controller in global.asax.
Here is code for setting API controller in global.asax, this code should be call into Application_start method.
Dim config = GlobalConfiguration.Configuration config.Routes.MapHttpRoute("ActionApi", "api/{controller}/{action}/{id}", New With {.Id = RouteParameter.Optional}) config.Routes.MapHttpRoute("DefaultApi", "api/{controller}/{id}", New With {.Id = RouteParameter.Optional})
The code written into vb.net so if someone need into C# then please convert it into C# code format from online code converter tools.
Grid paging work flow :
Kendo grid provide a useful way to do server side paging, you just need to configure server side page setting in Kendo grid. As you see in above Grid binding js code where I enable serverPaging:true and setup schema which says to grid in which format Grid receive a data from server side (Api Controller).
Programmer don't need to care about page settings related logic because it handle at client side in Kendo grid. Paging related settings are receive at server side like Skip, Take, Page, Page Size. So here what I did into API controller, I just receive paging parameter which was requested from client side and apply those parameter into fetching records.
If you want more trace on URL which was generated after changing page into Kendo Grid, for that just do right click on page and select Inspect element there you can see Network tab and there you will see all requested trace URLs which was made from this page. For example you can see below screen shots for more information.
No comments:
Post a Comment