This is a migrated thread and some comments may be shown as answers.

Problem with Pager in grid

5 Answers 54 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rajendra
Top achievements
Rank 1
Rajendra asked on 24 Feb 2016, 07:00 PM
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>

5 Answers, 1 is accepted

Sort by
0
Rajendra
Top achievements
Rank 1
answered on 24 Feb 2016, 07:02 PM
  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);
                            }

                        }
                    });
0
Kiril Nikolov
Telerik team
answered on 26 Feb 2016, 08:54 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rajendra
Top achievements
Rank 1
answered on 26 Feb 2016, 02:42 PM

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,

......


                   

                    

0
Rajendra
Top achievements
Rank 1
answered on 26 Feb 2016, 02:45 PM

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,
......

0
Kiril Nikolov
Telerik team
answered on 29 Feb 2016, 07:52 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Rajendra
Top achievements
Rank 1
Answers by
Rajendra
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Share this question
or