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

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 citizen developers to implement a simple common case, yet customizable cell/row styles with minimal effort.

4. User Stories

4.1. Developer

1. As a citizen developer, I want to add a style with a Grid Input (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 citizen 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 citizen 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 citizen developer, I want to be able to define a 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 citizen developer, I want to be able to define a 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 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/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

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/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/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