Syncfusion Feedback
Choose Framework
Controls
  • General
    • Server App Creation
    • WebAssembly App Creation
    • Blazor MAUI App Creation
    • Blazor Playground App
    • Blazor WPF App Creation
    • Blazor Web App Creation
  • Appearance
    • Icons
  • Grids
    • Data Grid
    • Tree Grid
    • Pivot Table
  • Data Visualization
    • Charts
    • 3D Charts
    • Barcode Generator
    • Bullet Chart
    • Circular Gauge
    • Diagram
    • Heatmap Chart
    • Kanban Board
    • Linear Gauge
    • Maps
    • Range Selector
    • Smith Chart
    • Sparkline Charts
    • TreeMap
    • Stock Chart
  • File Viewers & Editors
    • In-Place Editor
    • Rich Text Editor
    • Image Editor
    • Word Processor
    • PDF Viewer
  • Calendars
    • Scheduler
    • Gantt Chart
    • Calendar
    • DatePicker
    • DateRangePicker
    • DateTime Picker
    • TimePicker
  • Buttons
    • Button
  • DropDowns
    • AutoComplete
    • ComboBox
    • DropDownList
    • ListBox
    • MultiSelect Dropdown
    • Mention
    • MultiColumn ComboBox
  • Smart Components
    • Smart Paste Button
    • Smart TextArea
  • Dropdowns
    • Dropdown Tree
  • Inputs
    • Radio Button & Checkbox
    • Color Picker
    • Signature
    • File Upload
    • Input Mask
    • Numeric Textbox
    • Range Slider
    • TextArea
    • TextBox
    • Toggle Switch Button
    • Rating
    • OTP Input
  • Interactive Chat
    • AI AssistView
    • Chat UI
  • Navigation
    • Accordion
    • Breadcrumb
    • Carousel
    • Context Menu
    • File Manager
    • Menu Bar
    • Pager
    • Sidebar
    • Tabs
    • Toolbar
    • TreeView
    • AppBar
    • Stepper
    • Ribbon
  • Layout
    • Card
    • Dashboard
    • Dialog
    • ListView
    • Splitter
    • Timeline
    • Tooltip
    • Media Query
    • Avatar
  • Notifications
    • Message
    • ProgressBar
    • Toast
    • Spinner
    • Skeleton
    • Badge
  • Forms
    • Query Builder UI
    • Data Form
  • Document Processing Libraries
    • Word (DocIO)
    • PDF

Blazor Dashboard - Tutorial Videos

Go Back
thumbnail image

Watch video

Getting Started with the Blazor Dashboard Layout Component

Learn how easily you can create and configure the Syncfusion Blazor Dashboard Layout Component in a Blazor WebAssembly app. This video explains how to create a dashboard layout with multiple panels. You will also see how to configure the structure of the layout using Columns, SizeX, and SizeY properties and how to interact with the dashboard layout dynamically using drag and drop, and resizing features.

Download Example: Getting Started with the Blazor Dashboard Layout

Topics included
1. Introduction 00:00 min
2. Create a Blazor Project 00:45 min
3. Design the Syncfusion Blazor Dashboard Layout 04:28 min
4. Add panel header and panel content 05:10 min
5. Add multiple panels 05:47 min
6. Create columns in the dashboard 07:00 min
7. Setting column and row positions for panels 07:41 min
8. Height and width of the panels 09:18 min
9. UI Interactions like drag and drop, resizing 10:01 min
Plaform: Blazor Show more
thumbnail image

Watch video

Designing a Blazor Dashboard Layout with UI Components

Learn how to add UI components to Syncfusion's Blazor Dashboard Layout component in a Blazor WebAssembly app. This video explains how to arrange cells using the CellSpacing property and customize the look of a dashboard using CssClass. You will also see how to use floating panels and take a look at the other adaptive layout functionalities of the Dashboard Layout component.

Download Example: Designing a Blazor Dashboard Layout with UI Components

Topics included
1. Introduction 00:00 min
2. Designing a sample Dashboard Layout 00:56 min
3. Installing Blazor Charts and DataGrid NuGet packages 04:25 min
4. Adding Blazor spline area chart 05:41 min
5. Data source for Charts and DataGrid components 05:50 min
6. Adding Blazor pie chart 06:40 min
7. Adding Blazor DataGrid 07:41 min
8. CellSpacing 08:37 min
9. Floating 10:05 min
10. Responsive and adaptive layout 10:55 min
Plaform: Blazor Show more
Chat with us