Getting Started with Blazor Timeline in Blazor Web App
10 Oct 20257 minutes to read
This section explains how to integrate the Syncfusion Blazor Timeline component into a Blazor Web App using Visual Studio and Visual Studio Code.
Prerequisites
Create a New Blazor Web App in Visual Studio
Create a Blazor Web App using Visual Studio 2022 via Microsoft Templates or the Syncfusion® Blazor Extension.
Configure the corresponding Interactive render mode and Interactivity location when creating a Blazor Web Application.
Install Syncfusion® Blazor Layouts and Themes NuGet in the App
To add Blazor Timeline component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install Syncfusion.Blazor.Layouts and Syncfusion.Blazor.Themes.
If WebAssembly or Auto
render modes are utilized in the Blazor Web App need to be install Syncfusion® Blazor component NuGet packages are installed within the client project.
Alternatively, the Package Manager Console can be used to install the required NuGet package
Install-Package Syncfusion.Blazor.Layouts -Version 31.2.2
Install-Package Syncfusion.Blazor.Themes -Version 31.2.2
NOTE
Syncfusion® Blazor components are available in nuget.org. Refer to NuGet packages topic for available NuGet packages list with component details.
Prerequisites
Create a New Blazor Web App in Visual Studio Code
A Blazor Web App can be created using Visual Studio Code via Microsoft Templates or the Syncfusion® Blazor Extension.
Configure the corresponding Interactive render mode and Interactivity location when creating a Blazor Web Application.
For example, in a Blazor Web App with the Auto
interactive render mode, use the following commands.
dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.Client
NOTE
For more information on creating a Blazor Web App with various interactive modes and locations, refer to this link.
Install Syncfusion® Blazor Layouts and Themes NuGet in the App
If WebAssembly
or Auto
render modes are utilized in the Blazor Web App, install Syncfusion® Blazor component NuGet packages within the client project.
- Press Ctrl+` to open the integrated terminal in Visual Studio Code.
- Ensure the project root directory where the
.csproj
file is located is the current directory. - Run the following command to install a Syncfusion.Blazor.Layouts and Syncfusion.Blazor.Themes NuGet package and ensure all dependencies are installed.
dotnet add package Syncfusion.Blazor.Layouts -v 31.2.2
dotnet add package Syncfusion.Blazor.Themes -v 31.2.2
dotnet restore
NOTE
Syncfusion® Blazor components are available in nuget.org. Refer to NuGet packages topic for available NuGet packages list with component details.
Register Syncfusion® Blazor Service
Interactive Render Mode | Description |
---|---|
WebAssembly or Auto | Open ~/_Imports.razor file from the client project. |
Server | Open ~/_import.razor file, which is located in the Components folder. |
Import the Syncfusion.Blazor
and Syncfusion.Blazor.Layouts
namespace.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Layouts
Now, register the Syncfusion® Blazor Service in the ~/Program.cs file of the Blazor Web App.
If the Interactive Render Mode is set to WebAssembly
or Auto
, register the Syncfusion® Blazor service in both ~/Program.cs files (server
and client
projects) of the Blazor Web App.
...
...
using Syncfusion.Blazor;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents()
.AddInteractiveWebAssemblyComponents();
builder.Services.AddSyncfusionBlazor();
var app = builder.Build();
....
...
using Syncfusion.Blazor;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();
If the Interactive Render Mode is set to Server
, Register the Syncfusion® Blazor Service only in the server-side ~/Program.cs file.
...
using Syncfusion.Blazor;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
builder.Services.AddSyncfusionBlazor();
var app = builder.Build();
....
Add Stylesheet and Script Resources
The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet reference in the <head>
section and the script reference at the end of the <body>
in the ~/Components/App.razor file as shown below:
<head>
....
<link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />
</head>
<body>
....
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>
NOTE
Review the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in a Blazor application. Also, review the Adding Script Reference topic for different approaches to adding script references in a Blazor application.
Add Syncfusion® Blazor Timeline component
Add the Syncfusion® Blazor Timeline component in the ~Pages/.razor file. If an interactivity location as Per page/component
in the web app, define a render mode at the top of the ~Pages/.razor
component, as follows:
Interactivity location | RenderMode | Code |
---|---|---|
Per page/component | Auto | @rendermode InteractiveAuto |
WebAssembly | @rendermode InteractiveWebAssembly | |
Server | @rendermode InteractiveServer | |
None | — |
NOTE
If an Interactivity Location is set to
Global
and the Render Mode is set toAuto
orWebAssembly
orServer
, the render mode is configured in theApp.razor
file by default.
@* desired render mode define here *@
@rendermode InteractiveAuto
@using Syncfusion.Blazor.Layouts
<div style="height: 250px;">
<SfTimeline>
<TimelineItems>
<TimelineItem></TimelineItem>
<TimelineItem></TimelineItem>
<TimelineItem></TimelineItem>
<TimelineItem></TimelineItem>
</TimelineItems>
</SfTimeline>
</div>
- Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Timeline component in the default web browser.
