Custom paging in Kendo grid in MVC

See more:

MVC

grid

Kendo

I need Pagging in which when user click on Page number then i will get pageNo, make Ajax call, Retrieve Data and Bind to Kendo Grid.

Is there any event to do this.

So far i have tried DataBound which give current selected Page no, but this event fire on Data bind too which call retrievedata function again and again.


I have Done Following

Creating Div,Defining Paging,sortable,events for Kendo Grid

@{
    Layout = null;
}
@using Kendo.Mvc.UI
@using NewMSPConnect.Common;
<div id="ShowGridSLAPerformanceInfoDiv" style="float: left; width: 100%">
    @(Html.Kendo().Grid<newmspconnect.models.usp_service_slaperformance_result>()
            .Name("SLAPerformanceGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.TicketNo).Width(100).Title("Ticket#");
        columns.Bound(p => p.StartDate).Format("{0:dd-mmm-yyyy}").Width(100).Title("Start Date");
        columns.Bound(p => p.EndDate).Width(100).Title("End Date");

    })
            .Groupable()
            .Pageable()
            .Sortable()
            .Scrollable()
            .Events(events => events.DataBound("onDataBound"))
            .EnableCustomBinding(true)
            .Resizable(resize => resize.Columns(true))
            .DataSource(Datasource => Datasource
            .Ajax().PageSize(10)
            .ServerOperation(false)
            .Total(2000)
            .Read(read => read.Action("abc", "abc"))
        )
        )
</newmspconnect.models.usp_service_slaperformance_result></div>

Script Defining Event and Retrieving Data

<script type="text/javascript">
    var FirstTimeBind = true;
    function onDataBound(arg) {
            RetrievingSlaPerformance(PageNo);
    }

    function RetrievingSlaPerformance(PageNo) {
        var downloadUrl1 = '@Url.Action("QBRTabDataPaging", "Services")?' + $.param({ companyId: 0, TabNumber: 3, PageNo: PageNo });
        $.ajax({
            type: 'POST',
            url: downloadUrl1,
            async: true,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (result) {
                $("#LoadingDiv").css("display", "none");
                var grid;
                for (i = 0; i < result.Data.length; i++) {
                    result.Data[i].StartDate = Date(result.Data[i].StartDate);
                    result.Data[i].EndDate = Date(result.Data[i].EndDate);
                }
                alert(result.Data);
                grid = $("#SLAPerformanceGrid").data("kendoGrid").dataSource.data(result.Data);
            }
        });
    }
</script>