Thursday, March 12, 2015

Kendo UI Grid Server Side Paging

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.

            $("#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.