Skip to main content

Customization

Styling TreeGrid

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

Styling TreeGrid

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

For example:

<style>
.custom {
--dhx-color-primary: #00c2b8;
--dhx-background-primary: #f2f2f2;
--dhx-border-color: #fff;
--dhx-border: var(--dhx-border-width) solid var(--dhx-border-color);
}
</style>

<script>
const treeGrid = new dhx.TreeGrid("treegrid_container", {
columns: [
{ id: "name", header: [{ text: "Name" }], gravity: 1.5 },
{ id: "native", type: "string", header: [{ text: "Native name" }] },
{ id: "capital", type: "string", header: [{ text: "Capital" }] },
{ id: "currency", type: "string", header: [{ text: "Currency" }] }
],
data: dataset,
autoWidth: true,
selection: true,
css: "custom"
});
</script>

Styling selection

Styling selection

Related sample: TreeGrid. Styling selection (custom CSS)

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

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

<script>
const treeGrid = new dhx.TreeGrid("treegrid_container", {
columns: [
{ id: "name", header: [{ text: "Name" }], gravity: 1.5 },
{ id: "native", type: "string", header: [{ text: "Native name" }] },
{ id: "capital", type: "string", header: [{ text: "Capital" }] },
{ id: "currency", type: "string", header: [{ text: "Currency" }] }
],
data: dataset,
selection: true,
autoWidth: true,
css: "custom",
});
</script>

Styling header cells

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

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:

const 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
});

Related sample: TreeGrid. Styling footer 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 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
});
</script>

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>

<script>
const treegrid = new dhx.TreeGrid("treegrid_container", {
columns: [
// columns config
],
rowCss: function (row) { return row.custom ? "my_custom_row" : "" },
data: dataset
});
</script>
<style>
.myCustomClass{
background:greenyellow;
}
</style>

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

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>

<script>
...
treegrid.addCellCss(rowId, "name", "myCustomClass");
</script>

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>

<script>
const 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
});
</script>

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 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" }
],
mark: {
min: "min_cell",
max: "max_cell"
}
},
// more options
],
data: dataset
});
</script>

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

const 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" }
],
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_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" }],
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) {
console.log(JSON.stringify(data.row, null, 2));
}
}
}
});

Related sample: TreeGrid. 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
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_container", {
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.