CustomizeSectionsEventArgs Interface

Provides information for the OptionsPanelExtensionOptions.onCustomizeSections event.

Declaration

export interface CustomizeSectionsEventArgs

Inheritance

CustomizeSectionsEventArgs

CustomizeDataItemContainerSectionsEventArgs

Properties

dashboardItem Property

Gets a dashboard item for which the event is raised.

Declaration

dashboardItem: DevExpress.Dashboard.Model.DashboardItem

Property Value

Type	Description
DashboardItem	A dashboard item for which the event is raised.

Methods

addSection(options) Method

Adds a new section to the dashboard item’s Options menu and data item menu.

Declaration

addSection(
    options: SectionOptions
): void

Parameters

Name	Type	Description
options	SectionOptions	The section’s options.

Remarks

Pass a SectionOptions object as the addSection method’s parameter. Use the SectionOptions.items property to specify editors for a new section.

To add DevExtreme widgets, specify the editorType and editorOptions properties. See DevExtreme documentation for details.

function onCustomizeSections(args) {
    args.addSection({
        title: "Section Title (Custom)",
        items: [
                {
                dataField: textProperty.propertyName,
                editorType: "dxTextArea",
                label: {
                    text: "Description"
                },
                editorOptions: {
                    height: 90
                }
                }
        ]
    });
}

You can use FormItemTemplates.buttonGroup as a template to add a group with two buttons. Set the template property to FormItemTemplates.buttonGroup and specify items 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" }
                    ],
                }
            }
        ]
    });
}