I have a Kendo UI grid which is set to use inline editing. One column in the grid uses a template and an editor. When I make changes to this column and I click Update for the row, the update in the datasource does not get called.
The column displays a comma-separated list of text in display mode and a multi-select box in edit mode.
Here is my datasource:
var userDataSource = new kendo.data.DataSource({
autoSync: true,
transport: {
read: {
url: "@Url.Action("ManagedUsers", "Manage")" + $("#suppliers").val(),
dataType: "json"
},
update: {
url: "@Url.Action("UpdateUser", "Manage")",
type: "POST"
},
destroy: {
url: "@Url.Action("DestroyUser", "Manage")",
type: "POST"
}
},
schema: {
model: { id: "Id" },
fields: {
Id: { editable: false, nullable: true },
Email: { validation: { required: true } },
IsAdmin: { type: "boolean" },
IsManager: { type: "boolean" },
SupplierRoles: { type: "object" }
}
}
});
And my grid:
var userGrid = $("#userGrid").kendoGrid({
columns: [{
field: "Email",
width: "35%"
},
{
field: "SupplierRoles",
title: "Roles",
template: "#= displayUserSupplierRoles(data.SupplierRoles) #",
editor: userSupplierRoleMultiSelectEditor,
filterable: false,
sortable: false
},
{
field: "IsAdmin",
title: "Admin",
hidden: "@{(!Model.User.IsAdmin).ToString().ToLower();}",
template: "#=IsAdmin ? 'Yes' : 'No' #",
width: "10%"
},
{
field: "IsManager",
title: "Manager",
hidden: "@{(!Model.User.IsManagerForCurrentSupplier).ToString().ToLower();}",
template: "#=IsManager ? 'Yes' : 'No' #",
width: "12%"
},
{ command: ["edit", "destroy"], width: "20%" }],
dataSource: userDataSource,
noRecords: true,
messages: {
noRecords: "There are no users to manage"
},
editable: "inline",
pageable: {
pageSize: 10
},
sortable: true,
filterable: true,
scrollable: true,
resizable: true
});
The editor function for the multi-select column is defined as:
function userSupplierRoleMultiSelectEditor(container, options) {
var selectedRoles = [];
for (var key in options.model.SupplierRoles) {
if (options.model.SupplierRoles[key].HasRole) {
selectedRoles.push(options.model.SupplierRoles[key].Id);
}
}
$("<select data-placeholder='Select roles...'></select>")
.appendTo(container)
.kendoMultiSelect({
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
data: options.model.SupplierRoles,
schema: {
model: { id: "Id" }
}
}
}).data("kendoMultiSelect")
.value(selectedRoles);
}
The grid is populated based upon a user action and done so within this function:
function listUserManagedUsers() {
$.ajax({
url: "@Url.Action("ManagedUsers", "Manage")" + "?supplierName=" + $("#suppliers").val(),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#userGrid").data("kendoGrid").dataSource.data(data);
}
});
}
For completeness, I'll include the view model for the grid:
public class ManagedUserViewModel
{
public string Id { get; set; }
public string Email { get; set; }
public bool IsAdmin { get; set; }
public bool IsManager { get; set; }
public List<UserSupplierRole> SupplierRoles { get; set; }
}
public class UserSupplierRole
{
public int Id { get; set; }
public string Name { get; set; }
public bool HasRole { get; set; }
}
When in edit mode, changing the email and clicking on Update calls Update on the datasource. After altering the multiselect and pressing update does not trigger the update call on the datasource.
Can anyone help me with what am I doing wrong?
Thanks!