Click here to Skip to main content
15,921,793 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

Razor
@{
    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

JavaScript
<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-Jun-22 4:14am
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