Kendo Grid在客户端抛出异常：无法读取未定义的属性'length'

Question

我用动态列和分组在Razor中制作了一个kendo网格。控制器成功获取每种条件下的记录，并将其作为Json Response传递给kendoGrid。在客户端Kendo.all.min.js上出现错误提示Cannot read property 'length' of undefined。我想到的线索是，某些列的记录为空，但是此网格有150多个列，从中显示所选列。每列一一添加并进行测试。

$(document).ready(function () {
        @if (!string.IsNullOrEmpty(groupByCol))
        {
            <text>$("#@ViewData["ReportSection"]ProjectReportGrid").data("kendoGrid").dataSource.group({ field: "@groupByCol", dir: "@groupSort" })</text>
        }
        var reportName = '@Model.ReportName';
        setGridSettings("#@ViewData["ReportSection"]ProjectReportGrid", "@ViewData["ReportSection"][email protected](" ","")");
    });
    function @ViewData["ReportSection"]savemysettings() {
        SaveGridSettings("#@ViewData["ReportSection"]ProjectReportGrid", "@ViewData["ReportSection"][email protected](" ", "")");
    }

/*No Custom style applied*/

@model ViewModels.ReportingToolPreviewModal
@using Kendo.Mvc.UI
@{
    bool Isplanning = ViewData["ReportSection"].ToString() == "Planning";
    string groupByCol = Model.SortAndGroup.Select(x => x.FieldLogicalName).FirstOrDefault();
    string groupSort = Model.SortAndGroup.Select(x => x.IsDescending).FirstOrDefault() ? "desc" : "asc";
    bool calculateTotal = false;
}
@(Html.Kendo().Grid(Model.Projects)
        .Name(ViewData["ReportSection"] + "ProjectReportGrid")
        .HtmlAttributes(new { @style = "display:inline-block; Width: 100%;" })
        .Columns(columns =>
        {
           ...
        })
        .DataSource(dataSource => dataSource.Ajax().Read(r => r.Action("GetDataForProjectReport", "ReportingTool").Data("{reportId:" + ViewBag.ReportId + ",IsPlanning:'" + Isplanning.ToString() + "'}")).PageSize(100)
     .Aggregates(aggregates =>
     {
         if (calculateTotal)
         {
             aggregates.Add(p => p.BillCredit).Sum();
             aggregates.Add(p => p.BillItemTotalCost).Sum();
             aggregates.Add(p => p.TotalBillBudgetItem).Sum();
             aggregates.Add(p => p.CangeOrderBudget).Sum();
             aggregates.Add(p => p.BudgetCurrentCostBudgetItem).Sum();
             aggregates.Add(p => p.BudgetOriginalBudget).Sum();
             aggregates.Add(p => p.BudgetTotalBudget).Sum();
             //aggregates.Add(p => p.BudgetTotalCostBudgetItem).Sum();
             aggregates.Add(p => p.BillItemUnitCost).Sum();
             aggregates.Add(p => p.BudgetItemVariance).Sum();
             aggregates.Add(p => p.COChangeOrderAmount).Sum();
             aggregates.Add(p => p.FinRemainingProfit).Sum();
             aggregates.Add(p => p.FinChangeOrderBudgetItem).Sum();
             aggregates.Add(p => p.FinChangeOrderAmount).Sum();
             aggregates.Add(p => p.FinContractBalance).Sum();
             aggregates.Add(p => p.FinDrawsTaken).Sum();
             aggregates.Add(p => p.FinEstimatedBudgetItem).Sum();
             aggregates.Add(p => p.FinProjectContractAmount).Sum();
             aggregates.Add(p => p.FinPaymentReceived).Sum();
             aggregates.Add(p => p.FinProjectBankAccount).Sum();
             aggregates.Add(p => p.FinRemainingCost).Sum();
             aggregates.Add(p => p.FinTotalBudget).Sum();
             aggregates.Add(p => p.FinContractAmountTotal).Sum();
             aggregates.Add(p => p.FinTotalCost).Sum();
             aggregates.Add(p => p.FinProfitTotal).Sum();
             aggregates.Add(p => p.FinVariance).Sum();
             aggregates.Add(p => p.ProjectContractAmount).Sum();
             aggregates.Add(p => p.ProjectContractedAmount).Sum();
             aggregates.Add(p => p.ReceivableAmountDue).Sum();
             aggregates.Add(p => p.ReceivableAmountPaid).Sum();
             aggregates.Add(p => p.ReceivableBalance).Sum();
         }
     })
    )
    .Events(x => x.DataBound("AdjustGrid").ColumnShow(ViewData["ReportSection"] + "savemysettings").ColumnResize(ViewData["ReportSection"] + "savemysettings").ColumnLock(ViewData["ReportSection"] + "savemysettings").ColumnUnlock(ViewData["ReportSection"] + "savemysettings").ColumnHide(ViewData["ReportSection"] + "savemysettings"))
    .NoRecords(n => n.Template("<B >No records to display</B>"))
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .ToolBar(tools => tools.Excel()).Excel(excel => excel.FileName(Model.ReportName + ".xlsx").Filterable(true))
    .Sortable()
    .Scrollable()
    .ColumnMenu(x => x.Filterable(true))
    .Reorderable(x => x.Columns(true))
    .Resizable(x => x.Columns(true)).Pageable(x => x.PageSizes(new string[] { "25", "50", "100", "All" }).PreviousNext(true).Refresh(true).Numeric(true).Messages(m => m.Display("Total {2} record(s) found!"))))

Answer 1

问题是groupByCol从模型获取分组列的名称，但在网格内未选择该列。例如，我做了一个不包含createdDate列的报告，并且选择了同一列进行分组，那么Kendo将无法获取它并引发异常。因此，当我检查groupByCol是否不在所选列中时，我附加了隐藏列，以便kendo可以对数据进行分组。

场景用注释解释

@if (!string.IsNullOrEmpty(groupByCol)) //here groupByCol='ColumnA'
{
    <text>$("#@ViewData["ReportSection"]ProjectReportGrid").data("kendoGrid").dataSource.group({ field: "@groupByCol", dir: "@groupSort" }); //this line causes error as ColumnA is not in the grid</text>
}