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"> </span></h2>
<div>
@Html.Partial("_ButtonGroup", Model.DeploymentButtons)
<div class="gridWrapper">
@(Html.Kendo().Grid<vw_PackageDeploymentGrid>()
.Name("DeploymentGrid")
.DataSource(dataSource =>
{
dataSource.Ajax()
.PageSize(DeploymentIndexViewModel.DeploymentPageSize)
.Model(model =>
{
model.Id(pdg => pdg.PackageDeploymentId);
model.Field(pdg => pdg.PackageDeploymentId).Editable(false);
})
.ServerOperation(true)
.Read(read => read.Action("SelectAjaxPackageDeployments", "Deployment").Type(HttpVerbs.Post))
.Sort(sort =>
{
sort.Add(pdg => pdg.IsActive).Descending();
})
.Events(events =>
{
events.Error("onError(\"DeploymentGrid\")");
events.RequestEnd("onRequestEnd(\"DeploymentGrid\")");
})
.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)
.Title(String.Empty)
.ClientTemplate(" ")
.Width(35);
columns.Bound(p => p.IsHidden)
.Title(String.Empty)
.Hidden(true);
})
.Filterable()
.Sortable(sortable => sortable.AllowUnsort(false))
.Pageable(paging => paging.BasicPagerSetup()
.Messages(m => m.Display(Resources.Messages.Pager_Display)
.Empty(Resources.Messages.Pager_Empty)
.First(Resources.Messages.Pager_First)
.ItemsPerPage(Resources.Messages.Pager_ItemsPerPage)
.Last(Resources.Messages.Pager_Last)
.Next(Resources.Messages.Pager_Next)
.Of(Resources.Messages.Pager_Of)
.Page(Resources.Messages.Pager_Page)
.Previous(Resources.Messages.Pager_Previous)
.Refresh(Resources.Messages.Pager_Refresh))
)
.Events(events => events.BasicGridEvents())
)
</div>
</div>
</div>
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 = kendoGrid.dataSource.options.schema.model.id,
columns = kendoGrid.columns,
columnIndex,
selector,
column,
title,
field,
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,
column.values);
} 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).insertAfter(selector);
}
}
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(); });
$('.FilterDropDown').multiselect({
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.
$('.k-grid-filter').remove();
};
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:
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:
https://docs.telerik.com/aspnet-mvc/backwards-compatibility/2022-backwards-compatibility#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.
https://www.telerik.com/blogs/isolating-a-problem-in-a-sample-project
Looking forward to hearing back from you in the thread of ticket #1567282
Kind Regards,
Anton Mironov