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

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

1 Answer 578 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 02 Dec 2012, 10:20 PM
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; }
}

1 Answer, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 04 Dec 2012, 07:30 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Ryan
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Share this question
or