Repository files navigation

The example shows how to createcustom properties for the Web Dashboard.

• Extensions
• Default.aspx

Custom properties are stored in theCustomProperties collection in a structured format. Each custom property in this collection contains the custom property's metadata.

To apply custom property values to a dashboard, you need to create an extension. The extension is a JavaScript module that you can integrate into your application. Every extension that provides custom property can be divided into the following parts:

1. Model

   The model is an object that contains the property name, type, and default value. It also specifies on which level the property is created (dashboard, dashboard item or data item container). Use theModel.registerCustomProperty property to register the custom property definition.

2. Viewer

   In this part you modify the viewer part according to the saved custom property value. You can use the client methods and events to change the displayed elements.

3. Designer

   This part contains designer settings. Add editors and control elements to configure and change the custom property's values in the UI. This part is not required if you use the extension in Viewer mode.

4. Event Subscription

   This part contains event subscriptions.

To register an extension, attach the extension script before the control is rendered and call theregisterExtension method:

<asp:ContentID="Content1"ContentPlaceHolderID="MainContent"runat="server">    <scripttype="text/javascript">functiononBeforeRender(sender) {var control=sender.GetDashboardControl();control.registerExtension(newDevExpress.Dashboard.DashboardPanelExtension(control));control.registerExtension(newChartScaleBreaksExtension(control));control.registerExtension(newChartLineOptionsExtension(control));control.registerExtension(newChartAxisMaxValueExtension(control));control.registerExtension(newChartConstantLinesExtension(control));control.registerExtension(newItemDescriptionExtension(control));control.registerExtension(newDashboardDescriptionExtension(control));control.registerExtension(newGridHeaderFilterExtension(control));        }</script>    <dx:ASPxDashboardID="ASPxDashboard1"runat="server"Width="100%"Height="100%"WorkingMode="Viewer"UseNeutralFilterMode="true">        <ClientSideEventsBeforeRender="onBeforeRender" />    </dx:ASPxDashboard>    <scriptsrc="Content/Extensions/ChartAxisMaxValueExtension.js"></script>    <scriptsrc="Content/Extensions/ChartConstantLinesExtension.js"></script>    <scriptsrc="Content/Extensions/ChartLineOptionsExtension.js"></script>    <scriptsrc="Content/Extensions/ChartScaleBreaksExtension.js"></script>    <scriptsrc="Content/Extensions/ItemDescriptionExtension.js"></script>    <scriptsrc="Content/Extensions/DashboardDescriptionExtension.js"></script>    <scriptsrc="Content/Extensions/GridHeaderFilterExtension.js"></script></asp:Content>

The following example contains a set of custom properties that demonstrate different capabilities. Below you find a detailed description for every extension.

View Extension

This extension enables or disables scale breaks for the Chart dashboard item.

Overview:

• Adds a custom Boolean property for a specific dashboard item (Chart).
• Integrates aScale breaks (Custom) section into theOptions menu with thedxCheckBox widget as an editor.

View Extension

This extension changes the dash style of each series line in the Chart dashboard item.

Overview:

• Adds a string custom property for a specific data item container (Chart's series).
• Integrates aLine Options (Custom) section into the data item menu with thedxSelectBox widget as an editor.

View Extension

This extension enables you to set a dashboard's description in the dashboard menu. The dashboard description is displayed when you hover over the info button in the dashboard title.

Overview:

• Adds a custom string property for a dashboard.
• Shows how to add a new item to theToolBox. In this example, a new item is added to thedashboard menu.
• Demonstrates how to create complex editors using templates. In this example, it is thedxPopup widgets with thedxTextArea anddxButton widgets inside.

View Extension

This extension enables you to set a description for each dashboard item. The dashboard item description is displayed when you hover over the info button in the item's caption.

Overview:

• Adds a custom string property for each dashboard item.
• Integrates aDescription (Custom) section into theOptions menu with the predefinedbuttonGroup template.
• Shows how to enable or disable editors depending on a custom property's value.

View Extension

This extension allows you to change the maximum value of the Y-axis in the Chart item.

Overview:

• Adds a set of custom properties withdifferent types (number, boolean, and string) for a specific dashboard item (Chart).
• Demonstrates how to bind a custom property to a list of data items.
• Shows how to enable or disable editors depending on a custom property's value.

View Extension

This extension draws constant lines for the Chart dashboard item.

Overview:

• Adds a complex custom property for a specific dashboard item (Chart).
• Shows how to work with complex custom values that are saved as an array.
• Demonstrates how to bind a custom property to a list of data items.
• Customizes export to display the result in the exported document.

View Extension

This extension adds Header Filter buttons to the Grid dashboard item.

Overview:

• Adds a custom property for a specific dashboard item (Grid).
• Integrates aHeader Filter (Custom) section, which contains theButtonGroup widget as an editor, into theOptions menu.

• Client-Side Customization
• Custom properties

• ASP.NET MVC Dashboard Control - Custom Properties
• ASP.NET Core Dashboard Control - Custom Properties
• Dashboard Component for Angular - Custom Properties
• WinForms Dashboard Designer - Custom Properties
• WPF Dashboard Viewer - Custom Properties
• Multiplatform Example - Constant Lines

(you will be redirected to DevExpress.com to submit your response)