Add custom style classes when the IgxRow is focused

[ddincheva]

Description

The grid should gives visual indication that the row element is focused /or a cell from the particular row is active/. Currently the style is applied only over the active cell. Also the grid should provide a property which allows the user to set a custom style classed, based on row focused property.

Additional context

Currently to achieve similar to this behavior we use row selection feature like in this sample.

[zdrawku]

Now that we have the Cell style capabilities we are able to define such behavior with ease. We now have access to the actual Grid cell and row that can help us achieve different requirements like adding a custom color when a row is focused. This sample shows how.

public focusStyles = {
        background: (rowData, col, cellValue, rowIndex) => { 
          debugger;
          if (this.grid1.getRowByIndex(rowIndex).focused) {
            return 'lightyellow'
          } else {
            return rowIndex % 2 === 0 ? "white" : "lightgray";
          }
        },
        animation: "0.75s popin"
    };

Currently, the style will be applied only over the cell elements as we are using the cellStyles property. It accepts an object literal where the keys are the style properties and the value is the expression to be evaluated.