Skip to main content

FormItemTemplates Class

Contains templates for editors used in the Web Dashboard.


export class FormItemTemplates


You can use DevExtreme widgets or predefined templates to add editors to a new section of the dashboard item’s Options menu or data item menu.


buttonGroup Property

Specifies a template for a button group.


static buttonGroup: ((data: {
    component?: dxForm;
    dataField?: string;
    editorOptions?: any;
    editorType?: string;
    name?: string;
}, itemElement: DxElement) => Element)

Property Value

Type Description
(data: {component: dxForm, dataField: string, editorOptions: any, editorType: string, name: string}, itemElement: DxElement) => Element

A button group.


A button group template is based on the ButtonGroup widget and allows you to create a button group with two buttons.

To add a button group in a new section, handle the OptionsPanelExtensionOptions.onCustomizeSections or BindingPanelExtensionOptions.onCustomizeDataItemContainerSections events and call the e.addSection method. Pass a SectionOptions object as a parameter. In the SectionOptions.items property, set the template property to FormItemTemplates.buttonGroup and specify buttons in the editorOptions property.

function onCustomizeSections(args) {
        title: "Section Title (Custom)",
        items: [
                dataField: stringProperty.propertyName,
                label: {
                    text: "Button Group"
                template: DevExpress.Dashboard.Designer.FormItemTemplates.buttonGroup,
                editorOptions: {
                    keyExpr: "value",
                    items: [
                        { value: "value1", text: "Value 1" },
                        { value: "value2", text: "Value 2" }