DevExtreme jQuery/JS - HTML-Based Widgets Customization

This article describes ways to customize HTML-based widgets. A similar article on SVG-based widgets is also available. If you do not know whether your widget is HTML- or SVG-based, refer to HTML- and SVG-Based Widgets.

We recommend customizing a widget using its API. Unlike CSS classes, the API is changed rarely, and if it happens, the widget populates the browser console with warnings that help you mend your code.

Each widget has an API described in the widget's API reference section. For example, you can specify the widget's width via a corresponding option. In the following example, this option is set for the List widget.

$(function() {
    $("#listContainer").dxList({
        width: 600
    });
});

<dx-list
    [width]="600">
</dx-list>

import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

<template>
    <dx-list
        :width="600" />
</template>
<script>
import DxList from 'devextreme-vue/list';

export default {
    components: {
        DxList
    }
}
</script>

import React from 'react';
import { List } from 'devextreme-react/list';

class App extends React.Component {
    render() {
        return (
            <List
                width={600}
            />
        );
    }
}

export default App;

@(Html.DevExtreme().List()
    .Width(600)
)

If your page contains multiple instances of the same widget, you can use the defaultOptions(rule) method to specify a default configuration for all of them in one place. The same method allows you to specify different default configurations for different devices.

In addition, widgets provide templates that you can use for more in-depth customization.

Because DevExtreme components consist of standard HTML elements (<div>, <td>, <tr>, and so on), you can use CSS classes to customize them.

A number of classes are documented. However, in most cases, you need to inspect the HTML markup to determine and override the applied CSS classes. The following articles describe how you can do it:

• How to inspect CSS rules
• How to implement CSS-related solutions for DevExpress components

Classes can be added to the widget element in the markup using the class attribute as usual. If it is not possible to change the markup, use the widget's elementAttr option for the same purpose.

During the customization, we recommend checking how the widgets page will look on different devices by viewing them in responsive design mode. Refer to the articles for Google Chrome, Firefox, or Microsoft Edge for information on how to enter this mode in the browser.