Conditional Grid Row Cell Styling

Conditional Grid Row/Cell Styling

Contents

1. Revision history

2. Overview

3. Objectives

4. User Stories

   4.1. Developer

   4.2. Developer

5. Acceptance criteria

6. Functionality

   6.1. End User Experience

   6.2. Developer Experience

7. Test Scenarios

1. Revision History

Version	User	Date	Notes
0.1	Zdravko Kolev	12 Aug, 2021	Initial draft

• Radoslav Karaivanov | Date:
• Desislava Dincheva | Date:

2. Overview

igx-grid is a component used to display tabular data in a series of rows and columns. These rows and columns provide the ability of conditional styling based on certain criteria - cell value, row index and etc.

3. Objectives

Provide means for the developers to implement a simple common case, yet customizable cell/row styles with minimal effort.

4. User Stories

4.1. Developer

1. As a developer, I want to add a style with a Grid Input (data row styling) and Column Input (cell styling).

Column input for cellClasses:

<igx-column field="BeatsPerMinute" dataType="number" [cellClasses]="beatsPerMinuteClasses"></igx-column>

Grid input for rowClasses:

<igx-grid [rowClasses]="beatsPerMinuteClasses"></igx-grid>

2. As a developer, I want to be able to define a cell style based on a condition that will return a boolean value that determines whether to apply a certain class or not ('downFont' and 'upFont' being the CSS classes)

public beatsPerMinuteClasses = {
    downFont: this.downFontCondition,
    upFont: this.upFontCondition
};

3. As a developer, I want to be able to define a cell style based on a condition that will return a style definition as object literal. Each of the object properties should be relevant to CSS properties (e.g.):

public styles = {
    "background": "linear-gradient(180deg, #dd4c4c 0%, firebrick 100%)",
    "text-shadow": "1px 1px 2px rgba(25,25,25,.25)",
    "animation": "0.25s ease-in-out forwards alternate popin"
};

4. As a developer, I want to be able to define a data row style based on a condition that will return a boolean value that determines whether to apply a certain class or not ('downFont' and 'upFont' being the CSS classes)

5. As a developer, I want to be able to define a data row style based on a condition that will return a style definition as object literal. Each of the object properties should be relevant to CSS properties (e.g.):

4.2. End User

As an end user, I want to have different data rows/cells styles in my Grid, so that I could be presented with different visual details and distinguish any visual elements in aesthetic way.

5. Acceptance criteria

The developer can add different cell/data row styles through:

• Object literal containing key-value pairs. The key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.
• Object literal where the keys are style properties and the values are expressions for evaluation.

6. Functionality

• When it comes to applying styles to a row we consider only the data rows. Currently the summary rows, group by rows and etc. could not be styled with rowClasses and rowStyles.

6.1. End User Experience

The grid introduces the following input properties:

• cellClasses - used in Column input
• cellStyles - used as Column input
• rowClasses - used in Grid input
• rowStyles - used as Grid input

6.2. Developer Experience

• cellClasses and rowClasses binding should be used to add and remove CSS class names from the cell/data row element's class attribute.
• cellClasses and rowClasses - accepts an object literal containing key-value pairs. The key is the name of the CSS class, the value is either a callback function that returns a boolean or boolean value.
• cellStyles and rowStyles binding should be used to set styles on the grid's cell/data row element dynamically.
• cellStyles and rowStyles - accepts an object literal where the keys are style properties and the values are expressions for evaluation. Should be able to apply regular styling without any conditions.
• The callback signature for both cellStyles and cellClasses is:

(rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean

• The callback signature for both rowClasses and rowStyles will be:

(row: RowType) => boolean

• With the new row styling functionality both evenRowCSS and oddRowCSS will be deprecated.

7. Test scenarios

• Shoud be able to conditionally style rows. Check is the class present in the cell/row native element class list.
• Should apply custom CSS bindings to the grid cells/rows. Check the style attribute to match each binding:

const styles = {
     background: 'black',
     color: 'white'
};

• Should have correct cell/row classes after horizontal/vertical scroll