Kendo Grid Server Paging not working

[Santhosh]

Hi all,
     i'd tried the samples of kendo grid and worked on server paging and if i'd set server paging is true then the each and every page click will send to my wcf service 
and return back... but it will take all the datas from the server
any one please tell me how to do on this server paging????

this is my sample code

griddatasource= new kendo.data.DataSource({
                transport: {
                    read: function (option) {
                        $.ajax({
                            url: 'http://localhost:53788/ReportKendo.svc/getGrid',
                            dataType: 'json',

                            success: function (data) {
                                option.success(JSON.parse(data.d));
                            }, error: function (doc) {
                                alert("Grid load Error")
                            }
                        });
                    }
                },
                serverPaging: true,
              pageSize: 15,
                schema: {
                    model: {
                        fields: {
                            serialnumber: { type: "string" },
                            jobcode: { type: "string" },
                            mname: { type: "string" },
                            vouchertype: { type: "string" },
                            dummyvouno: { type: "string" },
                            dummyvoudate: { type: "string" },
                            voucherno: { type: "string" },
                            voucherdate: { type: "string" },
                            Createdby: { type: "string" },
                            amount: { type: "string" },
                            currencycode: { type: "string" },
                            trncurrency: { type: "string" },
                            ispaid: { type: "string" },
                            isiuv: { type: "string" },
                            isreverse: { type: "string" },
                            isprovisionalvoucher: { type: "string" },
                            voucherstatus: { type: "string" },
                            subcode: { type: "string" },
                            credate: { type: "string" },
                            aurthtime: { type: "string" },
                            billno: { type: "string" },
                            billdate: { type: "string" },
                            subledgername: { type: "string" }
                        }
                    }
                }
            });

$("#grid").kendoGrid({
                dataSource: griddatasource,
                serverPaging: true,
                groupable: true,
                sortable: true,
                selectable:true,
                filterable: true,
                reorderable: true,
                resizable: true,
                columnMenu: true,
                pageable: {
                    refresh: true,
                    pageSizes: true
                },

                detailInit: subgrid,
                aggregate: [{ field: "amount", aggregate: "sum" }],

                columns: [{
                    field: "jobcode",
                    width: 120,
                    title: "Job Code"
                }, {
                    field: "mname",
                    width: 300,
                    title: "Job Name"
                },
                     {
                         field: "vouchertype",
                         width: 120,
                         title: "Voucher Type",
                     }, {
                         field: "dummyvouno",
                         width: 130,
                         title: "Ref Voucher No.",
                     }, {
                         field: "dummyvoudate",
                         width: 150,
                         title: "Ref Voucher Date",
                     }, {
                         field: "voucherno",
                         width: 120,
                         title: "Voucher No.",
                     }, {
                         field: "voucherdate",
                         width: 120,
                         title: "Voucher Date",
                     }, {
                         field: "Createdby",
                         width: 150,
                         title: "Created By",
                     }, {
                         field: "amount",
                         width: 100,
                         title: "Amount", FooterTemplate: "Amount: #= sum #",
                     }, {
                         field: "currencycode",
                         width: 120,
                         title: "Job Currency",
                     }, {
                         field: "trncurrency",
                         width: 120,
                         title: "Trans Currency",
                     }, {
                         field: "ispaid",
                         width: 130,
                         title: "Is Paid/Received",
                     }, {
                         field: "isiuv",
                         width: 90,
                         title: "Is IUV",
                     }, {
                         field: "isreverse",
                         width: 100,
                         title: "Reversed",
                     }, {
                         field: "isprovisionalvoucher",
                         width: 165,
                         title: "Is Provisional Voucher",
                     }, {
                         field: "voucherstatus",
                         width: 100,
                         title: "Status",
                     }, {
                         field: "subcode",
                         title: "Narration",
                         width: 270
                     }, {
                         field: "credate",
                         title: "Created Date",
                         width: 110
                     }, {
                         field: "aurthtime",
                         title: "Authorised Date",
                         width: 130
                     }, {
                         field: "billno",
                         title: "Bill No.",
                         width: 90
                     }, {
                         field: "billdate",
                         title: "Bill Date",
                         width: 110
                     }, {
                         field: "subledgername",
                         title: "Subledger Name",
                         width: 200
                     }
                ]
            });

and this is my WCF code:

 public object getGrid(){
 str = "select serialnumber,jobcode,mname,vouchertype,dummyvouno,CONVERT(varchar,cast(dummyvoudate as date),105) as dummyvoudate ,voucherno,CONVERT(varchar,cast(voucherdate as date),105) as voucherdate,Createdby,amount,currencycode,trncurrency,ispaid,isiuv,isreverse,isprovisionalvoucher,voucherstatus,jobcode+' '+CONVERT(VARCHAR(23),trandate, 121) as subcode,CONVERT(varchar,cast(credate as date),105) as credate,CONVERT(varchar,cast(authtime as date),105) as aurthtime,billno,CONVERT(varchar,cast(billdate as date),105) as billdate,subledgername from vinfohvoucherview";
            ds = obj.WsQGetRecSet(str, "vmacmvouchercontrol", ref errormsg, registry);
            return JsonConvert.SerializeObject(ds.Tables[0]);
}

can any one tell me how to do this

[Petur Subev]

Hello Santhosh,

As explained in the documentation you need to specify the field from the response in which the total count will be returned.

http://docs.kendoui.com/api/framework/datasource#configuration-serverPaging

Also you need to use the parameterMap to format the parameters in the correct format.

I can suggest you to check the example that we have in our github demo repository related to WCF.

https://github.com/telerik/kendo-examples-asp-net/tree/master/grid-wcf-crud

e.g.

parameterMap: function(data, operation) {
    if (operation != "read") {
        // web service method parameters need to be send as JSON. The Create, Update and Destroy methods have a "products" parameter.
        return JSON.stringify({ products: data.models })
    } else {
        return JSON.stringify(data);
    }
}

Kind Regards,
Petur Subev
Telerik

[Santhosh]

sir,
i'd set the   parameterMap and also schema but
the WCF returned all the pages 
paging is not working 
this is my sample 

parameterMap: function (data, operation)
{                    
if (operation == "read") {                        
showhide();          
return operation.success(JSON.parse(data.d));             
} }



and schema as 
 

schema: {
                 data: "Data",
                 total: "Total"
}

but it showing error as the data and total is not persent 

could you please send me the sample for the server paging  which is not in MVC
but use in WCF concept to retrieve the data

[Santhosh]

finally i got the result
by sending the data with ajax by data and get the data in wcf and worked out for server paging via LINQ,server sorting,server filtering 
this is my sample code for grid 

var url = 'http://localhost:53788/ReportKendo.svc/';

         var griddatasource = new kendo.data.DataSource({

             transport: {

                 read: function (option) {

 

                     $.ajax({

                         url: url + 'getGrid1',

                         dataType: 'json',

                         data:

                        {

                            skip: option.data.skip,

                            take: option.data.take,

                            pageSize: option.data.pageSize,

                            page: option.data.page,

                            sorting: JSON.stringify(option.data.sort),

                            filter: JSON.stringify(option.data.filter)

                        },

                         success: function (result) {

                             

                             option.success(JSON.parse(result.d));

                         },

                         error: function (result) {

                             alert("error");

 

                         }

                     });

                 }

             },

              

             serverFiltering: true,

             serverSorting: true,

             serverPaging: true,

                     pageSize: 25,

                     schema: {

                        data: "data",

                         total: "total",

                     }

            

         });

         

         function grid()

         {

             $("#grid").kendoGrid({

                 dataSource: griddatasource,

                 groupable: true,

                 //sortable: {

                 //    mode: "multiple",

                 //    allowUnsort: true

                 //},

                 sortable:true,

                 selectable: true,

                 filterable: true,

                 reorderable: true,

                 resizable: true,

                 columnMenu: true,

                 pageable: {

                     refresh: true,

                     pageSizes: true,

                     buttonCount: 5

                 },

                 columns: [{

                     field: "jobcode",

                     width: 120,

                     title: "Job Code"

                 }, {

                     field: "mname",

                     width: 300,

                     title: "Job Name"

                 }

                 ]

             });

         }

         $(document).ready(function () {

 

             grid();

         });




and this is my WCF Code

public object getGrid1(List<SortDescription> sorting, FilterContainer filter, int skip, int take, int pageSize, int page)
       {

        string filters="";
        string logic;
        string condition="";
        int c=1;
           DataTable ds = new DataTable();
           DataTable dt=new DataTable();
           str = "select serialnumber,jobcode,mname from vinfohvoucherview";
           ds = obj.WsQDataTable(str, "vinfodvoucherview", ref errormsg, registry);
           var total = ds.Rows.Count;
           var query = ds.AsEnumerable().Skip(skip).Take(pageSize);
            dt = query.CopyToDataTable();
            if (sorting != null)
            {
                if (sorting.Count != 0)
                {
                    for (int i = 0; i < sorting.Count; i++)
                    {
                        ds.DefaultView.Sort = "" + sorting[i].field + " " + sorting[i].dir + "";
                       //this is for the entire dataset to sort-----added by -santhosh
                        dt = ds.DefaultView.ToTable();
                        //this is for the dataset only with paging are able to sort---added by -santhosh
                        dt = dt.DefaultView.ToTable();
                    }
                }
            }
            if (filter != null)
            {
                for(int i=0;i<filter.filters.Count;i++)
                {
                    logic = filter.logic;
                    if (filter.filters[i].@operator == "eq")
                    {
                        condition = " = '"+filter.filters[i].value+"' ";
                    }
                    if (filter.filters[i].@operator == "neq")
                    {
                        condition = " != '" + filter.filters[i].value + "' ";
                    }
                    if (filter.filters[i].@operator == "startswith")
                    {
                        condition = " Like '" + filter.filters[i].value + "%' ";
                    }
                    if (filter.filters[i].@operator == "contains")
                    {
                        condition = " Like '%" + filter.filters[i].value + "%' ";
                    }
                    if (filter.filters[i].@operator == "doesnotcontains")
                    {
                        condition = " Not Like '%" + filter.filters[i].value + "%' ";
                    }
                    if (filter.filters[i].@operator == "endswith")
                    {
                        condition = " Like '%" + filter.filters[i].value + "' ";
                    }
                    filters += filter.filters[i].field + condition;
                    if (filter.filters.Count >c)
                    {
                        filters += logic;
                        filters += " ";
                    }
                    c++;
                }
                if (filter.filters.Count != 0)
                {
                    if (ds.Select(filters).Length>0)
                    {
                        //this is for the entire dataset to filter-----added by -santhosh
                        dt = ds.Select(filters).CopyToDataTable();
                        //this is for the dataset only with paging are able to filter---added by -santhosh
                        dt = dt.Select(filters).CopyToDataTable();
                    }
                }

            }
            return JsonConvert.SerializeObject(new { total = total, data = dt });
       }

   }

   public class SortDescription
   {
       public string field { get; set; }
       public string dir { get; set; }
   }

   public class FilterContainer
   {
       public List<FilterDescription> filters { get; set; }
       public string logic { get; set; }
   }

   public class FilterDescription
   {
       public string @operator { get; set; }
       public string field { get; set; }
       public string value { get; set; }
   }

[Paul]

Daft question ...
Any reason you couldn't use EF, WebAPI, and OData for this?

Would result in half the amount of code on your part (just a thought for the future).
I've managed to get this working with generics too so I have a ODataService<T> with crud operations in it and then I wrote about 400 lines of code around Kendo on the JS side to basically build a generic datasource.

I should now in theory not need to write any more code ever unless I want to customise output for a specific type.

Again, Just food for thought!