Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Lookup Field in Grid's Popup

4 Answers 650 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Terence
Top achievements
Rank 1
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>
</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

4 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 14 Aug 2015, 07:54 AM

Hello Terence,

 

The issue in your case is that the data collection used in the editor template is not visible in the scope of the editor function as it is defined in other function scope. I've updated example to address this.

 

http://dojo.telerik.com/@rusev/udImE

 

Regards,
Nikolay Rusev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Terence
Top achievements
Rank 1
answered on 17 Aug 2015, 09:17 AM

Thanks.

I would like to further know the MultiSelect cascade from DropDownList. Is it possible to do so? Assume that I will use JSON for MultiSelect.

 Please advise.

 

0
Terence
Top achievements
Rank 1
answered on 17 Aug 2015, 09:21 AM

What I mean MultiSelect cascading from DropDownList is

 

Suppose a user clicks Level and choose Undergraduate, the ProgramCode MultiSelect will display Undergraduate Program Code. If a user clicks Diploma Level, the ProgramCode MultiSelect will display Diploma Level Program Code

0
Boyan Dimitrov
Telerik team
answered on 19 Aug 2015, 06:28 AM

Hello Terence,

 

In order to achieve such functionality I would recommend to use the DropDownList select event and either change the data of the MultiSelect DataSource or set a new one DataSource using the setDataSource method of the MultiSelect API. 

 

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
DropDownList
Asked by
Terence
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Terence
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or