List dynamic editor

You can dynamically output a dropdown list from a single column rather than a lookupTree structure.

Apply listCallback

You can use it dynamically by directly filling in the values corresponding to the value and label in the editor.listCallback function, or return it as a value retrieved from the DB to dynamically display the desired list values. In templateCallback, you can process and output images or value to be displayed on the screen directly using information obtained from listCallback.

Since lookupDisplay is not applied to listCallback, the selected value is displayed by default. If you need a dynamic list and lookup, you should use the lookupTree function.

var columns = [{
    name: "Country",
    fieldName: "Country",
    width: "150",
    editButtonVisibility: "always",
    editor:{
        type: "list",
        listCallback: function(grid, index) {
          return {
            value: "value", // Same form as column.listData. The value and label attributes can be omitted.
            label: "label",  // 
            list: [ {value: "Korea", label: "한국", flag: "KR", country: "Korea", currency: "KRW"},
                    {value: "USA", label: "미국", flag: "US", country: "USA", currency: "USD"},
                    {value: "Brazil", label: "브라질", flag: "BR", country: "Brazil", currency: "BRL"},
                    {value: "Argentina", label: "아르헨티나", flag: "AR", country: "Argentina", currency: "ARS"},
                    {value: "China", label: "중국", flag: "CN", country: "China", currency: "CNY"},
                    {value: "Japan", label: "일본", flag: "JP", country: "Japan", currency: "JPY"}
            ]
          }
        },
        templateCallback: function(grid, index, div, value, label, item) {
            div.innerHTML = `<span style='width:100px'>value: ${value}</span>
                             <span style='width:100px'>, label: ${label}</span>`
        }
      },
    header: {
        text: "나라",
    }
  }
  ...
]
 
//value change event
gridView.onGetEditValue = (grid,index,result)=>{
    if (index.column === "Country" && result["item"]) {
        grid.setValue(index.itemIndex, "Currency", result["item"].currency);
        grid.setValue(index.itemIndex, "CountryCode", result["item"].flag);
    }
  }

Apply labelField

In order to display on the grid the value corresponding to the label rather than the value, you must apply the labelField function and set the value in labelField.

//Column settings, label field application
var columns = [{
    name: "Country",
    fieldName: "Country",
    width: "150",
    lookupDisplay: true,
    labelField: "labelField",
    editButtonVisibility: "always",
    editor:{
        type: "list",
        listCallback: function(grid, index) {
          return {
            value: "value", // Same form as column.listData. The value and label attributes can be omitted.
            label: "label",  // 
            list: [ {value: "Korea", label: "한국", flag: "KR", country: "Korea", currency: "KRW"},
                    {value: "USA", label: "미국", flag: "US", country: "USA", currency: "USD"},
                    {value: "Brazil", label: "브라질", flag: "BR", country: "Brazil", currency: "BRL"},
                    {value: "Argentina", label: "아르헨티나", flag: "AR", country: "Argentina", currency: "ARS"},
                    {value: "China", label: "중국", flag: "CN", country: "China", currency: "CNY"},
                    {value: "Japan", label: "일본", flag: "JP", country: "Japan", currency: "JPY"}
            ]
          }
        },
        templateCallback: function(grid, index, div, value, label, item) {
            div.innerHTML = `<span style='width:100px'>value: ${value}</span>
                             <span style='width:100px'>, label: ${label}</span>`
        }
      },
    header: {
        text: "나라",
    }
  },
  ...
]
 
//Apply label field value when changing value
gridView.onGetEditValue = (grid,index,result)=>{
    if (index.column === "Country" && result["item"]) {
        grid.setValue(index.itemIndex, "Currency", result["item"].currency);
        grid.setValue(index.itemIndex, "CountryCode", result["item"].flag);
        grid.setValue(index.itemIndex, "labelField", result["item"].label);
    }
}
 
//Filling in label field values when querying
dataProvider.setRows([
    {Country: "Korea", Currency: "KRW", CountryCode: "KR", labelField: "한국"},
    {Country: "USA", Currency: "USD", CountryCode: "US", labelField: "미국"},
    {Country: "Brazil", Currency: "BRL", CountryCode: "BR", labelField: "브라질"},
    {Country: "Argentina", Currency: "ARS", CountryCode: "AR", labelField: "아르헨티나"},
    {Country: "Korea", Currency: "KRW", CountryCode: "KR", labelField: "한국"},
    {Country: "USA", Currency: "USD", CountryCode: "US", labelField: "미국"},
    {Country: "Brazil", Currency: "BRL", CountryCode: "BR", labelField: "브라질"},
    {Country: "Argentina", Currency: "ARS", CountryCode: "AR", labelField: "아르헨티나"}
  ])

List setting through asynchronous processing

Using listCallback allows you to dynamically populate the list with desired data through asynchronous processing.
This is particularly useful when you need to fetch data from the server to generate the list dynamically.

var columns = [
  {
      name: "Menu",
      fieldName: "Menu",
      width: "150",
      lookupDisplay: true,
      labelField: "MenuLabelField", // 라벨 필드를 통해 value 값이 아닌 label 값이 화면에 보여질 수 있도록 연결
      editButtonVisibility: "always",
      editor: {
          type: "list",
          listCallback: async (grid, index) => {
              const category = grid.getValue(index.itemIndex, 'Category');
              const categoryIndex = getCategoryIndex(category);
              return await getLists(categoryIndex, grid);
          },
      },
      header: {
          text: "메뉴",
      },
  },
  ...
];
 
function getCategoryIndex(category) {
  const categories = ["한식", "중식", "일식", "양식", "디저트", "패스트푸드"];
  return categories.indexOf(category) + 1;
}
 
async function getLists(categoryIndex, grid) {www
  return new Promise((resolve, reject) => {
      grid.showLoading(true);
      const url = `list${categoryIndex}.json`
      $.ajax({
          url: url,
          type: "GET",
          dataType: "json",
          success: function (data) {
              setTimeout(() => {
                  grid.closeLoading();
                  resolve({
                      value: "value",
                      label: "label",
                      list: data,
                  });
              }, 500);
          },
          error: function (xhr, status, error) {
              grid.closeLoading();
              reject(error);
          },
      });
  });
}

Input limit editor Header height