Lookup Field in Grid's Popup

5 posts, 0 answers
  1. Terence
    Terence avatar
    10 posts
    Member since:
    Feb 2015

    Posted 12 Aug 2015 Link to this post

     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

  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 14 Aug 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Terence
    Terence avatar
    10 posts
    Member since:
    Feb 2015

    Posted 17 Aug 2015 Link to this post

    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.

     

  5. Terence
    Terence avatar
    10 posts
    Member since:
    Feb 2015

    Posted 17 Aug 2015 Link to this post

    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

  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 19 Aug 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready