Problem with Pager in grid

6 posts, 0 answers
  1. Rajendra
    Rajendra avatar
    9 posts
    Member since:
    Feb 2015

    Posted 24 Feb 2016 Link to this post

    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>
  2. Rajendra
    Rajendra avatar
    9 posts
    Member since:
    Feb 2015

    Posted 24 Feb 2016 Link to this post

      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);
                                }

                            }
                        });
  3. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 26 Feb 2016 Link to this post

    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!
     
  4. Rajendra
    Rajendra avatar
    9 posts
    Member since:
    Feb 2015

    Posted 26 Feb 2016 in reply to Kiril Nikolov Link to this post

    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,

    ......


                       

                        

  5. Rajendra
    Rajendra avatar
    9 posts
    Member since:
    Feb 2015

    Posted 26 Feb 2016 in reply to Rajendra Link to this post

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

  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 29 Feb 2016 Link to this post

    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!
     
Back to Top