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

Question

我在 Razor 中创建了一个带有动态列的 kendo 网格，grouping.The 控制器在每个条件下成功获取记录并将其作为 Json 响应传递给 kendo 网格。在客户端 Kendo.all.min.js 给出了一个错误说 Cannot read property 'length' of undefined。我想到的线索是某些列有空记录但是这个网格有超过 150 列，从中选择的列显示 up.So 它的我花了很多时间逐一添加每一列并进行测试。

$(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"]ProjectReportGrid.@Model.ReportName.Replace(" ","")");
    });
    function @ViewData["ReportSection"]savemysettings() {
        SaveGridSettings("#@ViewData["ReportSection"]ProjectReportGrid", "@ViewData["ReportSection"]ProjectReportGrid.@Model.ReportName.Replace(" ", "")");
    }

/*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 从模型中获取分组列的名称，但在网格中该列未 selected。 例如，我做了一个不包含 createdDate 列的报告，而我 select 同一列进行分组，然后 Kendo 将无法获取它并抛出异常。 因此，当我检查 groupByCol 是否不在 selected 列中时，我附加了隐藏列，以便 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>
}