KendoUI网格绑定远程数据显示

我在* .cshtml页面上有一个kendoUI网格。我试图实现服务器端分页到网格。它一次只能返回10条记录，因为这是页面大小，以及所有活动记录的计数来确定所需的页数。数据从方法中返回，但不显示在前端。下面请看，KendoUI网格绑定远程数据显示

It shows the total number of pages passed through but not the data

数据传递前端，当我看通过JSONResult，

Passed Data from the JSONResult

* .cshtml -

@(Html.Kendo() 
     .Grid<Reckon.Service.Payroll.Data.DTO.EmployeeDto>() 
     .Name("EmployeeGrid") 
     .Columns(cols => 
     { 
      cols.Bound(emp => emp.Id).Title("ID").Hidden(); 
      cols.Bound(emp => emp.EmployeeNumber).Title("Employee ID").Width(100); 
      cols.Bound(emp => emp.IsPayRunReady).Title("Status").Width(10).ClientTemplate("<span title='This employee is #= IsPayRunReady ? '': 'not '#payrun ready.' class='#= IsPayRunReady ? 'okICN-small' : 'alertICN-small'#'>#= IsPayRunReady ? '': 'Not' # #= IsPayRunReady ? 'P':'p'#ayrun ready</span>"); 
      cols.Bound(emp => emp.FirstName).Title("First Name").Width(100); 
      cols.Bound(emp => emp.LastName).Title("Last Name").Width(100); 
      cols.Bound(emp => emp.DateOfBirth).Title("DOB").Format("{0:dd/MM/yyyy}").Width(100); 
      cols.Template(@<text></text>).ClientTemplate("<a href='" + Url.Action("EmployeeDetailEdit", "EmployeeDetail") + "/#=Id#'>Edit</a>").Width(50); 
      cols.Template(@<text></text>).ClientTemplate("<a href='" + Url.Action("EmployeeDetailRead", "EmployeeDetailRead") + "/#=Id#'>View</a>").Width(50); 
      cols.Template(@<text></text>).ClientTemplate("<a class='k-button xxx' tag='#=Id#'>Delete</a>").Width(50); 
     }) 
     .Pageable(pageable => pageable.ButtonCount(5)) 
     .Sortable(sortable => sortable.AllowUnsort(false)) 
     .Filterable() 
     .Resizable(resize => resize.Columns(true)) 
     .Reorderable(reorder => reorder.Columns(true)) 
     .Navigatable()    
     //.Events(evt => evt.DataBound("afterGridLoaded")) 
     .DataSource(dataSource => dataSource 
      .Ajax() 
      .Batch(true) 
      .PageSize(10) 
      .ServerOperation(true) 
      .Model(model => { model.Id(emp => emp.Id); }) 
      .Read(read => read.Action("EmployeeListPerPage", "EmployeeDetail")) 
    ) 
)

Controller.cs -

public ActionResult EmployeeListPerPage([DataSourceRequest] DataSourceRequest request) 
    { 
     Dispose(); 
     EmployeeListRequest empList = new EmployeeListRequest(); 
     empList.PageNum = request.Page; 
     empList.PageSize = request.PageSize; 

     var dataSource = _payrollService.GetEmployeeListPerPage(empList); 
     var model = new EmployeeListModel(dataSource); 
     return Json(new 
     { 
      Data = model.Employees.ToDataSourceResult(request), 
      Total = dataSource.Total 
     }, JsonRequestBehavior.AllowGet); 

     //return Json(model.Employees.ToDataSourceResult(request), JsonRequestBehavior.AllowGet); 
    }

这会让我选择设置页数，但数据不会显示在页面上。当我使用返回JSON在注释掉的底部，它将在网格上显示数据，但只会显示一个页面。下面请看，

Only showing one page

任何帮助将纠正这个问题，将不胜感激。

来源

2013-12-18 Peter Channon

你在截图返回JSON不正确地嵌套字段：

{ 
    Data: { 
    Data: [], 
    Errors: , 
    Total: 10 
    }, 
    Total: 10001 
}

数据源是寻找在Data属性数据，但数组实际上Data.Data是如此被显示的数据。

被注释掉该行看起来像它应该是正确的，但它看起来像它返回的只有10即显示只有1页当您使用的代码，我可以”的原因Total从您发布的代码中可以看出为什么.ToDataSourceResult()找不到正确的总数。

你可以这样做吗？

var dataSourceResult = model.Employees.ToDataSourceResult(request); // let Kendo build the data 
dataSourceResult.Total = dataSource.Total; // replace total with your own count. 
return Json(dataSourceResult, JsonRequestBehavior.AllowGet); // return as JSON

来源

2013-12-18 01:30:27 CodingWithSpike

我尝试了上面提到的方法，但它给了我一个错误，并说_ **它不包含Total ** _的定义。 DataSourceRequest中的唯一选项如下：IList Aggregates，IList 过滤器，IList 组，int Page，int PageSize，IList 排序。这可能是我目前使用的kendo dll的版本问题吗？ **程序集Kendo.Mvc.dll，v2013.2.918.340 ** –

嗨@CodingWithSpike，我的不好。这工作正常。需要咖啡因加油。谢谢您的帮助。 –

KendoUI网格绑定远程数据显示

回答

相关问题