Customization

Styling TreeGrid

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

Related sample:  Styling grid - DHTMLX TreeGrid

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:  Styling header cells - DHTMLX TreeGrid

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 class='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:  Styling footer cells - DHTMLX TreeGrid

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:  Custom row style - DHTMLX TreeGrid

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
});
  • with the help of the addRowCss() method:
<style>
    .myCustomClass{
        background:greenyellow;
    }
</style>
var rowId = treegrid.data.getId(1);
treegrid.addRowCss(rowId, "myCustomClass");

Related sample:  Add row css - DHTMLX TreeGrid

where:

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

Styling cells

Related sample:  Add cell css - DHTMLX TreeGrid

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:  Custom mark cells - DHTMLX TreeGrid

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:  Mark cells - DHTMLX TreeGrid

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:  Cell templates - DHTMLX TreeGrid

Back to top