Using Different Cell Editors Per Row in the Same FlexGrid Column in Angular

Background:

Sometimes you want a single column in a FlexGrid to use different editors depending on which row is being edited. For example, one row might require a text editor, another might need a combo box, and yet another might use a checkbox. You can accomplish this in FlexGrid by handling the prepareCellForEdit event and dynamically swapping the default cell editor for whatever editor suits the current row.

Steps to Complete:

1. Handle the prepareCellForEdit event to check the row being edited.
2. Based on the row’s data or index, replace or override the default editor with a custom editor (e.g., ComboBox, Checkbox).
3. Ensure the selected editor value is written back to the cell on completion.

Getting Started:

Create a FlexGrid with Data

<!-- app.component.html -->
<wj-flex-grid
  #flex
  [itemsSource]="data"
  [autoGenerateColumns]="false"
  (prepareCellForEdit)="onPrepareCellForEdit($event)">
  <wj-flex-grid-column header="Type" binding="type" width="120"></wj-flex-grid-column>
  <wj-flex-grid-column header="Value" binding="value" width="*"></wj-flex-grid-column>
</wj-flex-grid>

// app.component.ts
import { Component, ViewChild } from '@angular/core';
import * as wjcGrid from '@mescius/wijmo.grid';
import * as wjcInput from '@mescius/wijmo.input';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  @ViewChild('flex', { static: true }) flex: wjcGrid.FlexGrid;

  data = [
    { type: 'text',  value: 'Alpha' },
    { type: 'boolean', value: true },
    { type: 'options', value: 'Option1' },
    { type: 'text',  value: 'Omega' }
  ];
}

Handle the prepareCellForEdit event to check the row being edited

In the prepareCellForEdit handler, we inspect the row’s data and replace the default editor with a custom control depending on the value of the type field. For example:

• If type === 'text', leave the default text editor.
• If type === 'boolean', use a checkbox.
• If type === 'options', use a ComboBox with a set of options.

// app.component.ts (continued)
onPrepareCellForEdit(e: wjcGrid.CellRangeEventArgs) {
  const grid = this.flex;
  const col = grid.columns[e.col];
  const rowData = grid.rows[e.row].dataItem;

  // Only intervene for the "value" column
  if (col.binding === 'value') {

    // Remove the default editor (if any)
    if (grid.activeEditor) {
      grid.activeEditor.dispose();
    }

    ...

• We only override the editor for the value column (col.binding === 'value').
• We assign the custom control to grid.activeEditor so FlexGrid consistently treats it as the current editor.

Based on the row’s data or index, replace or override the default editor with a custom editor (e.g., ComboBox, Checkbox)

...

// Determine which editor to create based on row "type"
    switch (rowData.type) {

      case 'boolean':
        // Create a checkbox
        const chk = new wjcInput.CheckBox(grid.hostElement);
        chk.checked = rowData.value;
        chk.checkedChanged.addHandler(() => {
          rowData.value = chk.checked;
        });
        grid.activeEditor = chk;
        break;

      case 'options':
        // Create a combo box with predefined options
        const cbo = new wjcInput.ComboBox(grid.hostElement, {
          itemsSource: ['Option1', 'Option2', 'Option3'],
          text: rowData.value
        });
        cbo.textChanged.addHandler(() => {
          rowData.value = cbo.text;
        });
        grid.activeEditor = cbo;
        break;

      default:
        // Default text editor
        const input = document.createElement('input');
        input.type = 'text';
        input.value = rowData.value;
        input.style.width = '100%';

        input.addEventListener('change', () => {
          rowData.value = input.value;
        });

        grid.activeEditor = {
          hostElement: input,
          dispose: () => { /* no-op */ }
        };

       ...

• Based on rowData.type, we dynamically create and assign a different editor.
• For each control, we wire up change events so modifications update the underlying data item.

Ensure the selected editor value is written back to the cell on completion

... 

// Replace the grid’s cell content with our input
        e.panel.setCellData(e.row, e.col, input.value, true);
        e.panel.children[e.row][e.col].appendChild(input);
        break;
    }
  }
}

With this Angular setup:

• A single “Value” column adapts its editor dynamically based on each row’s type.
• Users see checkboxes, combo boxes, or text inputs as appropriate.
• The underlying row data updates immediately as edits occur.
• You maintain a consistent grid layout with context-specific editing experiences per row.

Happy coding!