[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]Reporting
[Expand]Report and Dashboard Server
[Collapse]Dashboard
 [Expand]Getting Started
 [Expand]Basic Concepts and Terminology
 [Expand]Common Features
 [Collapse]Creating the Designer and Viewer Applications
  [Expand]WinForms Designer
  [Expand]WinForms Viewer
  [Collapse]Web Dashboard
    Web Dashboard Technical Overview
    Supported Browsers
    Required Client Libraries
   [Expand]ASP.NET Web Forms Dashboard Control
   [Expand]ASP.NET MVC Dashboard Extension
   [Expand]ASP.NET Core Dashboard Control
   [Collapse]HTML JavaScript Dashboard Control
     Client-Side Configuration (Modular Approach)
     Client-Side Configuration (Global Namespaces)
     Server-Side Configuration (ASP.NET MVC)
     Server-Side Configuration (ASP.NET Core)
     Client-Side Customization
     Designer and Viewer Modes
     Appearance Customization
    [Expand]Extend Web Dashboard Functionality
    [Expand]Create a Custom Item
    Mobile Layout
   [Expand]Error Logging
    Security Considerations
    Microsoft Azure Specifics
   [Expand]UI Elements
  [Expand]WPF Viewer
  [Expand]Web Viewer
 [Expand]Creating Dashboards
 [Expand]Visual Studio Integration
  End-User Documentation
  Localization
 [Expand]Redistribution and Deployment
  Video Tutorials
 [Expand]Examples
 [Expand]Member Tables
 [Expand]API Reference
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

HTML JavaScript Dashboard Control

Topics in this section describe how to configure the client-side JavaScript Dashboard control and integrate it to the web application.

You can create a web application with the HTML JavaScript dashboard using one of the following approaches:

  • Global Namespaces

    When you use this approach, the HTML JavaSCript Dashboard control comes in a pre-assembled dx-dashboard.js bundle. You need to get the scripts and dependencies from the npm package and manually add them to the page.

  • Modularity

    Alternatively, you can use Dashboard modules to import only the functionality you require. HTML JavaScript Dashboard use the following modules: Dashboard, Dashboard.Data, Dashboard.Designer, and Dashboard.Model. Unlike the global namespaces, modules are compact and can be loaded on demand. In this approach, scripts and dependencies are installed automatically from the npm package.

Both approaches are based on the client-server model. You need to create a server (backend) project and a client (frontend) part that includes all the necessary styles, scripts and HTML-templates.

Basic Configuration

The topics below shows how to configure the HTML JavaScript control as a client (frontend) application and how to create and configure a server (backend) project.

Customization

Shows how to customize the HTML JavaScript dashboard on the client side.

Describes how to specify the Web Dashboard's mode.

Describes how to change the color scheme used to paint a Web Dashboard.

Shows how to extend the control's functionality using independent JavaScript modules/classes called extensions.

Contains tutorials that teach you how to create a custom dashboard item.

Expanded See Also

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