Customization

Styling grid

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

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:

var grid = new dhx.Grid({ 
    css:"my-first-class my-second-class"
});

Related sample: Grid. Styling Grid

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>

var grid = new dhx.Grid("grid", {
    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: "destiny", header: [{ text: "Density (P/Km²)" }] },
      { width: 150, id: "area", header: [{ text: "Land Area (Km²)" }] },
    ],
    data: dataset
});

Styling footer cells

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>

var grid = new dhx.Grid("grid", {
    columns: [
      {
        width: 100, id: "a", header: [{ text: "#" }], footer: [
            { text: '<div class="custom_footer">Total</div>', colspan: 3 },
            { text: '<div class="custom_footer">Minimal value</div>', colspan: 3 }
        ]
      },
      { width: 100, id: "b", header: [{ text: "Title" }] },
      { width: 200, id: "c", header: [{ text: "Order" }] },
      { width: 200, id: "d", header: [{ text: "Price" }], footer: [
            { content: "sum" }, { content: "min" }        
        ] 
      }
    ],
    data: dataset
});

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>

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

Related sample: Grid. Custom Row Style

with the help of the addRowCss() method:

<style>    .myCustomClass{
        background:greenyellow;
    }
</style>

var rowId = grid.data.getId(1);
grid.addRowCss(rowId, "myCustomClass");

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
col	(string,number) the id of a column
css	(string) the name of the CSS class

<style>.myCustomClass{
    background:greenyellow;
}
</style>

grid.addCellCss(rowId, "netChange", "myCustomClass");

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
col	(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>

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

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>

var grid = new dhx.Grid("grid", {
    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
});

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
col	(object) the config of a column

var grid = new dhx.Grid("grid", {
    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, col) {             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", {
    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, col) {                 return "<div class='cell__template'><input type='checkbox'                      disabled " + (text > 3000000 ? "checked" : "") + " ></div>";             }         },
        // more options
    ],
    data: data,
    eventHandlers: {         onmouseover: {             cell__template: function(event, data) {                 display(JSON.stringify(data.row, null, 2));             }         }     } });

The eventHandlers object includes a set of key:value pairs, where:

key	the name of the event. Note, that at the beginning of the event name the 'on' prefix is used (onclick, onmouseover).
value	an object that contains a key:value pair, where key is the css class name that the handler will be applied to and value is a function that takes two parameters: event - an event object object - an object with two attributes: - row - an object with a row configuration - column - an object with a column configuration