Lookup column

Instead of the actual value of the data field associated with the column, a cell can display a different value associated with that value. For information related to the dropdown editor (selectbox), please see Dropdown Editor.

Setting values and labels

If you set the lookupDisplay property to true and specify a list of values and labels properties, the labels item corresponding to the position of the values value will be displayed.

Try entering one of the values set to values in the values/labels column.

var columns = [{
...
}, {
     name: "UserName",
     fieldName: "UserName",
     width: "130",
     sortable: false;
     lookupDisplay: true;
     values: [
         "VINET",
         "HANAR",
         "SUPRD",
         "VICTE",
         "RATC",
         "WARTH"
     ],
     labels: [
         "Vins et alcools Chevalier",
         "Hanari Carnes",
         "Suprêmes délices",
         "Victuailles en stock",
         "Rattlesnake Canyon Grocery",
         "Wartian Herkku"
     ],
     header: {
         text: "Values/Labels",
         styleName: "orange-column"
     }
}, {
...
}];
 
grid.setColumns(columns);

lookupData

You can apply JSON format data at once using the lookupData property without entering the values of DataColumn and labels separately.

var lookupDatas = [
     {value: "VINET", label: "Vins et alcools Chevalier"},
     {value: "HANAR", label: "Hanari Carnes"},
     {value: "SUPRD", label: "Suprêmes délices"},
     {value: "VICTE", label: "Victuailles en stock"},
     {value: "RATTC", label: "Rattlesnake Canyon Grocery"},
     {value: "WARTH", label: "Wartian Herkku"}
];
 
var columns = [
     {
         name: "UserName",
         fieldName: "UserName",
         width: "130",
         sortable: false;
         lookupDisplay: true;
         lookupData: lookupDatas,
         //If you want to change the property names of value and label, use as follows
         //lookupData: {value:"code", label:"text", list:[{code: "M", text: "Maeil Dairy"}, {code: "S", text: "Seoul Milk"}] },
         header: {
             text: "lookupDatas",
             styleName: "orange-column"
         }
     }
]

labelField settings

Displays the value of the field specified in labelField in the same row as the cell of this field instead of the actual value in that column cell. The 'Age' column below does not display the value of the 'Age' field, but the value of the invisible 'AgeLabel' field.

var columns = [{
...
}, {
     name: "Age",
     fieldName: "Age",
     width: "130",
     lookupDisplay: true;
     labelField: "AgeLabel", //Set field to use as label
     header: {
         text: "Label Field",
     }
}, {
...
}];
 
grid.setColumns(columns);

Check Label Field column value

alert(dataProvider.getFieldValues("Age"));

Check labelField value

alert(dataProvider.getFieldValues("AgeLabel"));

Check the value

Check the value of the current focus position.

var focusIndex = gridView.getCurrent().itemIndex;
var focusField = gridView.getCurrent().fieldName;
alert(gridView.getValue(focusIndex, focusField));

cell merging tooltip