Customization

Styling TreeGrid

There is a possibility to make changes in the look and feel of a 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

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 treegrid = new dhx.TreeGrid("treegrid_container", { 
    columns: [
      { width: 100, id: "a", header: [{text: "<span style='font-size:2em'>#</span>"}]},
      { width: 100, id: "b", header: [{text: "<span class='title'>Title</span>"}] },
      { width: 200, id: "c", header: [{text: "Name"}]},
      { width: 200, id: "d", header: [{text: "Address"}]}
    ],
    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 treegrid = new dhx.TreeGrid("treegrid_container", { 
    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 treegrid rows by applying custom CSS styles to them. 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");

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>

treegrid.addCellCss(rowId, "b", "myCustomClass");

Adding custom marks to 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: 100,
          id: "c",
          header: [{ text: "Some" }],
          // 
          mark:function (cell,data,row,col) { return cell < 4 ? "my_custom_mark" : "" }         },
        {
          width: 100,
          id: "d",
          header: [{ text: "Other" }],
          // marks all cells in a column
          mark: function (cell, data) { return "total_col"; }         }
    ],
    data: dataset
});