Scenario:
It is necessary to show a chart control with a lot of points. The built-in Charts module draws all points on the same screen at once, which may be inconvenient for an end-user. To achieve better usability, it is possible to implement real-time zooming and scrolling capabilities.
The dxChart widget from the DevExtreme library perfectly fits this scenario. This example demonstrates how to utilize this widget in an XAF application.
Steps to implement:
The approach used in this example is based on the well-known technique of displaying a custom data bound control described in our online documentation: How to: Show a Custom Data-Bound Control in an XAF View (ASP.NET). The example demonstrates how to use this technique with client-side components that do not have server-side implementation. Refer to the following Knowledge Base article for more details and concepts: How to use DevExtreme Widgets in an XAF application.
1. Register client libraries.
Since you need to control the order of referenced client libraries, it is necessary to disable automatic embedding of them using the dedicated option in the application configuration file. This option and the list of client libraries required by our ASP.NET controls are described in our online documentation: Embedding Required Client Libraries.
Disable the embedRequiredClientLibraries option in the YourSolutionName.Web/Web.config file and add required client libraries to the YourSolutionName.Web project using the following commands in the NuGet Package Manager console: Install-Package jQuery.Validation.Unobtrusive Install-Package Microsoft.jQuery.Unobtrusive.Ajax Install-Package ChartJS Install-Package jQuery -Version 1.10.0 Library files will be installed into the Scripts and Content directories. Register the required script files in the <head> element of the YourSolutionName.Web/Default.aspx file.
[HTML]<linkrel="stylesheet"type="text/css"href="Content/dx.common.css"/><linkrel="stylesheet"type="text/css"href="Content/dx.light.css"/><scripttype="text/javascript"src="Scripts/jquery-1.11.3.min.js"></script><scripttype="text/javascript"src="Scripts/jquery.validate.min.js"></script><scripttype="text/javascript"src="Scripts/jquery.validate.unobtrusive.min.js"></script><scripttype="text/javascript"src="Scripts/jquery.unobtrusive-ajax.min.js"></script><scripttype="text/javascript"src="Scripts/globalize/globalize.js"></script><scripttype="text/javascript"src="Scripts/dx.webappjs.js"></script><scripttype="text/javascript"src="Scripts/dx.chartjs.js"></script>
2. Create content.
In the YourSolutionName.Web project, create a custom ASP.NET User Control (*.ascx) and add ASPxPanel to it. This panel will be a 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 Zooming and Scrolling article.
[JScript]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 passing the first event argument as a parameter.
3. Register your JavaScript files.
In code behind for your UserControl (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 provide data for client-side widgets, use the approach described in the following article: How to: Access Server Data on the Client Side. For this purpose, implement the IComplexControl interface in your UserControl class. Within the IComplexControl.Setup method, load data from the database, convert it into an array of plain objects (you can use anonymous types in C# and VB.NET for this purpose), and add it to the JSProperties dictionary.