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: 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" }
                    ],
                }
            }
        ]
    });
}