There is a possibility to make changes in the look and feel of a dataview. For this you need to take the following steps:
<style>
.my_first_class {
/*some styles*/
}
.my_second_class {
/*some styles*/
}
</style>
var dataview = new dhx.DataView({
css:"my_first_class my_second_class"
});
Related sample: Dataview. Custom Widget Styles
You can style particular cells in the dataview. For example, apply some color to each even item, as in:
<style>
.bg-gray {
background: #efefef;
}
</style>
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"})
}
});
The image below and the related sample demonstrate another example of customization of Dataview items:
Related sample: Dataview. Custom Item Styles
You can apply your own styles for selection of items and focus with the help of the corresponding CSS classes: .dhx_dataview-item--selected and .dhx_dataview-item--focus. There is no need to use any additional custom classes.
<style>
.dhx_dataview-item--selected {
border-color: transparent;
box-shadow: 0px 1px 5px 0px rgb(2, 136, 209, 0.5),
inset 0px 0px 0px 1px rgb(2, 136, 209, 1);
}
</style>
var dataview = new dhx.DataView("dataview", {itemsInRow: 3});
Related sample: Dataview. Custom Selection Styles
Back to top