Skip to main content

Customization

Styling TreeGrid#

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

Related sample: TreeGrid. Styling 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 TreeGrid configuration:
var treegrid = new dhx.TreeGrid("treegrid_container", {     css:"my-first-class my-second-class"});

Styling header cells#

Related sample: TreeGrid. 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:

var treegrid = new dhx.TreeGrid("treegrid_container", {     columns: [        { width: 280, id: "name",             header: [{ text: "<span style='font-size:2em'>Book Name</span>" }] },        { width: 160, id: "price", type: "string",             header: [{ text: "<span className='title'>Terms and conditions</span>",            colspan: 2 }, { text: "Price" }] },        { width: 160, id: "cover", type: "string", header: [{}, { text: "Cover" }] }    ],    data: dataset});

Styling footer cells#

Related sample: TreeGrid. 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 treegrid = new dhx.TreeGrid("treegrid_container", {     columns: [        {            width: 280, id: "name", header: [{ text: "Book Name" }],            footer: [                { text: '<div class="custom_footer">Total</div>' },                { text: '<div class="custom_footer">Minimal value</div>' }            ]        },        {            width: 160, id: "price", type: "string",             header: [{ text: "Terms and conditions", colspan: 2 }, { text: "Price" }],            footer: [{ content: "sum" }, { content: "min" }]        },        {             width: 160, id: "cover", type: "string",             header: [{}, { text: "Cover" }]         }    ],    data: dataset});

Styling rows#

It is possible to change the appearance of treegrid rows by applying custom CSS styles to them.

Related sample: TreeGrid. Custom Row Style

There are two ways to do it:

  • via the rowCss property in the configuration of TreeGrid. 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 treegrid = new dhx.TreeGrid("treegrid_container", {     columns: [// columns config],    rowCss: function (row) { return row.custom ? "my_custom_row" : "" }, /*!*/    data: dataset});
<style>    .myCustomClass{        background:greenyellow;    }</style>
var rowId = treegrid.data.getId(1);treegrid.addRowCss(rowId, "myCustomClass"); /*!*/

Related sample: TreeGrid. Add row css

where:

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

Styling cells#

Related sample: TreeGrid. Add cell css

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>
treegrid.addCellCss(rowId, "name", "myCustomClass");

Adding custom marks to cells#

Related sample: TreeGrid. Custom Mark Cells

You can mark particular cells in a treegrid 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 cusotm CSS class for your mark.

<style>    .my_custom_mark {        background: lightcoral;    }        .total_col {        background: #f2f2f2;    }</style>
var treegrid = new dhx.TreeGrid("treegrid_container", {     columns: [        { width: 280, id: "name", header: [{ text: "Book Name" }] },        {            width: 160, id: "price", type: "string",             header: [                { text: "Terms and conditions", colspan: 2 },                 { text: "Price" }            ],            // marks specified cells in a column            mark: function (cell, data, row, col) {  /*!*/                return cell > 10 ? "my_custom_mark" : ""  /*!*/            }        },        { width: 160, id: "cover", type: "string",             header: [{}, { text: "Cover" }] },        { width: 160, id: "ships", type: "string",             header: [{ text: "Ships in" }],            // marks all cells in a column            mark: function (cell, data) { return "total_col"; } /*!*/        },        // more options             ],    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: 280, id: "name", header: [{ text: "Book Name" }] },        {            width: 160, id: "price", type: "string",             header: [                { text: "Terms and conditions", colspan: 2 },                { text: "Price" }            ],            mark: { /*!*/                min: "min_cell", /*!*/                max: "max_cell" /*!*/            }        },        // more options    ],    data: dataset});

Related sample: TreeGrid. Mark Cells

Adding template to cells#

It is possible to customize the content of cells of TreeGrid 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 treeGrid = new dhx.TreeGrid("treegrid", {    columns: [        { width: 280, id: "name", header: [{ text: "Book Name" }] },        { width: 160, id: "price", type: "string",            header: [                 { text: "Terms and conditions", colspan: 2 },                  { text: "Price" }            ],            template: function (text, row, col) { /*!*/                return text?"$ "+text :""; /*!*/            }        },        // more options     ],    data: dataset,});

Related sample: TreeGrid. Template with content for cells

Event handlers for the template#

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

const treeGrid = new dhx.TreeGrid("treegrid", {    columns: [        { width: 280, id: "name", header: [{ text: "Book Name" }] },        {            width: 160, id: "price", type: "string",             header: [{ text: "Terms and conditions", colspan: 2 }, { text: "Price" }],            htmlEnable: true,            template: function (text, row, col) { /*!*/                return text ? "<div className='cell__template'>$ " + text + "</div>" : ""; /*!*/            } /*!*/        },        // more options    ],    data: data,    eventHandlers: { /*!*/        onmouseover: { /*!*/            cell__template: function(event, data) { /*!*/                display(JSON.stringify(data.row, null, 2)); /*!*/            } /*!*/        } /*!*/    } /*!*/});

Related sample: TreeGrid. Handling Events in Template

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).
valuean 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

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

function rowDataTemplate(value, row, col) { /*!*/    if (!value) { /*!*/        return; /*!*/    } /*!*/    return `Country: ${row.country}</br> /*!*/            Population: ${row.population}</br> /*!*/            Yearly Change: ${row.yearlyChange}</br> /*!*/            Net Change: ${row.netChange}`; /*!*/}
const treeGrid = new dhx.TreeGrid("treegrid", {    columns: [        {             id: "country", header: [{ text: "Country" }], gravity: 1.2,             tooltipTemplate: rowDataTemplate /*!*/        },        {             id: "population", header: [{ text: "Population" }],             tooltipTemplate: rowDataTemplate /*!*/        },        // more options    ],    data: dataset});

Related sample: TreeGrid. Tooltip template

note

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