0

I made a kendo Grid in Razor with dynamic columns and grouping.The Controller successfully fetch records on every condition and pass it as Json Response to kendoGrid. On client side Kendo.all.min.js gives an error saying Cannot read property 'length' of undefined.The clue I have in mind is that some column have null record but this grid have more than 150 columns from which selected columns show up.So its quite time taking for me to add one by one each column and test it.

$(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!"))))

4
  • What do your script bundles look like, including javascript version? Nov 26, 2019 at 20:04
  • I am using jQuery v2.1.3 with Kendo UI v2016.3.1028 throughout the project.
    – Sibtain
    Nov 27, 2019 at 6:13
  • 1
    Technically, it says 2.2 supported. Not sure if that is an issue. Also verify script order like this. Finally, does your read controller action use a DataSourceRequest? Nov 27, 2019 at 17:21
  • I have tried with v 2.2 and I do follow the standard order.
    – Sibtain
    Nov 28, 2019 at 5:56

1 Answer 1

0

The problem was that groupByCol get name of grouping column from model but within the grid that column is not selected. e.g I made a report which does not include createdDate column and I select the same column for grouping then Kendo will be unable to get it and throw the exception. So when I check if groupByCol is not in selected column I appended the hidden column so that kendo can group the data.

Scenario explained with comments

@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>
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.