Kendo UI Grid Inline Row not Updating for Template Columns - kendo-ui

Question

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!

Answer 1

OK. So I figured out what was going wrong.
Essentially, it was when I bound to the multiselect widget.
Here is the new code:
function userSupplierRoleMultiSelectEditor(container, options) {
$("<select data-placeholder='Select roles...' multiple='multiple' data-bind='value:SupplierRoles'></select>")
.appendTo(container)
.kendoMultiSelect({
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
transport: {
read: function(op) {
var roleCache = localStorage.getItem("roles");
if (roleCache != null || roleCache != undefined) {
op.success(JSON.parse(roleCache));
} else {
$.ajax({
url: "#Url.Action("Roles", "Manage")",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
localStorage.setItem("roles", JSON.stringify(data));
op.success(data);
}
});
}
}
}
}
});
}
I added the data-bind attribute to the select tag and I set it to the roles that the user has. I then set the read in the datasource to get all of the roles.
Once these two pieces were hooked up (with a slight change of the view model), the grid would stay synchronized with its state).