All docs
V20.1
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

FormItemTemplates Class

Contains templates for editors used in the Web Dashboard.

Declaration

export class FormItemTemplates

Remarks

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.

Properties

buttonGroup Property

Specifies a template for a button group.

Declaration

static buttonGroup: ((data: {
    component?: 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.

Remarks

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) {
    args.addSection({
        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" }
                    ],
                }
            }
        ]
    });
}