This is a migrated thread and some comments may be shown as answers.

Lookup Field in Grid's Popup

4 Answers 866 Views

DropDownList

This is a migrated thread and some comments may be shown as answers.

Terence asked on 12 Aug 2015, 08:07 AM

popup.jpg

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

Lookup Field in Grid's Popup

4 Answers, 1 is accepted