I have multiselect field in grid with inline editing. When I enter 1st time edit mode, everything displays correct. but when I enter 2nd and more, selected values in multiselect box dissapear, but they are staying selected in dropdown list. How can I fix it?
Code below:
function authorMultiSelectEditor(container, options) {
indexAuthor = options.model.Id
$('<
select
data-bind
=
"value:' + options.field + '"
/>')
.appendTo(container)
.kendoMultiSelect({
filter: "startswith",
suggest: true,
autoBind: false,
valuePrimitive: true,
dataTextField: "Name",
dataValueField: "Id",
dataSource: auhors,
select: onSelectAuthor,
deselect: onDeselectAuthor
});
};
let datasource = new kendo.data.DataSource({
transport: {
read: function (e) {
$.ajax({
type: "GET",
url: '/Book/Index',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
e.success(data);
},
error: function (data) {
e.error("", "400", data);
}
});
},
update: function (e) {
var postData = new createUpdatedBook(e.data);
$.ajax({
type: "POST",
url: '/Book/Update',
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(postData),
success: function (data) {
$('#grid').data('kendoGrid').dataSource.read();
$('#grid').data('kendoGrid').refresh();
},
error: function (data) {
$('#grid').data('kendoGrid').dataSource.read();
$('#grid').data('kendoGrid').refresh();
e.error("", "400", data);
}
});
},
create: function (e) {
var postData = e.data;
$.ajax({
type: "POST",
url: '/Book/Insert',
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(postData),
success: function (data) {
e.success(data);
$('#grid').data('kendoGrid').dataSource.read();
$('#grid').data('kendoGrid').refresh();
},
error: function (data) {
e.error("", "400", data);
$('#grid').data('kendoGrid').dataSource.read();
$('#grid').data('kendoGrid').refresh();
}
});
},
destroy: function (e) {
var postData = e.data.Id;
$.ajax({
type: "POST",
url: '/Book/Delete/?id=' + postData,
contentType: "application/string; charset=utf-8",
dataType: "string",
data: postData,
success: function (data) {
e.success(data);
},
error: function (data) {
e.error("", "400", data);
}
});
}
},
batch: false,
pageSize: 20,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "string", editable: false, },
Name: { type: "string", validation: { required: true } },
IdPublisher: { type: "string", editable: false },
PublisherName: { type: "string", validation: { required: true } },
IdAuthor: { type: "string", editable: false },
AuthorName: { type: "string", validation: { required: true } },
}
}
},
change: function (e) {
if (e.action === "itemchange" && e.field == "PublisherName") {
var model = e.items[0],
currentValue = dataItem.Id;
if (currentValue !== model.IdPublisher) {
model.IdPublisher = currentValue;
$("#grid").find("tr[data-uid='" + model.uid + "'] td:eq(3)").text(currentValue);
}
}
},
requestEnd: onRequestEnd
});
$("#grid").kendoGrid({
dataSource: datasource,
navigatable: true,
pageable: true,
height: 550,
toolbar: ["create", "cancel"],
columns: [
{ field: "Id", title: "id" },
{ field: "Name", title: "Book Name", width: 400 },
{ field: "Authors", title: "Authors", template: authorMultiTemplate, editor: authorMultiSelectEditor, width: 700 },
{ field: "IdPublisher", title: "IdPublisher" },
{ field: "PublisherName", title: "Publisher", editor: publisherAutoCompleteEditor, width: 300 },
{ command: ["edit", "destroy"], title: " ", width: 300 }],
toolbar: ["create"],
editable: "inline",
dataBound: function (e) {
this.hideColumn(0);
this.hideColumn(3);
}
});
});