LookupTree

Instead of the actual value of the data field associated with the column, the cell displays a different value associated with that value. This is usually used when the dropDown list of the own column changes depending on the value of the parent column.

LookupTree settings

Register lookup sources to be used in the lookup tree using the setLookups or addLookupSource function. You must set the ID of the registered lookup source, area2code, area3code, in the lookupSourceId property of the column, and set the list of fields to be used as reference key values in lookupKeyFields.

/*
gridView.setLookups([{
     id: "area2code",
     levels: 2,
     keys: [
         ["11", "11010"], //"Jongno-gu"
         ["21", "21110"], //"Geumjeong-gu"
         ...
     ],
     //Display keys as matching values
     values: [
         “Jongno-gu”,
         "Geumjeong-gu",
         ...
     ]
}]);
*/
 
//If it is difficult to retrieve the value in the annotation form above, retrieve and process the data as follows
var area1codes = {id:"area1codeId", levels:1, keys: [], values: []};
var area2codes = {id:"area2codeId", levels:2, tags: [], keys: [], values: []};
var area3codes = {id:"area3codeId", levels:3, tags: [], keys: [], values: []};
 
//Data sample configuration
var areacodes = [
   {"area1code":"11","area1name":"Seoul","area2code":"11010","area2name":"Jongno-gu","area3code":"1101053","area3name":"Sajik-dong"} ,
   {"area1code":"11","area1name":"Seoul","area2code":"11010","area2name":"Jongno-gu","area3code":"1101054","area3name":"Samcheong-dong"} ,
   {"area1code":"11","area1name":"Seoul","area2code":"11010","area2name":"Jongno-gu","area3code":"1101055","area3name":"Buam-dong"} ,
   ...
];
 
//lookupTree population settings
for (var i = 0, cnt = areacodes.length; i < cnt ; i++) {
     var codes = areacodes[i];
     if (area1codes.keys.indexOf(codes.area1code) < 0) {
         area1codes.keys.push(codes.area1code);
         area1codes.values.push(codes.area1name);
     }
     if (area2codes.tags.indexOf(codes.area2code) < 0) {
         area2codes.tags.push(codes.area2code);
         area2codes.keys.push([codes.area1code, codes.area2code]);
         area2codes.values.push(codes.area2name);
     }
     if (area3codes.tags.indexOf(codes.area3code) < 0) {
         area3codes.tags.push(codes.area3code);
         area3codes.keys.push([codes.area1code, codes.area2code, codes.area3code]);
         area3codes.values.push(codes.area3name);
     }
}
 
gridView.addLookupSource(area2codes);
gridView.addLookupSource(area3codes);
 
//Column settings
{
     name:"area1lookup",
     fieldName:"area1code",
     header:{
         text:"City Province"
     },
     width:200,
     sortByLabel:true;
     lookupDisplay:true;
     values:area1codes.keys,
     labels:area1codes.values,
     editor:{
         type:"dropdown"
     }
},
{
     name:"area2lookup",
     fieldName:"area2code",
     header:{
         text:"City County District"
     },
     lookupDisplay:true;
     lookupSourceId:"area2codeId",
     lookupKeyFields:["area1code","area2code"],//Reference key field values
     editor:{
         type:"dropdown"
     }
},
{
     name:"area3lookup",
     fieldName:"area3code",
     header:{
         text:"Eup, Myeon, Dong"
     },
     lookupDisplay:true;
     lookupSourceId:"area3codeId",
     lookupKeyFields:["area1code","area2code","area3code"],//Reference key field values
     editor:{
         type:"dropdown"
     }
}

Setting LookupTree using setLookups

//lookup settings
function setLookups(grid) {
     grid.setLookups([{
         id: "type1",
         levels: 2,
         //list all cases
         keys: [
             ["O", "O1"],
             ["O", "O2"]
             ["O", "O3"],
             ["M", "M1"],
             ["M", "M2"],
             ["M", "M3"],
         ],
         //Set display value according to number of cases
         values: [
             ["3-minute curry"], //["O", "O1"]
             ["Tuna"], //["O", "O2"]
             ["Bulgogi Pizza"], //["O", "O3"]
             ["Milk"], //["M", "M1"],
             ["Bio Strawberry"], //["M", "M2"]
             ["Top and Bottom Cheese"] //["M", "M3"]
         ]
     }]);
}
 
//Column settings
var columns = [{
     name: "column1",
     fieldName: "field1",
     width: 150,
     header: {
         text: "Manufacturer"
     },
     styles: {
         textAlignment: "center"
     },
     lookupDisplay: true;
     //In case of step 1, immediately set values and labels
     values: ["O","M"],
     labels: ["Ottogi","Maeil Dairies"],
     editor:{
       type: "dropdown"
     }
}, {
     name: "column2",
     fieldName: "field2",
     width: 150,
     header: {
         text: "Product Name"
     },
     styles: {
         textAlignment: "center"
     },
     editor:{
         type:"dropdown"
     },
     lookupDisplay: true;
     //Specify the id set in setLookups above
     lookupSourceId: "type1",
     lookupKeyFields: [
         "field1",
         "field2"
     ]
}];

tooltip changing screen display values