Datalist control in Radzen Blazor (Part5)

Datalist is one of most useful controls for creating image gallery and product details screen. If we use Datalist controls, then it will save lots of our development time. It has inbuilt paging functionalities.

Before using this code, please configure your project for Radzen Controls like this

@page "/datalist"
@using RadzenTest.Shared
@inject HttpClient Http
<h3>RadzenDataList Demo</h3>
   <Template Context="WeatherForecast">
      <div class="container mt-3 border border-5">
         <b>Temp Details</b>
         <div class="row">
            <div class="col">Date: </div>
            <div class="col">@WeatherForecast.Date </div>
         <div class="row">
            <div class="col">TemperatureC: </div>
            <div class="col">@WeatherForecast.TemperatureC </div>
         <div class="row">
            <div class="col">Summary: </div>
            <div class="col">@WeatherForecast.Summary </div>
         <div class="row">
            <div class="col">TemperatureF: </div>
            <div class="col">@WeatherForecast.TemperatureF </div>
@code {
private WeatherForecast[]? forecasts;
protected override async Task OnInitializedAsync()
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");

Summary: In the above demo, we saw that how to use datalist control in Blazor.

Source code on Github:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.