Customization
Styling grid
There is a possibility to make changes in the look and feel of a grid.
Related sample: Grid. Styling Selection
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 Grid configuration:
var grid = new dhx.Grid({
css:"my-first-class my-second-class"
});
Related sample: Grid. Styling Grid
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 grid = new dhx.Grid("grid", {
columns: [
{ width: 200, id: "country",
header: [{ text: "<span style='font-size:2em'>Country</span>" }] },
{ width: 150, id: "population",
header: [{ text: "<span class='title'>Population</span>" }] },
{ width: 150, id: "yearlyChange", header: [{ text: "Yearly Change" }] },
{ width: 150, id: "netChange", header: [{ text: "Net Change" }] },
{ width: 150, id: "destiny", header: [{ text: "Density (P/Km²)" }] },
{ width: 150, id: "area", header: [{ text: "Land Area (Km²)" }] },
],
data: dataset
});
Related sample: Grid. Styling Header Cells
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 grid = new dhx.Grid("grid", {
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
});
Related sample: Grid. Styling Footer Cells
Styling rows
It is possible to change the appearance of grid rows by applying custom CSS styles to them. There are two ways to do it:
- via the rowCss property in the configuration of Grid. 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 grid = new dhx.Grid("grid", {
columns: [// columns config],
rowCss: function (row) { return row.custom ? "my_custom_row" : "" }, data: dataset
});
Related sample: Grid. Custom Row Style
- with the help of the addRowCss() method:
<style> .myCustomClass{
background:greenyellow;
}
</style>
var rowId = grid.data.getId(1);
grid.addRowCss(rowId, "myCustomClass");
Related sample: Grid. Add Row Css
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>
grid.addCellCss(rowId, "netChange", "myCustomClass");
Related sample: Grid. Add Cell Css
Adding custom marks to cells
You can mark particular cells in a grid 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 custom CSS class for your mark.
<style> .my_custom_mark {
background: lightcoral;
}
.total_col {
background: #f2f2f2;
}
</style>
var grid = new dhx.Grid("grid", {
columns: [
{
width: 150, id: "population", header: [{ text: "Population" }],
// marks specified cells in a column
mark: function (cell, data, row, col) { return cell > 100000000 ? "my_custom_mark" : "" }
},
{
width: 150, id: "destiny", header: [{ text: "Density (P/Km²)" }],
// marks all cells in a column
mark: function (cell, data) { return "total_col"; } },
],
data: dataset
});
Related sample: Custom mark cells - DHTMLX Grid
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: 200, id: "country", header: [{ text: "Country" }] },
{
width: 150, id: "population", header: [{ text: "Population" }],
mark: {
min: "min_cell", max: "max_cell" }
},
// more options
],
data: dataset
});
Related sample: Grid. Mark Cells
Adding template to cells
It is possible to customize the content of cells of Grid 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 grid = new dhx.Grid("grid", {
columns: [
{ width: 200, id: "country", header: [{text: "Country"}] },
{ width: 150, id: "population", header: [{text: "Population"}] },
{ width: 150, id: "netChange", header: [{text: "Net Change"}],
htmlEnable: true,
template: function (text, row, col) { return "<input type=\"checkbox\" " + (text > 300000 ? "checked": "") + ">"; }
}
],
data: dataset
});
Related sample: Grid. Cell Templates
Event handlers for the template
Starting from v7.0, you can assign event handlers to HTML elements of a custom template of Grid cells via using the eventHandlers configuration property of Grid, for instance:
const grid = new dhx.Grid("grid", {
columns: [
{ width: 200, id: "country", header: [{ text: "Country" }], htmlEnable: true },
{ width: 150, id: "netChange", header: [{text: "Net Change"}],
htmlEnable: true,
tooltip: false,
template: function (text, row, col) { return "<div class='cell__template'><input type='checkbox' disabled " + (text > 3000000 ? "checked" : "") + " ></div>"; } },
// more options
],
data: data,
eventHandlers: { onmouseover: { cell__template: function(event, data) { display(JSON.stringify(data.row, null, 2)); } } } });
Related sample: Handling events in template - DHTMLX Grid
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). |
| value | an 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:
|
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 |
const grid = new dhx.Grid("grid", {
columns: [
{
width: 200, id: "country", header: [{ text: "Country" }], align: "left",
htmlEnable: true, tooltipTemplate: function (value, row, col) { return `<div class="custom-tooltip"> <img src="../data/common/img/02/${row.avatar}.jpg" /> <span>Last edit time:<br>${row.editing.toUTCString()}</span> </div>`; } },
{ width: 150, id: "population", header: [{ text: "Population" }] },
{ width: 150, id: "yearlyChange", header: [{ text: "Yearly Change" }] },
// more options
],
data: dataset
});
Related sample: Grid. Rich tooltip template for the first column
Related sample: Grid. Tooltip template
You should enable the htmlEnable option in the configuration of Grid (or configuration of the column) to activate HTML support for the tooltip.