Chandradev's Blog

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

https://chandradev819.com/2022/09/28/getting-started-with-radzen-blazor-controls/

@page "/datalist"
@using RadzenTest.Shared
@inject HttpClient Http
<h3>RadzenDataList Demo</h3>
<RadzenDataList 
   WrapItems="true" 
   AllowPaging="true" 
   PageSize="2" 
   Data="@forecasts"
   TItem="WeatherForecast">
   <Template Context="WeatherForecast">
      <div class="container mt-3 border border-5">
         <b>Temp Details</b>
         <hr>
         <div class="row">
            <div class="col">Date: </div>
            <div class="col">@WeatherForecast.Date </div>
         </div>
         <hr>
         <div class="row">
            <div class="col">TemperatureC: </div>
            <div class="col">@WeatherForecast.TemperatureC </div>
         </div>
         <hr>
         <div class="row">
            <div class="col">Summary: </div>
            <div class="col">@WeatherForecast.Summary </div>
         </div>
         <hr>
         <div class="row">
            <div class="col">TemperatureF: </div>
            <div class="col">@WeatherForecast.TemperatureF </div>
         </div>
      </div>
   </Template>
</RadzenDataList>
@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: https://github.com/Chandradev819/RadzenTest/tree/master