Kendo Grid MVC5记录数不显示及显示NAN of NAN items问题咨询

我之前帮不少开发者处理过Kendo Grid在MVC5环境下的这类问题——记录总数不显示、计数区域出现NAN of NAN items，大多是数据源返回格式不匹配或者前端Grid配置遗漏导致的，咱们一步步来排查解决：

一、先检查后端Action的返回格式（最常见原因） #

Kendo Grid的分页组件依赖后端返回包含Data（当前页数据）和Total（总记录数）的结构化数据，如果你直接返回原始List，Grid根本拿不到总条数，自然会显示NAN。

正确的做法：

1. 使用Kendo自带的DataSourceResult包装数据（推荐）：
   在你的Controller Action里，用Kendo的扩展方法ToDataSourceResult()自动处理分页、排序、过滤，并返回标准格式：

   using Kendo.Mvc.Extensions;
   using Kendo.Mvc.UI;
   
   public ActionResult Grid_Read([DataSourceRequest] DataSourceRequest request)
   {
       // 从数据库或者服务获取全部数据
       var allData = _yourRepository.GetAllRecords();
       // 用Kendo扩展方法包装成符合要求的格式
       var dataSourceResult = allData.ToDataSourceResult(request);
       // 返回JSON数据
       return Json(dataSourceResult, JsonRequestBehavior.AllowGet);
   }
   

2. 手动包装数据（如果不想用Kendo扩展）：
   确保返回的JSON必须包含Data和Total两个字段，且Total是数值类型（int/long，不能是字符串或null）：

   public ActionResult Grid_Read([DataSourceRequest] DataSourceRequest request)
   {
       var allData = _yourRepository.GetAllRecords();
       // 计算总记录数（不要带分页条件）
       var totalCount = allData.Count();
       // 获取当前页数据
       var pageData = allData.Skip(request.Skip).Take(request.Take).ToList();
       // 手动包装
       return Json(new { Data = pageData, Total = totalCount }, JsonRequestBehavior.AllowGet);
   }
   

二、检查前端Grid的配置 #

1. 确保开启分页功能：
   在MVC助手的Grid配置里，必须加上.Pageable()：

   @(Html.Kendo().Grid<YourModel>()
       .Name("YourGrid")
       .Pageable() // 必须开启分页，否则计数区域不会显示
       .DataSource(dataSource => dataSource
           .Ajax()
           .Read(read => read.Action("Grid_Read", "YourController"))
       )
   )
   

2. 自定义数据源时要指定Schema映射：
   如果你的后端返回字段名不是默认的Data和Total，必须在前端Schema里明确映射：

   $("#YourGrid").kendoGrid({
       dataSource: {
           transport: {
               read: {
                   url: "/YourController/Grid_Read",
                   type: "POST"
               }
           },
           schema: {
               data: "CustomDataField", // 对应后端返回的数据集字段
               total: "CustomTotalField" // 对应后端返回的总记录数字段
           },
           pageable: true,
           pageSize: 10
       }
   });
   

三、用浏览器开发者工具排查细节 #

打开浏览器F12，切换到Network标签，触发Grid的读取请求，查看返回的JSON：

• 确认是否存在Total字段，且值是有效的数字（不是null、"0"字符串或者其他非数值类型）
• 确认Data字段是正确的数组格式
• 切换到Console标签，查看是否有JS报错（比如Schema配置错误导致无法读取Total字段）

四、其他可能的坑 #

• 如果使用了自定义过滤/排序逻辑，确保计算Total时是基于未分页、未过滤的原始数据总数，而不是当前页的数据量
• 不要在前端JS里手动修改数据源的total值，避免覆盖正确的总条数

按照上面的步骤排查，90%以上的情况都能解决这个NAN显示的问题。

内容的提问来源于stack exchange，提问作者AnuPrasad