Click here to Skip to main content
14,698,679 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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>
Posted
Updated 29-Apr-14 0:28am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900