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.

BindingPanelExtensionOptions Interface

Declaration

export interface BindingPanelExtensionOptions

Properties

onCustomizeDataItemContainerSections Property

A handler for the event that allows you to customize the data item menu's sections that correspond to the data item containers.

Declaration

onCustomizeDataItemContainerSections?: (args: CustomizeDataItemContainerSectionsEventArgs) => void

Property Value

Type Description
(args: CustomizeDataItemContainerSectionsEventArgs) => void

A function that is executed before the data item menu is rendered.

Remarks

The following code adds a new section to the data item container's menu if the Chart's type is Line. Handle the onCustomizeDataItemContainerSections event and use the CustomizeSectionsEventArgs.addSection method to add a new section.

var Model = DevExpress.Dashboard.Model;

const lineTypeProperty = {
    ownerType: Model.SimpleSeries,
    propertyName: "LineTypeProperty",
    defaultValue: "solid",
    valueType: 'string'
};

Model.registerCustomProperty(lineTypeProperty);
// ...
function onCustomizeDataItemContainerSections(args) {
    var simpleSeries = args.dataItemContainer;
    if (simpleSeries instanceof Model.SimpleSeries
        && ['Line', 'FullStackedLine', 'StackedLine', 'StepLine', 'Spline'].indexOf(simpleSeries.seriesType()) !== -1
    ) {
        args.addSection({
            title: "Line Options (Custom)",
            items: [
                {
                    dataField: lineWidthProperty.propertyName,
                    editorType: "dxNumberBox",
                    lable: {
                        text: 'Line Width'
                    },
                    editorOptions: {
                        showSpinButtons: true,
                        format: '0#',
                        min: 1,
                        max: 10
                    }
                },
                {
                    dataField: lineTypeProperty.propertyName,
                    editorType: "dxSelectBox",
                    label: {
                        text: 'Line style'
                    },
                    editorOptions: {
                        valueExpr: 'value',
                        displayExpr: 'text',
                        dataSource: [
                            { value: 'solid', text: "Solid Line" },
                            { value: 'dash', text: "Dashed Line" },
                            { value: 'dot', text: "Dotted Line" },
                            { value: 'longDash', text: "Long-dashed Line" },
                            { value: 'dashdot', text: "Dash-dotted Line" }
                        ]
                    }
                }
            ]
        });
    }
};