Dynamic Paging in Kendo Grid

In one of my previous post we came across how to Insert , Update, Delete using ASP.NET MVC in Kendo Grid. If you noticed, i used a custom paging in the page below the grid.Many a times when we use any grid in our page, we always use paging. Dynamic paging helps the users to give their input for their custom viewing purpose as to how many records they need to view in the grid view alltogether.

Add a div in the page to display the paging control. We add a combobox so that we can enter our values as well as some predefined set of values like 5, 10, 25, 50, 100 etc.

</div> PAGE SIZE:  
<div id="comboPaging" style="width:75px;"></div>
</div>

The corresponding Jquery method for paging is given below. The Jquery function should be included inside the Document.Ready function of Jquery. myKendoGridName is the name of the kendo grid which needs this paging.

<script type="text/javascript">
$(document).ready(function () {
        $("#comboPaging").kendoComboBox({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                { text: 10 },
                { text: 25 },
                { text: 50 },
                { text: 100 }
            ],
            change: function (e) {
                var grid = $("#myKendoGridName").data("kendoGrid");
                grid.dataSource.pageSize(parseInt(this.value()));  
            }   
        });
    });
</script>

In this example we saw how to add paging in kendo grid and getting user input for paging.