在MVC中的Kendo网格中进行自定义分页 [英] Custom paging in Kendo grid in MVC

问题描述

我需要Pagging，当用户点击页码时，我将获得pageNo，进行Ajax调用，检索数据并绑定到Kendo Grid。



有没有任何事件要做到这一点。



到目前为止，我已经尝试了DataBound，它给出了当前选择的Page no，但是这个事件也在数据绑定上激活了一次又一次调用retrieveata函数。





我已经完成以下



创建Div ，为剑道网格定义分页，可排序的事件

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>

脚本定义事件和检索数据< br $> b $ b

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>

推荐答案

.param（{companyId： 0 ，TabNumber： 3 ，PageNo：PageNo}）;

.param({ companyId: 0, TabNumber: 3, PageNo: PageNo });

.ajax（{
类型：' POST'，
url：downloadUrl1，
async ： true ，
contentType：' application / json; charset = utf-8'，
dataType：' json' ，
成功： function （result）{

.ajax({ type: 'POST', url: downloadUrl1, async: true, contentType: 'application/json; charset=utf-8', dataType: 'json', success: function (result) {

（ ＃LoadingDiv）。css（ display ， 无）;
var grid;
for （i = 0 ; i< result.Data.length; i ++）{
result.Data [i] .StartDate = Date （result.Data [i] .StartDate）;
result.Data [i] .EndDate = 日期（result.Data [i] .EndDate）;
}
alert（result.Data）;
grid =

("#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 =

这篇关于在MVC中的Kendo网格中进行自定义分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！