Getting error kendoGrid.dataSource.options.schema.model.fields are undefined. The model seems to be undefined.

0 Answers 140 Views
Top achievements
Rank 1
Christa asked on 31 May 2022, 06:43 PM

We are updating Kendo from v2012.3.1210 to v2022.1.412, and currently using a trial version of v2022.1.412. The following code used to work, but now there is issues with the kendoGrid.dataSource.options.schema.model.fields being undefined.

This is in the .cshtml file defining the grid

<div id="deploymentsGrid" class="collapsible">
            <h2>@DeploymentResources.DeploymentGridDeployments <span class="expandhint">&nbsp;</span></h2>
                @Html.Partial("_ButtonGroup", Model.DeploymentButtons)
                <div class="gridWrapper">
                    .DataSource(dataSource =>
                            .Model(model =>
                                model.Id(pdg => pdg.PackageDeploymentId);
                                model.Field(pdg => pdg.PackageDeploymentId).Editable(false);
                            .Read(read => read.Action("SelectAjaxPackageDeployments", "Deployment").Type(HttpVerbs.Post))
                            .Sort(sort =>
                                sort.Add(pdg => pdg.IsActive).Descending();
                            .Events(events =>
                            .Filter(filters => filters.Add(pdg => pdg.IsHidden).IsEqualTo(false));
                    .Columns(columns =>
                        columns.BindButtonColumn(pdg => pdg.PackageDeploymentId, new ButtonColumn()
                            RequestContext = ViewContext.RequestContext,
                            ButtonId = "viewStopDeployment",
                            JavaScriptFunction = "openPackageDeployment",
                            Action = "GetPackageDetailsViewStop",
                            Controller = "Deployment",
                            Value = "#= data.PackageDeploymentId #",
                            HtmlAttributes = new RouteValueDictionary(new {@class = "centeredColumn"}),
                        //if user can deploy, delete or create a deployment then they can hide
                        if(DeploymentIndexViewModel.CanDeletePackageDeployment || DeploymentIndexViewModel.CanCreatePackageDeployment)
                            columns.BindButtonColumn(pdg => pdg.PackageDeploymentId, new ButtonColumn()
                                RequestContext = ViewContext.RequestContext,
                                ButtonId = "showHideDeployment",
                                JavaScriptFunction = "showHidePackageDeployment",
                                Action = "UpdatePackageDeploymentHiddenState",
                                Controller = "Deployment",
                                Value = "#= data.PackageDeploymentId #",
                                HtmlAttributes = new RouteValueDictionary(new {@class = "centeredColumn"}),

                        columns.Bound(p => p.PackageDeploymentName).Title(DeploymentResources.DeploymentGridDeploymentsColDeploymentName);
                        columns.Bound(p => p.DeviceModelName).Title(DeploymentResources.DeploymentGridDeploymentsColDeviceType);
                        columns.Bound(p => p.DeviceGroupName).Title(DeploymentResources.DeploymentGridDeploymentsColGroup);
                        columns.Bound(p => p.PackageTypeName).Title(DeploymentResources.DeploymentGridDeploymentsColPackageType);
                        columns.Bound(p => p.IsActive).Title(DeploymentResources.DeploymentGridDeploymentsColStatus)
                            .ClientTemplate("<span class=\"hidden\" id=\"canDeleteDeployment\">" + DeploymentIndexViewModel.CanDeletePackageDeployment + "</span>#= data.IsActive ? '" + DeploymentResources.DeploymentOptActive + "' : '" + DeploymentResources.DeploymentOptStopped + "' #");
                        columns.Bound(p => p.UserName).Title(DeploymentResources.DeploymentGridDeploymentsColUsername);
                        columns.Bound(p => p.PackageDeploymentStartDate).Format(ApplicationSettings.GridDateTimeFormat).Title(DeploymentResources.DeploymentGridDeploymentsColStartDate);
                        columns.Bound(p => p.PackageDeploymentId)
                        columns.Bound(p => p.IsHidden)
                    .Sortable(sortable => sortable.AllowUnsort(false))
                    .Pageable(paging => paging.BasicPagerSetup()
                        .Messages(m => m.Display(Resources.Messages.Pager_Display)
                    .Events(events => events.BasicGridEvents())

This is in the .js file and the line 'fields = kendoGrid.dataSource.options.schema.model.fields' is erroring with

grid.customizations.js?cdv=1:1139 Uncaught TypeError: Cannot read properties of undefined (reading 'fields')
    at Grid.buildFilterBoxes (grid.customizations.js?cdv=1:1139:54)
    at Grid.onLoad (grid.customizations.js?cdv=1:1381:7)
    at HTMLDivElement.<anonymous> (grid.customizations.js?cdv=1:2139:22)
    at Function.each (jquery-3.6.0.js:385:19)
    at jQuery.fn.init.each (jquery-3.6.0.js:207:17)
    at initGrid (grid.customizations.js?cdv=1:2097:15)
    at grid.customizations.js?cdv=1:2184:2
    at dispatch (jquery-3.6.0.js:5430:27)
    at elemData.handle (jquery-3.6.0.js:5234:28)


Grid.prototype.buildFilterBoxes = function (removeFirstColumn) {
var gridId = this.gridId,
gridSelector = this.gridSelector,
kendoGrid = this.kendoGrid,
fields = kendoGrid.dataSource.options.schema.model.fields,
modelId =,
columns = kendoGrid.columns,
html = '';

// For each column in the grid.
for (columnIndex in columns) {
if (columns.hasOwnProperty(columnIndex)) {
column = columns[columnIndex];
title = column.field;
field = fields[column.field];

if (column.field !== undefined && column.field !== modelId) {
// Determine the type of the column and generate 
//      the filter control based on that.
if (column.values !== undefined) {
html = Grid.getDropDownHtml(column.field, gridId, columnIndex,
} else if (field.type === 'string') {
html = Grid.getTextBoxHtml(gridId, columnIndex);
} else if (field.type === 'number') {
html = Grid.getNumericHtml(gridId, columnIndex);
} else if (field.type === 'boolean') {
html = Grid.getBooleanHtml(column.field, gridId, columnIndex);
} else if (field.type === 'date') {
html = Grid.getDateHtml(gridId, columnIndex);
if (title !== '' && title !== undefined) {
selector = gridSelector + ' a.k-link:eq(' + columnIndex + ')';

html = '';

// Attach events for the text box filters.
$('.FilterTextBox').on('blur', Grid.addFilterImage);
$('.FilterTextBox').on('focus', Grid.removeFilterImage);
$('.FilterTextBox').on('click', function (e) { e.stopImmediatePropagation(); });
$('.FilterTextBox').on('mouseup', this.doTextChange);
$('.FilterTextBox').on('keyup', this.doTextChange);
$('.FilterTextBox').on('cut', this.doTextChange);
$('.FilterTextBox').on('copy', this.doTextChange);
$('.FilterTextBox').on('paste', this.doTextChange);

// Attach events for the date time filter text boxes.
$('.FilterDateBox').on('blur', Grid.addFilterImage);
$('.FilterDateBox').on('focus', Grid.removeFilterImage);
$('.FilterDateBox').on('click', function (e) { e.stopImmediatePropagation(); });
$('.FilterDateBox').on('mouseup', this.doDateChange);
$('.FilterDateBox').on('keyup', this.doDateChange);
$('.FilterDateBox').on('cut', this.doDateChange);
$('.FilterDateBox').on('copy', this.doDateChange);
$('.FilterDateBox').on('paste', this.doDateChange);

// Attach events for the drop down filter boxes.
$('.FilterDropDown').on('change', this.doDropDownChange);
$('.FilterDropDown').on('click', function (e) { e.stopImmediatePropagation(); });

multiple: false,
selectedList: 1,
height: 'auto',
position: { my: 'left top', at: 'left bottom', collision: 'flipfit' },
header: false
$('.ui-multiselect-menu').css({ width: 'auto', minWidth: 50 });
$('.ui-multiselect-menu .ui-multiselect-checkboxes').css({ overflowY: 'auto' });
$('button.ui-multiselect').css({ 'white-space': 'nowrap' });

// Remove the default telerik filtering controls to save space.
Anton Mironov
Telerik team
commented on 01 Jun 2022, 01:50 PM

Hi Christa,

Thank you for the code snippets and details provided.

As I already answered the same case in ticket #1567282, this one will be closed in order for cleaner communication in one place. 

Here is my reply to the ticket:

I dive deeply into the implementation and invest time in research. Along with this, I am trying to replicate the pointed behavior locally. The stoppers that I have are:

  • The code implemented in 2012 or older could be very different than the current needed.
  • The information provided is not runnable, so I could not reproduce the issue locally.
  • The JavaScript customizations are more than 2000 rows, so it will be really difficult to find the errors from the custom scripts.

Further Investigation:

The fastest route to getting you up and running is if you could provide a runnable, isolated, sample project. Examining this project will let us replicate the issue locally and further troubleshoot it.

In order to help you create the reproducible, I have gone ahead and created a starter project for you. It already has all the dependencies and a view/controller with a Grid.

Please take the following steps:

   1. Download and extract the attached solution

   2. Open it in  VS2019 and update the following files with your problematic code

     2.1 Controllers/GridController.cs

     2.2 Views/Home/Index.cshtml

   3. Run the project and confirm that it reproduces the problem at runtime

   4. Close VS2019, then open the project in File Explorer and delete the bin and obj folders

   5. Zip up the solution and attach it to your next reply.

The following article is representing the breaking changes in 2022 Releases:

Furthermore, the following blog post is representing the approach of isolating a problem in a sample project. This is the best way for the support team to debug locally and try our best to resolve the issue.

Looking forward to hearing back from you in the thread of ticket #1567282

Kind Regards,
Anton Mironov

No answers yet. Maybe you can help?

Asked by
Top achievements
Rank 1
Share this question