css

Optional. Adds a CSS class(es) to the component

css?: string;

Example

<style>
    .custom {
        --dhx-font-color-primary: #fff;
        --dhx-background-primary: #3A434A;
        --dhx-color-primary: #118d8d;

        --dhx-border-color: #4A555E;
        --dhx-border: var(--dhx-border-width) solid var(--dhx-border-color);
    }
</style>

<script>
    const dataview = new dhx.DataView("dataview_container", {
        itemsInRow: 2, 
        gap: 10,
        css: "custom dhx_widget--bordered",
        template
    });
</script>

Related samples:

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.

<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>

<script>
    const dataview = new dhx.DataView("dataview_container", {itemsInRow: 3});
</script>

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

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

Related articles:

Example​

Example