Skip to main content

SectionOptions Interface

Provides options for a new section in the Dashboard Item Menu and Data Item Menu.

#Declaration

TypeScript
export interface SectionOptions

#Remarks

Handle the OptionsPanelExtensionOptions.onCustomizeSections or BindingPanelExtensionOptions.onCustomizeDataItemContainerSections events and call the e.addSection method. Pass a SectionOptions object as the addSection method’s parameter. Use the SectionOptions.items property to specify editors for a new section.

The following code adds a new section to the Options menu:

  1. Create a custom property (an axisMaxValueConstantProperty object). Users can change its value in an editor displayed in the newly added section.
  2. Handle the onCustomizeSections event and use the CustomizeSectionsEventArgs.addSection method to add the new section.

javascript
var Model = DevExpress.Dashboard.Model;

const axisMaxValueConstantProperty = {
    ownerType: Model.ChartItem,
    propertyName: "AxisMaxValueConstant",
    defaultValue: 100,
    valueType: 'number'
};
Model.registerCustomProperty(axisMaxValueConstantProperty);
// ...
function onCustomizeSections(args) {
    args.addSection({
        title: "Primary Axis Max Value (Custom)",
        items: [
            {
                dataField: axisMaxValueConstantProperty.propertyName,
                editorType: "dxNumberBox",
                label: {
                    text: "Value",
                }
            }
        ]
    })
}
See Also

#Properties

#items Property

Specifies a simple form with DevExtreme widgets that is placed in a new section.

#Declaration

TypeScript
items: Array<DevExpress.ui.dxForm.SimpleItem>

#Property Value

Type Description
SimpleItem[]

A SimpleItem object that is a simple form with widgets.

#onContentReady Property

#Declaration

TypeScript
onContentReady?: (e: {
    component?: DevExpress.ui.dxForm;
    element?: DevExpress.core.DxElement;
}) => void

#Property Value

Type
(e: {component: dxForm, element: DxElement}) => void

#onFieldDataChanged Property

#Declaration

TypeScript
onFieldDataChanged?: (e: {
    component?: DevExpress.ui.dxForm;
    element?: DevExpress.core.DxElement;
    model?: any;
    dataField?: string;
    value?: any;
}) => any

#Property Value

Type
(e: {component: dxForm, dataField: string, element: DxElement, model: any, value: any}) => any

#onInitialized Property

#Declaration

TypeScript
onInitialized?: (e: {
    component?: DevExpress.ui.dxForm;
    element?: DevExpress.core.DxElement;
}) => void

#Property Value

Type
(e: {component: dxForm, element: DxElement}) => void

#title Property

Specifies a new section’s title.

#Declaration

TypeScript
title: string

#Property Value

Type Description
string

A string that is a section name.