The example shows how to create custom properties for the Web Dasard.
Custom properties are stored in the CustomProperties collection in a structured format. Each custom property in this collection contains the custom property's metadata.
To apply custom property values to a dasard, 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:
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 (dasard, dasard item or data item container). Use the Model.registerCustomProperty property to register the custom property definition.
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.
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.
Event Subscription
This part contains event subscriptions.
To register an extension, attach the extension script before the control is rendered and call the registerExtension method:
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
function onBeforeRender(sender) {
var control = sender.GetDasardControl();
control.registerExtension(new DevExpress.Dasard.DasardPanelExtension(control));
control.registerExtension(new ChartScaleBreaksExtension(control));
control.registerExtension(new ChartLineOptionsExtension(control));
control.registerExtension(new ChartAxisMaxValueExtension(control));
control.registerExtension(new ChartConstantLinesExtension(control));
control.registerExtension(new ItemDescriptionExtension(control));
control.registerExtension(new DasardDescriptionExtension(control));
control.registerExtension(new GridHeaderFilterExtension(control));
}
</script>
<dx:ASPxDasard ID="ASPxDasard1" runat="server" Width="100%" Height="100%" WorkingMode="Viewer" UseNeutralFilterMode="true">
<ClientSideEvents BeforeRender="onBeforeRender" />
</dx:ASPxDasard>
<script src="Content/Extensions/ChartAxisMaxValueExtension.js"></script>
<script src="Content/Extensions/ChartConstantLinesExtension.js"></script>
<script src="Content/Extensions/ChartLineOptionsExtension.js"></script>
<script src="Content/Extensions/ChartScaleBreaksExtension.js"></script>
<script src="Content/Extensions/ItemDescriptionExtension.js"></script>
<script src="Content/Extensions/DasardDescriptionExtension.js"></script>
<script src="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.
This extension enables or disables scale breaks for the Chart dasard item.
Overview:
- Adds a custom Boolean property for a specific dasard item (Chart).
- Integrates a Scale breaks (Custom) section into the Options menu with the dxCheckBox widget as an editor.
This extension changes the dash style of each series line in the Chart dasard item.
Overview:
- Adds a string custom property for a specific data item container (Chart's series).
- Integrates a Line Options (Custom) section into the data item menu with the dxSelectBox widget as an editor.
This extension enables you to set a dasard's description in the dasard menu. The dasard description is displayed when you hover over the info button in the dasard title.
Overview:
- Adds a custom string property for a dasard.
- Shows how to add a new item to the ToolBox. In this example, a new item is added to the dasard menu.
- Demonstrates how to create complex editors using templates. In this example, it is the dxPopup widgets with the dxTextArea and dxButton widgets inside.
This extension enables you to set a description for each dasard item. The dasard item description is displayed when you hover over the info button in the item's caption.
Overview:
- Adds a custom string property for each dasard item.
- Integrates a Description (Custom) section into the Options menu with the predefined buttonGroup template.
- Shows how to enable or disable editors depending on a custom property's value.
This extension allows you to change the maximum value of the Y-axis in the Chart item.
Overview:
- Adds a set of custom properties with different types (number, boolean, and string) for a specific dasard 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.
This extension draws constant lines for the Chart dasard item.
Overview:
- Adds a complex custom property for a specific dasard 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.
This extension adds Header Filter buttons to the Grid dasard item.
Overview:
- Adds a custom property for a specific dasard item (Grid).
- Integrates a Header Filter (Custom) section, which contains the ButtonGroup widget as an editor, into the Options menu.
- ASP.NET MVC Dasard Control - Custom Properties
- ASP.NET Core Dasard Control - Custom Properties
- Dasard Component for Angular - Custom Properties
- WinForms Dasard Designer - Custom Properties
- WPF Dasard Viewer - Custom Properties
- Multiplatform Example - Constant Lines
(you will be redirected to DevExpress.com to submit your response)