Igx-Grid Highlight Editable field

[kevalgw]

Hi,

In my data grid there are 4 editable columns, but as I toggle edit mode only the first editable cell of the row is highlighted. I want to highlight all 4 editable cells.

Please provide me a solution.
For better understanding check the snapshot attached below

Normal mode:

Edit Icon click:

[ddaribo]

Hi @kevalgw,

I believe you will find the Grid Conditional Cell Styling topic in our documentation very helpful on the matter. There you will find examples on how to apply conditional CSS classes or styles, based on some properties of the cells’ data, column, etc.

For your convenience, I have prepared this sample demonstrating how all the editable cells of a row that has a cell in edit mode are also “highlighted” with a border. The condition in this case is the following:

  private editableCellInEditModeCondition = (
    rowData: any,
    columnKey: any
  ): boolean => {
    let rowID = rowData[this.grid.primaryKey];

    let rowHasCellsInEditMode =
      this.grid.getRowByKey(rowID).cells.find((c) => c.editMode === true) !==
      undefined;
    return (
      rowHasCellsInEditMode && this.grid.getColumnByName(columnKey).editable
    );
  };
  public editableCellsClasses = {
    editableCell: this.editableCellInEditModeCondition,
  };

It can be set on only the editable columns, or on the others as well (the this.grid.getColumnByName(columnKey).editable condition will prevent cells in non-editable columns from getting highlighted):

<igx-column
      field="UnitPrice"
      header="Unit Price"
      [dataType]="'string'"
      [editable]="true"
      [cellClasses]="editableCellsClasses"
    ></igx-column>

Regarding the CSS style itself, please, feel free to specify a look as per your own requirements. Nevertheless, as you will see in the grid-editing-excel-style.component.scss file in the sample, there is a currently commented-out line that omits the “focused-border-color” of the input editor, just to demonstrate that this is possible. Additionally, the box-shadow of the edited cell is set to 'none' to override the default look. The purpose of this is to have an uniform border for the editable cells. Of course, feel free to modify this as per your preferences. Please, refer to the Styling section of the Grid Cell Editing topic for more details and examples on cell styling.

Finally, an important aspect of this solution is to refresh the applied cell classes on each cell edit enter and exit. This can be achieved by handling the cellEditEnter and cellEditExit events and executing the following to “refresh” the cell classes object:

  public recalculateCellStyles(event) {
    this.editableCellsClasses = { ...this.editableCellsClasses };
  }

I hope these suggestions help.

[kevalgw]

Hi @ddaribo ,

This solution worked for me. Thanks for the support