Skip to main content
All docs

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?: DevExpress.ui.dxForm;
    dataField?: string;
    editorOptions?: any;
    editorType?: string;
    name?: string;
}, itemElement: DevExpress.core.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" }