Styling Cell Ranges

While FlexGrid supports styling cells using the custom CSS classes or attributes using the formatItem event, it also allows to set different styles on a large number of rows and style cells in any range using the ‘wijmo.grid.style’ module. This module is a lightweight extension which does not require writing multiple lines of code to style a cell or cell ranges. It provides the FlexGridStyle class which contains methods to specify the style to be applied on the cell ranges and the gridpanel to which the cell range belongs.

The FlexGridStyle class provides different methods to easily add and remove styles from cells. To use these methods, you need to add ‘wijmo.grid.style’ module. Let us learn about these methods in detail in the following sections.

Style Cell Range

The FlexGridStyle class provides the applyStyle method to apply either inline or class-based CSS style on a cell range. This method allows the users to specify the style to be applied on a particular cell range.

Syntax:

applyStyle(rng: CellRange, style: Partial<CSSStyleDeclaration>, panel?: GridPanel, inline?: boolean): void;

Code Example:

In this example, the applyStyle method applies class-based CSS on a specified cell range. Here, the inline parameter is set as ‘false’, which converts the style object to a CSS class and adds it to the document. However, by default, the value of the inline parameter is true for the applyStyle method.

  let cssObject = { "background-color": "yellow !important", "font-size" : '10px' };
  flexGridStyle.applyStyle(new CellRange(3,1,3,2), cssObject, theGrid.cells, false);

Toggle CSS

In FlexGrid, you can toggle between adding or removing a particular CSS class on grid cells using the toggleClass method of the FlexGridStyle class. This method allows you to toggle the specified CSS class name on the provided cell range.

Syntax:

toggleClass(rng: CellRange, className: string, panel?: GridPanel, addOrRemove?: boolean)

Code Example:

//Add the class name
gridStyle.toggleClass(new wjGrid.CellRange(0,0,2,1), 'myStyle1', theGrid.cells, true);
//Remove the class name
gridStyle.toggleClass(new wjGrid.CellRange(0,0,2,1), 'myStyle1', theGrid.cells, false);
//Toggle the class name
gridStyle.toggleClass(new wjGrid.CellRange(0,0,2,1), 'myStyle1');

Remove Styles

The FlexGridStyle class provides the following methods to remove styles:

removeStyle – It removes a particular CSS style from a specified cell range as shown in the following code.

Syntax:

removeStyle(rng: CellRange, style: string | Partial<CSSStyleDeclaration>, panel?: GridPanel)

Code Example:

flexGridStyle.removeStyle(new CellRange(10,1,11,2), "testClassGreen");

clearAllStyles – It clears all applied styles from a specified cell range, or the entire grid as shown in the following code.

Syntax:

clearAllStyles(): void; //To clear all styles

clearAllStyles(rng: CellRange, panel?: GridPanel): void; //To clear the styles in the cell range

Code Example:

//To clear all styles
flexGridStyle.clearAllStyles();

//To clear styles in the cell range
flexGridStyle.clearAllStyles(new CellRange(10,1,11,2))

Limitations

• When CSS styles are added using the applyStyle method and ‘background-color' is specified in the style, then it overrides FlexGrid’s selection style, and the cell seems unselected.

• When the ‘inline’ parameter is set to ‘false’ in the style applied using the applyStyle method, it overrides any style applied on the same cell using the toggleClass method.