How to display the dxChart widget in an XAF ASP.NET WebForms view

This example illustrates how to show a chart control with many points. The built-in Charts module draws all points on the same screen at once, and this can affect readability. To improve usability, you can implement real-time zooming and scrolling, for example, the dxChart widget from the DevExtreme library. This example shows how to use this widget in an XAF application.

Implementation Details

The approach used in this example is based on the technique of displaying a custom data bound control. The example demonstrates how to use this technique with client-side components that do not have server-side implementation.

1. Register client libraries. For details, refer to the corresponding section of the How to use DevExtreme Widgets in an XAF application Knowledge Base article.

2. Create the content. In the YourSolutionName.Web project, create a custom ASP.NET user control (*.ascx) and add ASPxPanel to it that acts as the container for DevExtreme widgets. It is convenient to keep client-side scripts in a separate file. Add a JavaScript file and declare the createWidgets function in it. Implement this function using the approach described in the following topic: Zooming and Panning.

   window.DxSample = window.DxSample || {};
   window.DxSample.OrdersChart = {
       createWidgets: function (panel) {
   	var $mainElement = $(panel.GetMainElement());
   		$mainElement.dxChart({..});
       }
   };

   Using the client-side Init event of the ASPxPanel component, call the createWidgets function and pass the first event argument as this function parameter.

3. Register your JavaScript files. In code behind for your user control (e.g., YourSolutionName.Web/YourUserControlName.ascx.xx file), handle the UserControl.Load event and call the WebWindow.RegisterClientScriptInclude method to include your JavaScript file into the web page.

4. Load data and pass it to the client side. To supply data for client-side widgets, use the approach described in the following article: Passing Values Between Client and Server Sides. For this purpose, implement the IComplexControl interface in your UserControl class. Within the IComplexControl.Setup method, load data from the database, convert it to an array of plain objects, and add it to the JSProperties dictionary.

5. Add your user control to the Application Model using the approach demonstrated in the following article: How to: Show a Custom Data-Bound Control in an XAF View (ASP.NET Web Forms).

Files to Review

• OrdersChart.ascx
• OrdersChart.ascx.cs
• orders-chart.js

Documentation

• How to use DevExtreme Widgets in an XAF application
• Passing Values Between Client and Server Sides
• How to: Show a Custom Data-Bound Control in an XAF View (ASP.NET Web Forms)