How to use server filtering and server paging and server sorting options with page,pagesize, take and skip parameters.

[Ganesh]

Hello Everyone,

grid is loading very slow when database records are more then 15000

i developed one kendo ui grid,
but sometimes i got the error like "jsonmaxlength exceeded "
for this error i given maximum length in web.config file, when i got this error my database has 36500 rows .


This is my webmethod:
     WebService :    analytics.asmx

    <WebMethod(enableSession:=True)> _
    Public Function BindStyles() As String
           Dim dsresult As DataSet = Charts.BindStyles()
            Dim lst As New List(Of stylelookup)
            If dsresult IsNot Nothing AndAlso dsresult.Tables.Count > 0 AndAlso dsresult.Tables(0).Rows.Count > 0 Then
                lst = (From p In dsresult.Tables(0).AsEnumerable Select New  _
                                               stylelookup With _
                                               {.Color = CStr(p("color")).Trim, .Description = CStr(p("desc")).Trim, .Division = CStr(p("division")).Trim, .Group = CStr(p("group")).Trim, .primkey = CInt(p("primkey")), .Scale = CStr(p("scale")).Trim, .Season = CStr(p("season")).Trim, .selectstyle = CBool(p("select")), .Status = If(CStr(p("status")).Trim.ToLower.Replace("a", "") = "", "Active", "In-Active"), .Style = CStr(p("style")).Trim, .Whlprice = CDec(p("whlprice")), .Year = CInt(p("year"))}).ToList
            End If
            Dim objser As New JavaScriptSerializer()
            Dim json As String = objser.Serialize(lst)
            obj = New KendoData
            obj.StyleJSON = json
            obj._time = Date.Now
            Session("kendodata") = obj

            Return json

        Else
            obj = Session("kendodata")
            Return obj.StyleJSON
        End If
    End Function

and this is my default.aspx:

 function webmethod() {
//analytics=webservice name
               analytics.BindStyles(succ, failed);
    }
    function succ(res) {
        data = eval(res);
        load();
    }
    function failed(ex) {
      
        alert(ex._message);
    }


    function load() {
                      $("#grid").kendoGrid({
            dataSource: {
                data: data,
                pageSize: ((__gridH - 30 - 30) / 35),
                serverPaging: true, serverFiltering: true, serverSorting: true
            },
            dataBound: function (arg) {
                ___gridobj = this;
                $("#totalcount").html('' + this.dataSource._data.length + '');
                Pageing(this._data, this._data.length);

            },
            height: __gridH,

            scrollable: true,
            sortable: true,
            filterable: true,
            pageable: true,

            columns: [
         { title: "Select", width: "50px", filterable: false, sortable: false, template: '#= mycheckbox(primkey,selectstyle)#'
         },
                            {
                                field: "Style",
                                width: "100px",
                                title: "Style"
                            },
                            {
                                field: "Color",
                                width: "60px",
                                title: "Color"
                            },

                            {
                                field: "Description",
                                width: "120px",
                                title: "Description"
                            },
                            {
                                field: "Division",
                                width: "50px",
                                title: "Div"
                            },
                             {
                                 field: "Season",
                                 width: "70px",
                                 title: "Season"
                             },
                            {
                                field: "Scale",
                                width: "60px",
                                title: "Scale"
                            },
                             {
                                 field: "Status",
                                 width: "70px",
                                 title: "Status"
                             },
                             {
                                 field: "Group",
                                 width: "50px",
                                 title: "Grp"
                             },
                            {
                                field: "Whlprice",
                                width: "70px",
                                title: "WhlPrice"

                            },
                            {
                                field: "Year",
                                width: "40px",
                                title: "Year"
                            }

                      ]
        });
        return false;
    }

i attached my grid,

Can you explain how to bind grid with parameter like take ,skip,page,pagesize