I have a grid that I'm trying to enable inline editing. Whenever I attempt to update a row error is thrown in the console. I've tried moving the editor into a separate editor with no luck. I removed the configuration column so there was just the Room displayName and the same thing happens so it is not an issue with the Multi-Select.
I am currently using Kendo UI v2021.1.330
In Chrome the error happens when the edit control loses focus and is
kendo.all.js:6566 Uncaught TypeError: Cannot read properties of undefined (reading 'data')
at init.setup (kendo.all.js:6566:106)
at init.create (kendo.all.js:6540:34)
at Object.<anonymous> (kendo.all.js:7640:42)
at Function.Deferred (jquery.min.js:2:29289)
at init._promise (kendo.all.js:7637:26)
at init._send (kendo.all.js:7663:44)
at init.sync (kendo.all.js:7395:60)
at init._change (kendo.all.js:8041:26)
at init.d (jquery.min.js:2:3873)
at init.trigger (kendo.all.js:164:37)
In Firefox the error happens when clicking update and is
function generateTemplate(configs) :string{
var arryDisplayNames = configs.map(function (a) { return a.displayName; });
var result = arryDisplayNames.join(", ");
return result;
}
let configurationDataSource = new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url: '/api/config',
data: function (opt) {
return {
roomId: 0
}
}
},
},
schema: {
model: {
id: "id",
fields: {
//id: { type: "number" },
displayName: { type: "string"}
}
}
}
})
let gridDataSource: kendo.data.DataSource = new kendo.data.DataSource({
autoSync: true,
transport: {
read: {
url: '/api/rooms/',
type: 'get',
dataType: 'json',
data: {
buildingid: roomBuildingId
}
},
update: {
url: '/api/rooms/',
type: 'post',
dataType: 'json'
}
},
schema: {
model: {
id: "RoomId",
fields: {
roomId: { type: 'number' },
buildingId: { type: 'number' },
displayName: { type: 'string' },
restricted: { type: 'boolean' },
isActive: { type: 'boolean' },
configurations: { type: 'object' },
owners: { type: 'object' },
}
}
}
});
let gridColumns: kendo.ui.GridColumn[] = [
{ field: "displayName", title: "Room" },
{
field: "configurations",
title: "Configurations",
editor: function (container,options) {
var input = $("<input name='Configurations' id='Configurations' >");
// append to the editor container
input.appendTo(container);
// initialize a multiselect
input.kendoMultiSelect({
dataTextField: "displayName",
dataValueField: "id",
dataSource: configurationDataSource // bind it to the brands array
}).appendTo(container);
},
template: "#= generateTemplate(configurations) #"
},
{ command: ["edit"], title: " "}
];
roomGrid = $('#rooms').kendoGrid({
dataSource: gridDataSource,
sortable: true,
groupable: true,
pageable: false,
editable: "inline",
selectable: "row",
columns: gridColumns
}).data('kendoGrid') as kendo.ui.Grid1 Answer, 1 is accepted
Hello, Bill,
Please check this How-To article what shows how to configure a MultiSelect as an editor in the Grid.
Let me know if you have any questions.
Regards,
Martin
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.