Overview of Radzen Blazor
A brief introduction to Radzon Blazor with a demo project
Radzen Blazor is a Rapid Application Development toolset tailored for building web applications using Blazor within the ASP.NET Core framework. Radzen Blazor Studio streamlines the process of creating Blazor applications by offering a rich set of features, including a visual designer, a code editor, and integration with various data sources. Radzen serves as a development tool, while Blazor is a Microsoft framework for crafting interactive web UIs using C# and .NET. Together, they combine the strengths of Blazor with Radzen’s visual design capabilities.
Why choose Radzen Blazor?
Rapid Application Development (RAD): Radzen Blazor accelerates the development process with its visual design environment, enabling drag-and-drop creation of UI components, forms, and CRUD operations. This visual approach is ideal for developers who prefer a hands-on, intuitive design experience, similar to Visual Studio’s designer for WinForms or WPF.
Blazor integration: Radzen is specifically tailored to work seamlessly with Blazor, providing templates, themes, and UI components compatible with both Blazor WebAssembly and server-side Blazor. This ensures a consistent look and feel across applications while supporting cross-platform compatibility.
Code generation and customization: Radzen automatically generates clean and maintainable code, reducing boilerplate and simplifying data integration. The platform also supports customization, allowing developers to integrate custom Blazor components and third-party libraries to meet specific project needs.
Built-in features: Radzen offers built-in support for authorization, authentication, and data binding with various data sources, making it a comprehensive solution for developing both small and large-scale applications.
Scalability and modularity: With support for a modular architecture, Radzen Blazor facilitates scalable code management, making it suitable for projects of any size.
Deployment and support: Radzen supports deployment to environments like Azure and Docker, with built-in deployment profiles for a streamlined process. Additionally, the active Radzen community provides valuable support and knowledge sharing.
Productivity enhancements: By providing tools and components that streamline development, Radzen enhances productivity and simplifies UI development even for developers with minimal coding experience.
Key features
- Seamless integration with Blazor, leveraging its capabilities for building rich web applications using C# and .NET.
- Includes pre-built components such as grids, charts, forms, menus, dialog, and more.
- Enables filtering, sorting, paging, and grouping operations.
- Allows the use of custom CSS and various customization options for styling.
- Supports localization for different languages and cultures.
- Designed with responsive components that adapt to different screen sizes.
- Provides built-in and custom validation logic.
- Includes event handling support for user interactions.
- Offers both one-way and two-way data binding.
Using Radzon Blazor in a project
To add the package, run the following command:
dotnet add package Radzen.Blazor
Alternatively, manually edit the .csproj file of your application and include a project reference:
<PackageReference Include="Radzen.Blazor" Version="3.9.10" />.Building a sample application:
- Setting up Radzen Blazor
Import Radzen components: Add the following to the _Imports.razor file:
@using Radzen
@using Radzen.BlazorConfigure services: Register Radzen services in Program.cs:
builder.Services.AddScoped<DialogService>();
builder.Services.AddScoped<NotificationService>();
builder.Services.AddScoped<TooltipService>();
builder.Services.AddScoped<ContextMenuService>()Include Radzen styles:
Add the Radzen CSS in wwwroot/index.html (for Blazor WebAssembly) or Pages/_Host.cshtml (for Blazor Server):
<link href="_content/Radzen.Blazor/css/default-base.css" rel="stylesheet" />- Building a sample application
Create the data model
Create a folder named Models and add a class Employee.cs:
namespace RadzenBlazorSample.Models
{
public class Employee
{
public int Id {get; set; }
public string Name {get; set;}
public string Position {get; set;}
public decimal Salary {get; set;}
} Sample data
In the wwwroot/sample-data folder, create employees.json:
[{"Id": 1, "Name": "John Doe", "Position": "CEO", "Salary": 100000},
{"Id": 2, "Name": "Jane Smith", "Position": "CTO", "Salary": 90000},
{"Id": 3, "Name": "Samuel Green", "Position": "Developer", "Salary": 80000},
{"Id": 4, "Name": "Nina Brown", "Position": "Designer", "Salary": 70000}
] Create the main page with DataGrid
In the Pages folder, create Employees.razor:
@page "/employees"
@inject HttpClient Http
@inject DialogService DialogService
@inject NotificationService NotificationService
<RadzenGrid @ref="grid" Data="@employees" TItem="Employee" ColumnWidth="200px" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
<Columns>
<RadzenGridColumn TItem="Employee" Property="Id" Title="ID" />
<RadzenGridColumn TItem="Employee" Property="Name" Title="Name" />
<RadzenGridColumn TItem="Employee" Property="Position" Title="Position" />
<RadzenGridColumn TItem="Employee" Property="Salary" Title="Salary" />
<RadzenGridColumn TItem="Employee" Title="Actions">
<Template>
<RadzenButton Text="Edit" Click="@(args => EditEmployee((Employee)args))" />
<RadzenButton Text="Delete" Click="@(args => DeleteEmployee((Employee)args))" ButtonStyle="ButtonStyle.Danger" />
</Template>
</RadzenGridColumn>
</Columns>
</RadzenGrid>
<RadzenButton Text="Add New Employee" Click="AddNewEmployee" />
@code {
RadzenGrid<Employee> grid;
List<Employee> employees;
protected override async Task OnInitializedAsync()
{
employees = await Http.GetFromJsonAsync<List<Employee>>("sample-data/employees.json");
}
void AddNewEmployee()
{
DialogService.Open<EditEmployeeDialog>("Add New Employee", new Dictionary<string, object> { { "Employee", new Employee() } });
}
void EditEmployee(Employee employee)
{
DialogService.Open<EditEmployeeDialog>("Edit Employee", new Dictionary<string, object> { { "Employee", employee } });
}
void DeleteEmployee(Employee employee)
{
employees.Remove(employee);
NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Info, Summary = "Success", Detail = $"Deleted employee {employee.Name}" });
}
}Create the Edit Employee Dialog
In the Pages folder, create EditEmployeeDialog.razor:
@page "/edit-employee"
@inject DialogService DialogService
@inject NotificationService NotificationService
<RadzenDialog>
<RadzenTemplateForm Data="@Employee" TItem="Employee" Submit="Save">
<RadzenTextBox @bind-Value="Employee.Name" Name="Name" Placeholder="Name" />
<RadzenTextBox @bind-Value="Employee.Position" Name="Position" Placeholder="Position" />
<RadzenDecimal @bind-Value="Employee.Salary" Name="Salary" Placeholder="Salary" />
<RadzenButton ButtonType="ButtonType.Submit" Text="Save" />
</RadzenTemplateForm>
</RadzenDialog>
@code {
[Parameter] public Employee Employee { get; set; }
void Save()
{
DialogService.Close(Employee);
NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Success, Summary = "Success", Detail = $"Saved employee {Employee.Name}" });
}
}Running the application
- Press F5 to build and run your application. Navigate to /employees to see the DataGrid with sample employee data. Use the “Add New Employee” button to open the dialog for adding a new employee. Use the “Edit” and “Delete” buttons to manage employee data.
Advanced customization
Radzen Blazor offers extensive customization options, enabling developers to tailor UI components to specific requirements. This includes custom styling, templates, events, and custom components.
1. Custom styling
Using CSS
Custom CSS can be used to style Radzen Blazor components. You can create a custom CSS file and apply styles to Radzen components and modify them.
- Create a custom CSS file, e.g., custom.css, in the wwwroot/css folder:
.custom-button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
.custom-grid {
font-family: Arial, sans-serif;
font-size: 14px;
} - Include the custom CSS file in your index.html:
<link href=”css/custom.css” rel=”stylesheet” />
Apply the custom styles to Radzen components:
@page "/custom-style"
@inject HttpClient Http
<RadzenButton Text="Custom Styled Button" class="custom-button" Click="OnClick" />
<RadzenGrid @ref="grid" Data="@employees" TItem="Employee" class="custom-grid">
<Columns>
<RadzenGridColumn TItem="Employee" Property="Id" Title="ID" />
<RadzenGridColumn TItem="Employee" Property="Name" Title="Name" />
<RadzenGridColumn TItem="Employee" Property="Position" Title="Position" />
<RadzenGridColumn TItem="Employee" Property="Salary" Title="Salary" />
</Columns>
</RadzenGrid>
@code {
RadzenGrid<Employee> grid;
List<Employee> employees;
protected override async Task OnInitializedAsync()
{
employees = await Http.GetFromJsonAsync<List<Employee>>("sample-data/employees.json");
}
void OnClick()
{
Console.WriteLine("Button clicked!");
}
}2. Using templates
- Custom cell templates: Radzen DataGrid supports custom templates for columns, which allows you to define custom content for each cell.
@page "/custom-templates"
@inject HttpClient Http
<RadzenGrid @ref="grid" Data="@employees" TItem="Employee">
<Columns>
<RadzenGridColumn TItem="Employee" Property="Id" Title="ID" />
<RadzenGridColumn TItem="Employee" Title="Name">
<Template Context="employee">
<RadzenTextBox @bind-Value="employee.Name" Style="width:100%" />
</Template>
</RadzenGridColumn>
<RadzenGridColumn TItem="Employee" Title="Actions">
<Template Context="employee">
<RadzenButton Text="Edit" Click="@(() => EditEmployee(employee))" />
<RadzenButton Text="Delete" Click="@(() => DeleteEmployee(employee))" ButtonStyle="ButtonStyle.Danger" />
</Template>
</RadzenGridColumn>
</Columns>
</RadzenGrid>
@code {
RadzenGrid<Employee> grid;
List<Employee> employees;
protected override async Task OnInitializedAsync()
{
employees = await Http.GetFromJsonAsync<List<Employee>>("sample-data/employees.json");
}
void EditEmployee(Employee employee)
{
Console.WriteLine($"Editing employee {employee.Name}");
}
void DeleteEmployee(Employee employee)
{
employees.Remove(employee);
}
}3. Handling events
Radzen components provide various events that can be used to handle user interactions and customize behavior.
@page "/custom-events"
@inject HttpClient Http
<RadzenGrid @ref="grid" Data="@employees" TItem="Employee" RowSelect="OnRowSelect">
<Columns>
<RadzenGridColumn TItem="Employee" Property="Id" Title="ID" />
<RadzenGridColumn TItem="Employee" Property="Name" Title="Name" />
<RadzenGridColumn TItem="Employee" Property="Position" Title="Position" />
<RadzenGridColumn TItem="Employee" Property="Salary" Title="Salary" />
</Columns>
</RadzenGrid>
<RadzenButton Text="Show Selected Employee" Click="ShowSelectedEmployee" />
@code {
RadzenGrid<Employee> grid;
List<Employee> employees;
Employee selectedEmployee;
protected override async Task OnInitializedAsync()
{
employees = await Http.GetFromJsonAsync<List<Employee>>("sample-data/employees.json");
}
void OnRowSelect(Employee employee)
{
selectedEmployee = employee;
Console.WriteLine($"Selected employee: {employee.Name}");
}
void ShowSelectedEmployee()
{
if (selectedEmployee != null)
{
Console.WriteLine($"Showing details for: {selectedEmployee.Name}");
}
else
{
Console.WriteLine("No employee selected.");
}
}
}Git URL :
https://github.com/dotnet-simformsolutions/radzen-datagrid-control
Conclusion
Radzen Blazor simplifies Blazor application development with its comprehensive set of UI controls and features, allowing for the creation of highly tailored and interactive web applications. By leveraging custom styles, templates, events, and custom components, you can enhance the user experience and meet specific project requirements. Utilizing Radzen’s DataGrid, dialogs, and other components enables the quick development of interactive and feature-rich web applications.
For more updates on the latest tools and technologies, follow the Simform Engineering blog.
