Customization

Styling

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

var dataview = new dhx.DataView({ 
    css:"my_first_class my_second_class"
});

Styling items

You can style particular cells in the dataview. For example, apply some color to each even item, as in:

var dataview = new dhx.DataView("dataview", {itemsInRow: 5});
 
dataview.data.parse(dataset);
dataview.data.map(function (item, i) {
    if (i % 2) {
        dataview.data.update(item.id, {css: "bg-gray"})
    }
});
 
 
<style>
    .bg-gray {
        background: #efefef;
    }
</style>