Skip to main content

mark

Optional. Returns a template for marking a cell(s) or applies the desired CSS classes to cells with minimal|maximal values in a column

Usage​

mark?:
    { min?: string, max?: string } | 
    (cell, columnCells: [], row?: IRow, column?: ICol) => string;

Parameters​

The mark property can be either an object or a function:

  • as an object contains min and max properties, to apply desired CSS classes to cells with minimal|maximal values in a column
  • as a function returns a template for marking a cell(s) and takes several parameters:
    • cell - (required) the value of a cell
    • columnCells - (required) an array of all cell values in the specified column
    • row - (optional) an object with all cells in a row
    • column - (optional) an object with the configuration of a column (see the columns config)

Example​

<style>
    .max_cell {
        background: #f44336;
        color: #FFF;
    }

    .min_cell {
        background: #4CAF50;
        color: #FFF
    }
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
            {
                id: "population", header: [{ text: "Population" }],
                mark: {
                    min: "min_cell",
                    max: "max_cell"
                }
            },
            // more columns configuration objects
        ],
        // more options
    });
</script>

Related article: Adding custom marks to cells

Related sample: Grid. Mark cells