[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Collapse]eXpressApp Framework
 [Expand]Getting Started
 [Expand]Design-Time Features
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]List Editors
  [Expand]Property Editors
  [Expand]Scheduler and Notifications
  [Expand]Maps Module
  [Collapse]Miscellaneous UI Customizations
    How to: Add a Button to a Detail View Using a Custom View Item
    How to: Add an XAF Mobile Custom Module
    How to: Adjust the Size and Style of Pop-up Dialogs (ASP.NET)
    How to: Adjust the Windows' Size and Style
    How to: Change an Application Logo and Info
    How to: Create a Custom Control Detail Item
    How to: Customize a Window Caption
    How to: Customize ASP.NET Layout Elements Using Custom CSS Classes
    How to: Customize Export Options of the Printing System
    How to: Customize the Conditional Appearance Module Behavior
    How to: Customize Window Status Messages (WinForms)
    How to: Enable High DPI Support in a WinForms Application
    How to: Implement a Custom Messaging Class
    How to: Implement Client-Side Logic in Mobile Applications
    How to: Include an Action to a Detail View Layout
    How to: Raise XAF Callbacks from Client-Side Events and Process these Callbacks on Server
    How to: Set Images and Captions for Enumeration Values
    How to: Show a Custom Window with an Embedded XAF View
    How to: Show a Custom Windows Form
    How to: Use a Custom Plugin in a Mobile Application
    How to: Use a DevExtreme Chart in a Mobile Application
    How to: Use Custom Themes in ASP.NET Applications
  Frequently Asked Questions (FAQ)
 [Expand]API Reference
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How to: Use a DevExtreme Chart in a Mobile Application

XAF allows you to integrate JavaScript widgets into a Mobile application using custom modules. In this topic, a custom List Editor based on a data-bound module is implemented.

Follow the steps below to display ListView records in a line chart using the DevExtreme Chart widget:

  1. Follow the How to: Add an XAF Mobile Custom Module topic's first 4 steps to create a new Mobile custom module, and name it chart. Use this name when you register the module in the MobileApplication.CustomizeApplicationConfig event.
  2. In this example, you can exclude the widget.css file from your module. To do this, open the module's module.json file and modify it as shown below:

  3. Modify the template.html file to create the chart widget:

  4. Create a dxChart control configuration in the widget.js file. Specify the dataSource property and handle the onPointClick event which helps to navigate to a Detail View. In control's ViewModel, transfer properties whose names start with the "control_" substring to the dxChart configuration object. This prefix is used on the server side to specify the chart settings. The following code demonstrates how to do this:

  5. The dxChart widget is not supplied with XAF by default; you should add the viz module that exposes this widget using the MobileApplication.AdditionalDevExtremeModules property as shown below:

  6. In MySolution.Module.Mobile | Editors folder, create the CustomComponent descendant that is used as the chart widget's server-side wrapper and name it Chart. Specify the widget's name in its Type property and provide properties that configure the widget's ViewModel:

  7. In the MySolution.Module | BusinessObjects folder, create a Business Object to be shown in the chart:

  8. In MySolution.Module.Mobile | Editors folder, create the custom MobileChartListEditor List Editor that creates and configures the Chart component. Implement the IViewModelAware interface to supply the ViewModelManager object used to bind data to the Chart control. Use the MobileListEditorsHelper.CreateDataSource extension method to create a data source based on the Collection Source received in IComplexListEditor.Setup and View Model received in the IViewModelAware.Setup extended method.

  9. In the MySolution.Module.Mobile | Controllers folder, create the new CustomizeChartListEditorController that specifies the Chart control settings. In this case, you can specify different settings for one module according to information this module displays.

    In the code above, the encodeHtml method converts a property value to an HTML-encoded string to provide a secure input.

  10. Open the Updater.cs (Updater.vb) file, located in the MySolution.Module project's DatabaseUpdate folder. Add the following code to the ModuleUpdater.UpdateDatabaseAfterUpdateSchema method to supply initial data:

  11. Start the application and navigate to the ChartLineObject List View. The image in the introduction demonstrates the result.

Expanded See Also

Is this topic helpful?​​​​​​​