I want to implement a combo box editor in the kendo drid, for which I've followed this link: Grid / Editing custom editor
The issue is I am having is, in the column (with combo box editor) the grid shows the ID instead of the text field while its not in edit mode. The "../api/Users?uid=1" will return JSon: [ { ID: 1, UserName: "aaa" }, { ID: 2, UserName: "bbb" } etc....
Here is the code:
var
gridContainer = $(
'<div id="grdSelectedWorkers" />'
);
gridContainer.appendTo($(element));
var
dataSource =
new
kendo.data.DataSource({
type:
"odata"
,
transport: {
read: {
url:
"../api/Workers"
,
dataType:
"json"
,
data: { id: arrWorkerIDs }
},
update: {
url:
"../api/Workers"
,
dataType:
"json"
,
type:
"PUT"
,
contentType:
"application/json"
},
destroy: {
url:
"../api/Workers"
,
dataType:
"json"
,
type:
"DELETE"
,
contentType:
"application/json"
},
create: {
url:
"../api/Workers"
,
dataType:
"json"
,
type:
"POST"
,
contentType:
"application/json"
},
parameterMap:
function
(options, operation) {
if
(operation !==
"read"
&& options.models) {
return
JSON.stringify(options.models) ;
}
else
{
return
options;
}
}
},
schema: {
model: {
id:
"WokerID"
,
fields: {
WokerID: { editable:
false
, nullable:
true
},
FirstName: { type:
"string"
},
LastName: { type:
"string"
},
UserID: { type:
"number"
},
UserName: { type:
"string"
}
}
},
data:
function
(data) {
return
data;
},
total:
function
(data) {
if
(data != undefined) {
if
(data.length > 0) {
return
data[0].Total; }
return
data.length;
}
}
},
batch:
true
,
pageSize: 10,
serverPaging:
true
,
serverFiltering:
true
,
serverSorting:
true
});
gridContainer.kendoGrid({
dataSource: dataSource,
toolbar: [
"create"
,
"save"
,
"cancel"
],
editable:
true
,
saveChanges:
function
(e) {
if
(!confirm(
"Are you sure you want to save all changes?"
)) {
e.preventDefault();
}
else
{
this
.dataSource.read();
}
},
pageable:
true
,
change:
function
(e) {
var
selectedRow =
this
.select();
contentItem.screen.WorkerID = parseInt(selectedRow[0].cells[0].innerHTML);
},
columns: [{
field:
"FirstName"
,
title:
"First Name"
}, {
field:
"LastName"
,
title:
"Last Name"
}, {
field:
"UserID"
,
title:
"User"
,
filterable: {
extra:
false
,
ui: userFilter
},
editor: userDropDownEditor
}, {
command: [
"destroy"
], title:
" "
, width: 150
}]
});
function
userFilter(element) {
element.kendoDropDownList({
dataSource: {
transport: {
read:
"../api/Users/"
}
}
});
}
function
userDropDownEditor(container, options) {
$(
'<input id=cmbUsers required data-text-field="UserName" data-value-field="ID" data-bind="value:'
+ options.field +
'"/>'
)
.appendTo(container)
.kendoComboBox({
autoBind:
false
,
dataSource: {
transport: {
read:
"../api/Users?uid=1"
}
}
});
}