Dashboard Component for Blazor

v21.1 will include a new DevExpress Dashboard Component for Blazor (CTP). This new Dashboard component works with hosted Blazor WebAssembly and Blazor Server hosting models. Technically, DxDashboard wraps our JavaScript DashboardControl and requires an ASP.NET Core backend with the Dashboard Controller to handle client data requests. Our implementation will allow you to migrate your existing Web Dashboard applications to the Blazor platform in the shortest possible time. The Dashboard Component for Blazor will be available as a Community Tech Preview. We expect to officially release this product at year’s end (once we’ve collected feedback and refined our implementation).

Since DxDashboard supports Razor syntax, you can configure most options via Razor markup (this should allow you to design and view dashboards in your Blazor application much faster). You can also use two-way data binding to switch between working modes and dashboards.

@using DevExpress.DashboardBlazor
@using DevExpress.DashboardWeb

<button id="workingModeSwitcher" @onclick="ChangeWorkingMode">
    @ButtonText
</button>

<DxDashboard Endpoint="@endpoint" @bind-WorkingMode="@workingMode" @DashboardId="@DashboardIdValue">
    <DxBackendOptions RequestHttpHeaders="@headers"></DxBackendOptions>
    <DxExtensions>
        <DxDataInspector AllowInspectAggregatedData="true" AllowInspectRawData="true"></DxDataInspector>
    </DxExtensions>
</DxDashboard>

@code {
    string endpoint = "api/dashboard";
    string DashboardIdValue = "companies";
    WorkingMode workingMode = WorkingMode.Designer;    

    public Dictionary<string, string> headers = new Dictionary<string, string>() { { "Auth", "AuthKey" } };

    public void ChangeWorkingMode() {
        workingMode = workingMode == WorkingMode.Designer ? WorkingMode.Viewer : WorkingMode.Designer;
    }

    public string ButtonText {
        get {
            string value = workingMode == WorkingMode.Designer ? "Viewer" : "Designer";
            string mode = "Switch to " + value;
            return mode;
        }
    }
}

For advanced customization scenarios, you can use our JavaScript API to fine-tune the Web Dashboard as needed. Since the underlying DashboardControl API is accessible, you can reuse customization scripts (like custom items and custom properties) from your existing Web applications.

We’ve created two Getting Started tutorials (for Blazor WebAssembly Hosted and Blazor Server) and a couple of examples to help you get started with DevExpress Dashboard for Blazor:

• Documentation - Create a Blazor WebAssembly Dashboard Application
• Documentation - Create a Blazor Server Dashboard Application
• Example - Dashboard Component in Blazor WebAssembly Application
• Example - Dashboard Component in Blazor Server Application

We also published a demo application that uses the Blazor Server hosting model: Dashboard for Blazor

If you expect to use DevExpress Dashboard for Blazor, please share your thoughts/needs/expectations below. Tell us why you are considering Blazor and detail how we can improve our implementation to better serve your business needs moving forward. If you have a technical question, please submit a support ticket via the DevExpress Support Center. We’ll be happy to follow-up.

Free DevExpress Products - Get Your Copy Today