Five Radzen Components Every Blazor Developer Should Know

Introduction

Single page applications are the engine of modern web applications. They not only improve the user experience but also save the load on the server making it efficient for both users and developers. Blazor is the modern SPA framework developed by Microsoft that uses WebAssembly for running C# code in the browser. This means any .NET C# developer who is not equipped with Javascript skills can still develop modern SPA applications with the same C# language.

When we are working with SPA frameworks we have good UX available which does some of our job but it is incomplete without a good UI. Creating good UIs can be a cumbersome task for some developers as it requires good command over combination of CSS, HTML, and JS(C# in this case) many times and requires a good amount of testing in different screen sizes with other considerations as well or it can be time-consuming when working on complex components. Good news is when we have a large community of developers (especially open source) we have a rich number of contributions made by them. So, we don’t need to reinvent the wheel every time we are working with SPAs and we get rapid application development done easily.

Let us understand Radzen, it is an open-source UI component library. It has more than 60 components available that can make UI appealing. For Blazor, it is free for commercial use. Its official website is https://blazor.radzen.com/. Paid support is also available if required. You can refer to the website for more details regarding other aspects. In this article, we are going to cover 5 common components that are almost used in every project.

1. Data Grid
2. Panel Menu
3. Popup Dialog
4. Datepicker
5. Tooltip

Setup

This demo has been created using:

1. Visual Studio 2022
2. .NET 6
3. Blazor WebAssembly

Steps

1. First, open Visual Studio 2022. Go to menu File → New → Project → Blazor WebAssembly App → Next → Fill Default Details → Next (untick if ASP.NET Core hosted is selected) → Create. The project that we can see is a totally client side version of Blazor, another option we have is Blazor Server which is .NET hosted. We have not selected that for this demo.
2. Now right click on project → Manage Nuget Packages.. → Click on browse tab and add Radzen.Blazor package for UI components and Bogus for generating fake data.

Import namespaces

Include css and js dependencies.

Now, we have all the dependencies setup. 

Components Demo
 

Data Grid

Datagrid is important when we want to show a list of objects in a tabular way. We expect filtering, sorting, pagination, etc. capabilities when dealing with large amounts of data.

Backend code: Index.razor.cs

public partial class Index: IDisposable {
    public IEnumerable < Vehicle > Vehicles {
        get;
        set;
    }
    RadzenDataGrid < Vehicle > grid;
    public class Vehicle {
        public int Id {
            get;
            set;
        }
        public string Model {
            get;
            set;
        }
        public string Company {
            get;
            set;
        }
    }
    int id = 0;
    public void Initialize() {
        var testVehiclesFaker = new Faker < Vehicle > ().RuleFor(c => c.Id, f => ++id).RuleFor(c => c.Company, f => f.Lorem.Sentence(2)).RuleFor(c => c.Model, f => f.Lorem.Sentence(1));
        Vehicles = testVehiclesFaker.GenerateBetween(1, 20).AsEnumerable();
    }
    protected override void OnInitialized() {
        Initialize();
    }
    public void Dispose() {}
}

UI Code: Index.razor

@page "/" 
<RadzenDataGrid style="height: 335px" @ref="grid" Data="@Vehicles" AllowSorting="true" AllowFiltering="true" AllowPaging="true" PageSize="4" PagerHorizontalAlign="HorizontalAlign.Center" TItem="Vehicle" ColumnWidth="200px">
  <Columns>
    <RadzenDataGridColumn TItem="Vehicle" Property="Id" Width="100px" Filterable="true" Title="ID" Frozen="false" TextAlign="TextAlign.Center" />
    <RadzenDataGridColumn TItem="Vehicle" Property="Model" Width="100px" Filterable="true" Title="Model" Frozen="false" TextAlign="TextAlign.Center" />
    <RadzenDataGridColumn TItem="Vehicle" Property="Company" Width="100px" Filterable="true" Title="Company" Frozen="false" TextAlign="TextAlign.Center" />
  </Columns>
</RadzenDataGrid>

Output

Panel Menu

This is a sidebar menu. 

UI Code

<RadzenPanelMenu>
    <RadzenPanelMenuItem Path="/" Text="Home" Icon="home"></RadzenPanelMenuItem>
    <RadzenPanelMenuItem Path="Counter" Text="Counter" Icon="cookie"></RadzenPanelMenuItem>
    <RadzenPanelMenuItem Path="fetchdata" Text="Fetch data" Icon="https"></RadzenPanelMenuItem>
</RadzenPanelMenu>

Output

Popup Dialog

This is a confirmation dialog, mostly used as an indicator confirmation before proceeding.

Initialize

In Program.cs add AddScoped<DialogService>();

In MainLayout.razor add <RadzenDialog />

UI Code

Create a new TestPopup.razor file and add below code

@page "/popup"
@inject DialogService DialogService
<RadzenButton Text="Test Popup" Click=@(args => DialogService.Confirm("Confirm Action?", "Test Popup", new ConfirmOptions() { OkButtonText = "Yes", CancelButtonText = "No" })) />
@code {
}

Output

Date Picker

This is most common, an appealing datepicker that is highly configurable.

UI Code

@page "/datepicker" 
<h3>TestDatePicker</h3>
<RadzenDatePicker TValue="DateTime" ShowTime="true" TimeOnly="false" ShowSeconds="true" HoursStep="0.5" MinutesStep="1" DateFormat="MM/dd/yy H:mm:ss zzz" SecondsStep="1" />

Output

Tooltip Component

This component is useful when we want to show useful information without taking UI space.

Setup

Similar to dialog we have to register this. 

1. Register the tooltip dependency. Services.AddScoped<TooltipService>();
2. Add the component in MainLayout.razor, <RadzenTooltip />

UI Code

<RadzenButton MouseEnter="@(args =>  tooltipService.Open(args, "This is Tooltip"))" Text="Test Tooltip" />

Output

That’s it! While there are more than 60 components available, we have covered very common ones only. For more details please explore at https://www.radzen.com/documentation/blazor/

Finally, thank you for reading this till the end. If you were doing hands-on along with this demo you must have built some expertise in using Radzen in Blazor. If you missed the hands-on part I have uploaded the final code for your reference. Feel free to explore at your own pace and don’t forget to share your knowledge with us in the comments section.