[Solved] Problem with Pager in grid

[Rajendra]

Hi i am having trouble in adding PAger. I have search function which is called from couple of location which is bring data using Jquery. Code working fine and displaying the data but unable to add the Paging.

 var srchResuls = function () {<br>                var pg = 1;<br>                $("#srchgrd").data("kendoGrid").dataSource.query({<br>                    page: pg,<br>                    pageSize: 2<br>                });<br>                $.ajax({<br>                    url: "Docktst.aspx/Getserachres",<br>                    type: "post",<br>                    dataType: "json",<br>                    contentType: "application/json; charset=utf-8",<br>                  <br><br>                    success: function (result) {<br>                        searchResults = result;<br>                    }<br>                }).done(function () {<br>                    var dataSource = new kendo.data.DataSource({<br>                        data: searchResults.d,<br>                      <br>                       <br>                        schema: {<br>                            model: {<br>                                id: "DOCK_ACTIVITY_ID",<br>                                fields: {<br>                                    DOCK_ACTIVITY_ID: { type: "number", editable: false },<br>                                    LOC_ABBR: { type: "string", editable: true, filterable: { multi: true, search: true } },<br>                                    // BatchId :{ editable: true, nullable: true },<br>                                    SHIPPER_ACCT_NBR: { type: "number", editable: false },<br>                                    ORDER_ID: { type: "number", editable: false },<br>                                    VESSEL_VIN: { type: "string" },<br>                                    CUSTOMER_PT: { type: "string" }<br><br><br>                                }<br>                            },<br><br>                            pageable: {<br>                                <br>                                pageSize: 2,<br>                                buttonCount: 1<br>                            },<br><br>                            serverSorting: true,<br>                            sort: { field: "DOCK_ACTIVITY_ID", dir: "desc" },<br><br>                            parameterMap: function (data) {<br>                                return JSON.stringify(data);<br>                            }<br><br>                        }<br>                    });<br>

[Rajendra]

  var srchResuls = function () {
                var pg = 1;
                $("#srchgrd").data("kendoGrid").dataSource.query({
                    page: pg,
                    pageSize: 2
                });
                $.ajax({
                    url: "Docktst.aspx/Getserachres",
                    type: "post",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                  

                    success: function (result) {
                        searchResults = result;
                    }
                }).done(function () {
                    var dataSource = new kendo.data.DataSource({
                        data: searchResults.d,
                      
                       
                        schema: {
                            model: {
                                id: "DOCK_ACTIVITY_ID",
                                fields: {
                                    DOCK_ACTIVITY_ID: { type: "number", editable: false },
                                    LOC_ABBR: { type: "string", editable: true, filterable: { multi: true, search: true } },
                                    // BatchId :{ editable: true, nullable: true },
                                    SHIPPER_ACCT_NBR: { type: "number", editable: false },
                                    ORDER_ID: { type: "number", editable: false },
                                    VESSEL_VIN: { type: "string" },
                                    CUSTOMER_PT: { type: "string" }


                                }
                            },

                            pageable: {
                                
                                pageSize: 2,
                                buttonCount: 1
                            },

                            serverSorting: true,
                            sort: { field: "DOCK_ACTIVITY_ID", dir: "desc" },

                            parameterMap: function (data) {
                                return JSON.stringify(data);
                            }

                        }
                    });

[Kiril Nikolov]

Hello Rajendra,

Have you made the grid pageable and set the total? I am not able to see the grid configuration from the code that you posted.  Would it be possible to provide a runnable sample?

Regards,
Kiril Nikolov
Telerik

 

 

[Rajendra]

My Problem is I am unable to pass the take, skip parameters from Jquery Ajax function,  Client side paging works fine.  serverPaging: true is not passing those two Parameters.  I am using  webmethod to load the data.

$.ajax({
url: "Docktst.aspx/Getserachres",
type: "post",

data:{}, // Here I need to pass skip and take Parameters.

dataType: "json",
 contentType: "application/json; charset=utf-8",

 success: function (result) {
                        searchResults = result;
                    }
                }).done(function () { 

                     var dataSource = new kendo.data.DataSource({

data: searchResults.d,

 pageable: {pageSize: 2,      buttonCount: 1  },

 serverPaging: true,

......

                   

                    

[Rajendra]

I am unable to Edit the post Putting the code again

$.ajax({           
url: "Docktst.aspx/Getserachres",
type: "post",   
data:{}, // Here I need to pass skip and take Parameters.

dataType: "json",
 contentType: "application/json; charset=utf-8",

 success: function (result) {
                        searchResults = result;
                    }
                }).done(function () { 
                     var dataSource = new kendo.data.DataSource({
data: searchResults.d,
 pageable: {pageSize: 2,      buttonCount: 1  },
 serverPaging: true,
......

[Kiril Nikolov]

Hello Rajendra,

I am not really sure what your exact setup is, if you have serverPaging, then you need to implement the transport methods in the dataSource so they will send the params to the server. The following documentation might be helpful:

http://docs.telerik.com/kendo-ui/framework/datasource/crud

Regards,
Kiril Nikolov
Telerik