I am developing a Grid form with Popup editing function. There is a Lookup field called Level. A LevelCode will be searched for the corresponding LevelName.
The following is an example.
<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.rtl.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.1.429/styles/kendo.dataviz.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.1.429/styles/kendo.dataviz.default.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.mobile.all.min.css"
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"
></
script
>
<
script
src
=
"http://code.jquery.com/jquery-1.9.1.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.2.805/js/jszip.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
<
div
id
=
"MainSection"
>
<
div
id
=
"recGrid"
></
div
>
</
div
>
<
script
>
$(document).ready(function () {
var demoData =
[{"TaskID":1,"UserGroup":"UG","RuleName":"UG 2015","Level":{"LevelCode":"UG","LevelName":"Undergraduate"},"CatalogTerm":"201509,201601","StudentType":"1,2","IDType":"HKID","IDNum":"1,2,3,4,5","AdmitTerm":"201409","ProgramCode":"","IlpInd":"","RuleComment":"This is a rule for UG 201509 student"},{"TaskID":2,"UserGroup":"UG","RuleName":"UG 2014","Level":{"LevelCode":"GR","LevelName":"Taught Postgraduate"},"CatalogTerm":"","StudentType":"","IDType":"SID","IDNum":"1,3,5,7,9","AdmitTerm":"","ProgramCode":"","IlpInd":"","RuleComment":"This is a rule which uses Student ID for checking"},{"TaskID":3,"UserGroup":"UG","RuleName":"ILP","Level":{"LevelCode":"DL","LevelName":"Diploma Level"},"CatalogTerm":"","StudentType":"1,3,4","IDType":"","IDNum":"","AdmitTerm":"","ProgramCode":"","IlpInd":"EAF","RuleComment":"This is a rule for ILP"}];
var levelData = [{"LevelCode":"AD","LevelName":"Associate Degree"},{"LevelCode":"DL","LevelName":"Diploma Level"},{"LevelCode":"FD","LevelName":"Pre-Associate Degree"},{"LevelCode":"HD","LevelName":"Higher Diploma Level"},{"LevelCode":"VD","LevelName":"Advanced Diploma"},{"LevelCode":"UG","LevelName":"Undergraduate"},{"LevelCode":"GR","LevelName":"Taught Postgraduate"}];
dataSource = new kendo.data.DataSource({
data: demoData,
batch: true,
pageSize: 20,
schema: {
model: {
id: "RuleTableID",
fields: {
TaskId: { from: "TaskID", type: "number" },
RuleName: { from: "RuleName", validation: { required: true } },
Level: { from: "Level", validation: { required: true }, defaultValue: { LevelCode: "UG", LevelName: "Undergraduate"} },
CatalogTerm: { from: "CatalogTerm" },
StudentType: { from: "StudentType" },
IDType: { from: "IDType" },
IDNum: { from: "IDNum" },
ProgramCode: { from: "ProgramCode" },
MajorCode: { from: "MajorCode" },
RuleComment: { from: "RuleComment" }
}
}
}
});
$("#recGrid").kendoGrid({
dataSource: dataSource,
pageable: true,
toolbar: ["create", "excel"],
height: 480,
groupable: true,
sortable: true,
selectable: "multiple",
reorderable: true,
resizable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "RuleName", title: "Rule Name", width: "120px" },
{ field: "Level", title: "Level", editor: levelDropDownEditor, template: "#=Level.LevelName#" },
{ field: "CatalogTerm", title: "Catalog Term" },
{ field: "StudentType", title: "Student Type" },
{ field: "IDType", title: "HKID/Student ID", editor: idTypeEditor },
{ field: "IDNum", title: "Last ID Digit" },
{ field: "AdmitTerm", title: "Admit Term" },
{ field: "ProgramCode", title: "Program Code" },
{ field: "MajorCode", title: "Major Code" },
{ field: "IlpInd", title: "Exclude ABS & Fulfilled" },
{ field: "RuleComment", title: "Comment", width: "200px" },
{ command: ["edit", "destroy"], title: " ", width: "200px" }],
editable: "popup",
cancel: function(e) {
e.sender.refresh();
e.preventDefault()
}
});
});
function idTypeEditor(container, options) {
var str = '<
input
type
=
"radio"
name
=
"idType"
id
=
"idType_HKID"
class
=
"k-radio"
>';
str = str + '<
label
class
=
"k-radio-label"
for
=
"idType_HKID"
>HKID</
label
>' ;
str = str + '<
input
type
=
"radio"
name
=
"idType"
id
=
"idType_SID"
class
=
"k-radio"
>';
str = str + '<
label
class
=
"k-radio-label"
for
=
"idType_SID"
>Student ID</
label
>';
$(str).appendTo(container);
}
function levelDropDownEditor(container, options) {
$('<
input
required
data-text-field
=
"LevelName"
data-value-field
=
"LevelCode"
data-bind
=
"value:' + options.field + '"
/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: levelData
});
}
</
script
>
</
body
>
</
html
>
​
The Grid form was able to display the LevelName.
However, when I click Edit button, there is a Javascript error.
If I remove the following from kendoGrid, the Popup form can be shown while the Level field will display [object Object].
editor: levelDropDownEditor,
Please see the captured screen dump.
Please advise.
Regards
Terence