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:

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.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
CRM-af37b6eb-e5b7-4079-b62e-e3a9ae8d8104
Customer175842
More Native Blazor Components...
22 April 2021
ASPMVCNewbie
ASPMVCNewbie
More of everything :)
22 April 2021
AlexanderCPunkt
Alexander C. (Co-Orga GmbH)
We will try it, good work!
22 April 2021
Peter Jevtic
Peter Jevtic

This is great, I was just about to start playing with it in my app! Perfect timimg!


As for making things easier ... this is awesome!


I am looking forward to seeing what the new features are of the DataGrid... 


As always, a very impressive effort!





24 April 2021
Istvan Kardkovacs
Istvan Kardkovacs

Prerequisites

  • DevExpress Universal Subscription
  • v21.1


    Does this mean that this Blazor component is not included in the Blazor subscription?

    25 April 2021
    Peter Jevtic
    Peter Jevtic

    @Istvan


    Yes, that is correct, you need to have access to the Dashboard components in general. 

    26 April 2021
    Alex (DevExpress Support)
    Alex (DevExpress)

    @Istvan,
    Our new Dashboard Component for Blazor is a part of the Business Intelligence Dashboard product that is available to Universal subscribers only. So, yes, this component is not included in the Blazor UI Components suite.

    26 April 2021
    Stephen Winstanley_2
    Stephen Winstanley_2
    Looks great, more Blazor components please
    30 April 2021
    Vladislav Kiselev
    Vladislav Kiselev
    Not native, therefore looks useless
    9 May 2021

    Please login or register to post comments.