Using Different Cell Editors per Row in the Same FlexGrid Column in JavaScript

Background:

FlexGrid does not natively support having multiple different editors for individual cells within the same column. However, you can achieve this behavior by dynamically swapping out the column’s editor in response to user interaction. This allows you to display a textbox, dropdown, color picker, or even a checkbox in the same column, depending on the data in other columns of the row.

Steps to Complete:

1. Configure your grid's columns and editors.
2. Use formatItem to customize the cell's UI based on row data.
3. Use beginningEdit to dynamically assign the correct editor for the cell.
4. Use cellEditEnded to update the underlying data after edits.

Getting Started:

Configure your grid's columns and editors

First, create the different editors your column might need, such as ComboBoxes, InputColor, or a simple text editor. Then, configure your FlexGrid with the target column (in this example, "value") set to one of these editors by default.

let countryEditor = new wjInput.ComboBox(document.createElement('div'), {
  itemsSource: getCountries(),
  displayMemberPath: 'name',
  selectedValuePath: 'name',
});
let cityEditor = new wjInput.ComboBox(document.createElement('div'), {
  itemsSource: getCities2(),
  displayMemberPath: 'codeName',
  selectedValuePath: 'codeName',
});
let textEditor = new wjInput.ComboBox(document.createElement('div'));
let colorEditor = new wjInput.InputColor(document.createElement('div'));

let grid = new Grid.FlexGrid('#grid', {
  autoGenerateColumns: false,
  columns: [
    { binding: 'id', header: 'Id', align: 'center' },
    { binding: 'category', header: 'Category', editor: categoryEditor, width: 120, isRequired: true },
    { binding: 'value', header: 'Value', width: 180, editor: colorEditor },
  ],
  itemsSource: view,
});

use formatItem to customize cell content

The formatItem event lets you change a cell’s appearance before it’s displayed.

grid.formatItem.addHandler((s, e) => {
  if (e.panel == s.cells) {
    let col = e.getColumn();
    if (col.binding == 'value') {
      let item = e.getRow().dataItem;
      if (item && item.category == 'Text') {
        let btn = e.cell.querySelector('.wj-btn');
        if (btn) btn.remove();
      } else if (item.category == 'Checkbox') {
        let chkbx = document.createElement('input');
        chkbx.type = 'checkbox';
        chkbx.checked = item.checkbox;
        chkbx.addEventListener('change', () => {
          item.checkbox = chkbx.checked;
          s.collectionView.refresh();
        });
        e.cell.innerHTML = '<span style="width: 100%; text-align: center; display: inline-block"></span>';
        e.cell.firstChild.appendChild(chkbx);
      }
    }
  }
});

Use beginningEdit to assign the correct editor

Before editing starts, decide which editor should be used based on the row’s category.
For checkboxes, cancel the edit so the inline control remains clickable without switching to an input.

grid.beginningEdit.addHandler((s, e) => {
  let column = e.getColumn();
  if (column.binding == 'value') {
    let item = e.getRow().dataItem;
    if (item) {
      switch (item.category) {
        case 'Country':
          column.editor = countryEditor;
          break;
        case 'City':
          column.editor = cityEditor;
          break;
        case 'Color':
          column.editor = colorEditor;
          break;
        case 'Text':
          column.editor = textEditor;
          break;
        case 'Checkbox':
          e.cancel = true;
          return;
      }
    }
  }
});

Use cellEditEnded to update the data

After editing is complete, copy the value from the active editor back into the appropriate field in your data model.

grid.cellEditEnded.addHandler((s, e) => {
  let column = e.getColumn();
  if (column.binding == 'value') {
    let item = e.getRow().dataItem;
    if (item) {
      let value = item.category == 'Color'
        ? column.editor.value
        : column.editor.selectedValue;
      switch (item.category) {
        case 'Country':
          item.country = value;
          break;
        case 'City':
          item.city = value;
          break;
        case 'Color':
          item.color = value;
          break;
        case 'Text':
          item.text = value;
          break;
      }
    }
  }
});

With this setup, the "value" column will display and edit its content differently depending on the selected category in the same row. Users can switch between text, dropdowns, color pickers, and checkboxes seamlessly, even after changing other cell values in the row.

You can see an sample application showcasing this here.

Happy coding!