Paging issue when clicking on 'next page' and 'last page' buttons, numbered pages ok

[Ryan]

Hi,

I am taking over some work from another developer.  He got the grid working - I am looking to extend it.  I added a textbox and a button just below the grid.  The purpose of this is to allow the user to pull more data from the database (on page load it loads 10 rows).  This works (say the user enters in 100 and clicks the button) - when the page buttons with the numbers on it are used.  When the next page, previous page, last page, first page buttons are used then the page just shows the original 10 rows. 

Below is simplified code of what I am using.  Using asp.net, jQuery 1.8.2, jQuery UI 1.9.1, Kendo UI v2012.3.1114. 

Thanks,
Ryan

<script type="text/javascript">

    $(document).ready(function()

    {

        GetData();

    });

 

    function GetData()

    {

        var Num = parseInt(document.getElementById("txt_Rows").value);

         

        $.ajax({

            type: "POST",

            url: "UserActions.aspx/Method",

            data: "{'Number' : " + Num + "}",

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

            dataType: "json",

            error: function(xhr, status) {

                alert(status + " - " + xhr.responseText);

            },

            success: function(msg) {

                $("#Grid").kendoGrid({

                    dataSource: { data: msg.d, pageSize: 10,

                        schema: {

                        model:

                        {

                            fields:

                            {

                            Column1: { type: "string" }

                            }

                        }

                        }

                    },

                    height: 400,

                    scrollable: true,

                    sortable: false,

                    pageable: true,

                    resizable: true,

                    columns: [

                    { field: "Column1", title: "Column1"}

                 ]

                });

            }

        });

    }

</script>

 

<div id="Grid">

</div>

<div align="right">

    <asp:TextBox ID="txt_Rows" runat="server" Text="10" Width="40px" MaxLength="4"></asp:TextBox>

        <input id="btn_LoadData" type="button" value="Load" onclick="GetData();return false;" />

</div>

[System.Web.Services.WebMethod]

public static List<Data> Method(int Number)

{

    // Get data from database

 

    List<Data> DataList = new List<Data>();

 

    // Load data into list - create new instance of class Data

 

    return DataList;

}

 

public class Data

{

    public string Column1 { get; set; }

}

[Rosen]

Hi Ryan,

I suspect that the issue you have described is caused by the fact that Grid widget is recreated every time the textbox value is changed. Beside that this is not correct as you will end up with multiple widget instances instantiated over a single DOM element, the DataSource is created with a hardcoded page size of 10.

For your scenario you may consider different approach. You may bind the Grid widget directly to the page methods and use the DataSource API to change the page size. Note that in order Grid server paging to work, you will need to return the total number of records as well as the paged data.

All the best,
Rosen
the Telerik team