Skip to main content

Customization

Styling grid​

There is a possibility to make changes in the look and feel of a grid.

Styling grid

Related sample: Grid. Styling (custom CSS)

For this you need to take the following steps:

  • add a new CSS class(es) with desired settings in the <style> section of your HTML page or in your file with styles (don't forget to include your file on the page in this case)
<style>
    .my-first-class {
        /*some styles*/
    }
    
    .my-second-class {
        /*some styles*/
    }
</style>
  • specify the name of the created CSS class (or names of classes separated by spaces) as the value of the css property in the Grid configuration:
const grid = new dhx.Grid("grid_container", { 
    css:"my-first-class my-second-class"
});

For example:

<style>
    .custom {
        --dhx-font-color-primary: #fff;
        --dhx-background-primary: #3A434A;
        --dhx-s-grid-header-background: #2C3338;

        --dhx-border-color: #4A555E;
        --dhx-border: var(--dhx-border-width) solid var(--dhx-border-color);
    }
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
            { minWidth: 150, id: "country", header: [{ text: "Country" }] },
            { id: "population", header: [{ text: "Population" }] },
            { id: "yearlyChange", header: [{ text: "Yearly Change" }] },
            // more columns
        ],
        adjust: true,
        data: dataset,
        css: "custom",
    });
</script>

Styling selection​

Styling selection

Related sample: Grid. Styling selection (custom CSS)

Here is an example of how you can style selection in Grid:

<style>
    .custom {
        --dhx-color-primary: #ff5252;
        --dhx-s-grid-selection-background: rgba(255, 198, 198, 1);
    }
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
            { minWidth: 150, id: "country", header: [{ text: "Country" }] },
            { id: "population", header: [{ text: "Population" }] },
            { id: "yearlyChange", header: [{ text: "Yearly Change" }] },
            // more columns
        ],
        adjust: true,
        data: dataset,
        selection: true,
        css: "custom"
    });
</script>

Styling header cells​

You can easily set some styling to the text of header cells by applying some inline style or a CSS class to the text property of the header of a column:

<style>
    .title {
        font-size: 1.2em;
        color: tomato;
    }
    
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
              { width: 200, id: "country", header: [{ text: "<span style='font-size:2em'>Country</span>" }] },
              { width: 150, id: "population", header: [{ text: "<span class='title'>Population</span>" }] },
              { width: 150, id: "yearlyChange", header: [{ text: "Yearly Change" }] },
              { width: 150, id: "netChange", header: [{ text: "Net Change" }] },
              { width: 150, id: "density", header: [{ text: "Density (P/Km²)" }] },
              { width: 150, id: "area", header: [{ text: "Land Area (Km²)" }] },
        ],
        data: dataset
    });
</script>

Related sample: Grid. Styling header cells (custom CSS)

You can easily set some styling to the text of footer cells by applying some inline style or a CSS class to the text property of the footer of a column:

<style>        
    .custom_footer{
        font-size: 18px;
        text-decoration: underline;
    }    
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
    columns: [
        {
            width: 200, id: "country", header: [{ text: "Country" }],
            footer: [
                { text: '<div class="custom_footer">Total</div>' },
                { text: '<div class="custom_footer">Minimal value</div>' },
            ],
            htmlEnable: true
        },
        {
            width: 150, id: "population", header: [{ text: "Population" }],
            footer: [
                { text: ({ totalPopulation}) => `${totalPopulation}`},
                { text: ({ minimalValue }) => `${minimalValue}`}
            ],
        },
    ],
    summary: { 
        totalPopulation: ["population", "sum"],
        minimalValue: ["population", "min"]
    },
    data: dataset
});
</script>

Related sample: Grid. Styling footer cells (custom CSS)

Styling rows​

It is possible to change the appearance of grid rows by applying custom CSS styles to them. There are two ways to do it:

  • via the rowCss property in the configuration of Grid. As a value of property set a function that takes the id of a row as a parameter and returns a string with the name of a CSS class.
<style>
    .my_custom_row {
        background: coral;
    }
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
            // columns config
        ],
        rowCss: function (row) { return row.custom ? "my_custom_row" : "" },
        data: dataset
    });
</script>

Related sample: Grid. Custom row style

  • with the help of the addRowCss() method:
<style>
    .myCustomClass{
        background:greenyellow;
    }
</style>

<script>
    const rowId = grid.data.getId(1);
    grid.addRowCss(rowId, "myCustomClass");
</script>

Related sample: Grid. Add row CSS

where:

rowId(string,number) the id of a row
css(string) the name of a CSS class

Styling cells​

It is easy to style necessary cells using the addCellCss() method. It takes three parameters:

row(string,number) the id of a row
column(string,number) the id of a column
css(string) the name of the CSS class
<style>
.myCustomClass{
    background:greenyellow;
}
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
            // columns config
        ],
        data: dataset,
        adjust: true
    });

    const rowId = grid.data.getId(1);

    grid.addCellCss(rowId, "country", "my_сustom_сlass");
</script>

Related sample: Grid. Add cell CSS

Adding custom marks to cells​

You can mark particular cells in a grid using the mark property of a column configuration. You need to set its value as a function that takes the following parameters:

cell(string) the value of a cell
columnCells(array) an array of all cell values in the specified column
row(object) an object with all cells in a row
column(object) the config of a column (see the columns config)

The function should return a string with a custom CSS class for your mark.

<style>
    .my_custom_mark {
        background: lightcoral;
    }
    
    .total_col {
        background: #f2f2f2;
    }
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
            {
                id: "population", header: [{ text: "Population" }],
                // marks specified cells in a column
                mark: function (cell, data, row, column) {
                    return cell > 100000000 ? "my_custom_mark" : ""
                }
            }, 
            {
                id: "density", header: [{ text: "Density (P/Km²)" }],
                // marks all cells in a column
                mark: function (cell, data) { return "total_col"; }
            },
        ],
        data: dataset
    });
</script>

Related sample: Grid. Conditional formatting. Marking cells with colors

It is also possible to highlight cells with minimum and (or) maximum values in a grid using the mark property of a column configuration. The property is an object which takes two optional parameters:

min(string) a custom CSS class to mark a cell that contains the minimum value
max(string) a custom CSS class to mark a cell that contains the maximum value

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

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

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
            { width: 200, id: "country", header: [{ text: "Country" }] },
            {
                width: 150, id: "population", header: [{ text: "Population" }],
                mark: {
                    min: "min_cell",
                    max: "max_cell"
                }
            },
            // more options
        ],
        data: dataset
    });
</script>

Related sample: Grid. Mark cells

Adding template to cells​

It is possible to customize the content of cells of Grid via the template property of a column configuration. The template option is a function that takes three parameters:

cellValue(any) the value of a cell
row(object) an object with all cells in a row
column(object) the config of a column

const grid = new dhx.Grid("grid_container", {
    columns: [
        { width: 200, id: "country", header: [{text: "Country"}] },
        { width: 150, id: "population", header: [{text: "Population"}] },
        { width: 150, id: "netChange", header: [{text: "Net Change"}],
          htmlEnable: true,
          template: function (text, row, column) {
            return "<input type=\"checkbox\" " + (text /> 300000 ? "checked": "")  + ">";
          }
        }
    ],
    data: dataset
});

Related sample: Grid. Cell templates

Event handlers for the template​

Starting from v7.0, you can assign event handlers to HTML elements of a custom template of Grid cells via using the eventHandlers configuration property of Grid, for instance:

const grid = new dhx.Grid("grid_container", {
    columns: [
        { width: 200, id: "country", header: [{ text: "Country" }], htmlEnable: true },
        { width: 150, id: "netChange", header: [{text: "Net Change"}],
            htmlEnable: true,
            tooltip: false,
            template: function (text, row, column) { 
                return "<div className='cell__template'><input type='checkbox' 
                    disabled " + (text /> 3000000 ? "checked" : "") + " ></div>";
            }
        },
        // more options
    ],
    data: data,
    eventHandlers: { 
        onmouseover: { 
            cell__template: function(event, data) { 
                console.log(JSON.stringify(data.row, null, 2)); 
            } 
        } 
    } 
});

Related sample: Grid. Handling events in template

Adding template to tooltip​

Starting with v7.1, you can customize the content of the tooltip of a column via the tooltipTemplate configuration option of the column. The tooltipTemplate function takes three parameters:

value(any) the value of a cell
row(object) an object with all cells in a row
column(object) the config of a column

const grid = new dhx.Grid("grid_container", {
    columns: [
        {
            width: 200, id: "country", header: [{ text: "Country" }], align: "left",
            htmlEnable: true, 
            tooltipTemplate: function (value, row, column) { 
                if (row.country === "Bangladesh") {
                    return false; // prevent a tooltip from being shown
                }
                return `<div className="custom-tooltip"> 
                    <img src="../data/common/img/02/${row.avatar}.jpg" /> 
                    <span>Last edit time:<br/>${row.editing.toUTCString()}</span> 
                </div>`; 
            } 
        },
        { width: 150, id: "population", header: [{ text: "Population" }] },
        { width: 150, id: "yearlyChange", header: [{ text: "Yearly Change" }] },
        // more options
    ],
    data: dataset
});
info

To prevent a tooltip from being shown, return false from the function (from v7.1.12).

Related sample: Grid. Rich tooltip template for the first column

Related sample: Grid. Tooltip template

note

You should enable the htmlEnable option in the configuration of Grid (or configuration of the column) to activate HTML support for the tooltip.