Skip to main content

css

Optional. Adds style classes to TreeGrid

css?: string;

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>

Related sample: TreeGrid. Styling (custom CSS)

Note, that the DHTMLX library provides a set of own CSS classes that you can also apply to change the appearance of TreeGrid:

const treegrid = new dhx.TreeGrid("treegrid_container", {
css: "dhx_widget--bg_white"
});

Related articles: