
# 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.

```js
const area1codes = {id:"area1codeId", levels:1, keys: [], values: []};
const area2codes = {id:"area2codeId", levels:2, tags: [], keys: [], values: []};
const area3codes = {id:"area3codeId", levels:3, tags: [], keys: [], values: []};

const fields = [
  {fieldName:"area1code", dataType:"text"},
  {fieldName:"area2code", dataType:"text"},
  {fieldName:"area3code", dataType:"text"}
];

const columns = [
  {
    name:"area1lookup", 
    fieldName:"area1code", 
    header:{
      text:"Province"
    }, 
    width:200,
    sortByLabel:true, 
    lookupDisplay:true, 
    values:area1codes.keys, 
    labels:area1codes.values,
    editor:{
      type:"dropdown"
    }
  },
  {
    name:"area2lookup", 
    fieldName:"area2code", 
    header:{
      text:"City/District"
    }, 
    width:200,
    lookupDisplay:true, 
    lookupSourceId:"area2codeId", 
    lookupKeyFields:["area1code","area2code"],
    editor:{
      type:"dropdown"
    }
  },
  {
    name:"area3lookup", 
    fieldName:"area3code", 
    header:{
      text:"Town/Village"
    }, 
    width:200,
    lookupDisplay:true, 
    lookupSourceId:"area3codeId", 
    lookupKeyFields:["area1code","area2code","area3code"],
    editor:{
      type:"dropdown"
    }
  }
];

function makeLookupSource(areacodes) {
  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);
    }
  }
}

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/areacodes.js')
      .then(response => response.text())
      .then(text => {
        eval(text);
        const areacodes = window.areacodes;
        
        makeLookupSource(areacodes);
        
        grid.addLookupSource(area2codes);
        grid.addLookupSource(area3codes);
        
        const sampleData = [];
        for (let i = 0; i < 20; i++) {
          const idx = Math.floor(Math.random() * areacodes.length);
          sampleData.push([
            areacodes[idx].area1code,
            areacodes[idx].area2code,
            areacodes[idx].area3code
          ]);
        }
        grid.getDataSource().setRows(sampleData);
      });
    
    grid.onEditCommit = function (grid, index, oldValue, newValue) {
      if (index.fieldName === "area1code") {
        if (oldValue !== newValue) {
          grid.setValue(index.itemIndex, "area2code", "");
          grid.setValue(index.itemIndex, "area3code", "");
        }
      } else if (index.fieldName === "area2code") {
        if (oldValue !== newValue) {
          grid.setValue(index.itemIndex, "area3code", "");
        }
      }
    };
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

#### LookupTree settings

Register lookup sources to be used in the lookup tree using the [setLookups](/refs/Class/GridBase#setlookups) or [addLookupSource](/refs/Class/GridBase#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.

```js
/*
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

```js
const fields = [{
  fieldName: "field1"
}, {
  fieldName: "field2"
}];

const columns = [{
  name: "column1",
  fieldName: "field1",
  width: 150,
  header: {
    text: "Manufacturer"
  },
  styles: {
    textAlignment: "center"
  },
  lookupDisplay: true,
  values: ["O","M"],
  labels: ["Ottogi","Maeil Dairy"],
  editor:{
    type: "dropdown"
  }
}, {
  name: "column2",
  fieldName: "field2",
  width: 150,
  header: {
    text: "Product Name"
  },
  styles: {
    textAlignment: "center"
  },
  editor:{
    type:"dropdown"
  },
  lookupDisplay: true,
  lookupSourceId: "type1",
  lookupKeyFields: [
    "field1",
    "field2"
  ]
}];

function setLookups(grid) {
  grid.setLookups([{
    id: "type1",
    levels: 2,
    keys: [
      ["O", "O1"],
      ["O", "O2"],
      ["O", "O3"],
      ["M", "M1"],
      ["M", "M2"],
      ["M", "M3"],
    ],
    values: [
      ["3-Minute Curry"],
      ["Tuna"],
      ["Bulgogi Pizza"],
      ["Milk"],
      ["Bio Strawberry"],
      ["Sangha Cheese"]
    ]
  }]);
}

const rows = [
  ["O", "O1"],
  ["M", "M1"],
  ["O", "O2"],
  ["O", "O3"],
  ["M", "M2"],
  ["M", "M3"],
  ["O", "O3"]
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    setLookups(grid);
    
    grid.getDataSource().setRows(rows);
    
    grid.onCellEdited = function (grid, itemIndex, dataRow, field) {
      var fieldName = dataProvider.getOrgFieldName(field);
      
      if (fieldName == "field1") {
        grid.setValue(itemIndex, "field2", "");
      }
    };
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
//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"
     ]
}];
```