adds a CSS class(es) to the component

string css;


    .bg-gray {
        background: #efefef;
var dataview = new dhx.DataView("dataview", {itemsInRow: 5, css: "bg-gray"});

Related samples


The DHTMLX library provides a set of CSS classes that you can apply to change appearance of Window.

var dataview = new dhx.DataView("dataview", {css: "dhx_widget--bg_gray"});

List of CSS classes

dhx_widget--bg_white Sets white background to a widget
dhx_widget--bg_gray Sets gray background to a widget
dhx_widget--bordered Sets borders on all sides of a widget
dhx_widget--border_top Sets a border on the top side of a widget
dhx_widget--border_bottom Sets a border on the bottom side of a widget
dhx_widget--border_left Sets a border on the left side of a widget
dhx_widget--border_right Sets a border on the right side of a widget
dhx_widget--border-shadow Adds a shadow border to a widget
dhx_widget--no-border_top Removes the top border of a widget
dhx_widget--no-border_bottom Removes the bottom border of a widget
dhx_widget--no-border_right Removes the right border of a widget
dhx_widget--no-border_left Removes the left border of a widget

If you want to apply your own styles for selection of items or focus, you can do it via the corresponding CSS classes: .dhx_dataview-item--selected and .dhx_dataview-item--focus. There is no need to use any additional custom classes.

    .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);
var dataview = new dhx.DataView("dataview", {itemsInRow: 3});
See also
Back to top