Blazor Dashboard - A Dynamic and Adaptive Layout Component

Overview

Blazor Dashboard is a grid-structured layout component that helps create static and dynamic dashboard layouts with panels. Dashboard panels are the basic building blocks of a dashboard and can be added programmatically or dynamically at runtime. The panels hold UI components and allow resizing, reordering, dragging and dropping, removing, and adding. Easily place components at the desired positions within the grid layout.

Blazor Dashboard Code Example

Easily get started with the Blazor Dashboard using a few simple lines of C# code example, as demonstrated below. Also, explore our Blazor Dashboard Example, that shows you how to render and configure the Dashboard component in Blazor.

Edit in Blazor Playground

@using Syncfusion.Blazor.Layouts

<SfDashboardLayout>
<DashboardLayoutPanels>
    <DashboardLayoutPanel>
        <HeaderTemplate><div>Panel 1</div></HeaderTemplate>
        <ContentTemplate><div>Content</div></ContentTemplate>
    </DashboardLayoutPanel>
</DashboardLayoutPanels>
</SfDashboardLayout>

<style>
.e-panel-header {
    background-color: rgba(0, 0, 0, .1);
    text-align: center;
}
.e-panel-content {
    text-align: center;
    margin-top: 10px;
}
</style>

Dynamic layout design

The Blazor Dashboard Layout component allows dynamic designing of the layout by adding, removing, resizing, floating, and reordering the panels within the layout.

Placing components as content

Place any HTML content or HTML UI components like Grid, Charts, Gauge, Maps, etc. to represent the metrics or KPI as panel content inside the dashboards.