Getting Started

In this tutorial, you will learn how to create a datagrid in Blazor using the Radzen Datagrid. You will get the Search, Sort and Page functionality integrated.

Step 1 - Install the Radzen.Blazor

Go to the NuGet package, search for the Radzen.Blazor and Install it.


Step 2 
In the imports.razor, add the following codes:
@using Radzen
@using Radzen.Blazor

Step 3
In the  _Host.cshml, insert the Radzen CSS and JavaScript script tags:
<link  rel="stylesheet" href="_content/Radzen.Blazor/css/default.css" />
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

Step 4 - Insert a class Product in folder Data
public class Product { public int ProdID { get; set; } public string ProdName { get; set; } public double SellingPrice { get; set; } public DateTime PurchaseDate { get; set; } }

Step 5 - Insert another class - ProductService in folder Data

 public class ProductService
    {
        List<Product> products = new List<Product>()
        {
            new Product(){ProdID=1, ProdName ="Car", SellingPrice=10250.50, PurchaseDate=Convert.ToDateTime("01-May-2021")},
            new Product(){ProdID=2, ProdName ="Motorcycle", SellingPrice=15250, PurchaseDate=Convert.ToDateTime("02-May-2021")},
            new Product(){ProdID=3, ProdName ="ATV", SellingPrice=1520.50, PurchaseDate=Convert.ToDateTime("03-May-2021")},
            new Product(){ProdID=4, ProdName ="Bicycle", SellingPrice=150.25, PurchaseDate=Convert.ToDateTime("04-May-2021")},
            new Product(){ProdID=5, ProdName ="Helicopter", SellingPrice=130250.50, PurchaseDate=Convert.ToDateTime("05-May-2021")},
            new Product(){ProdID=6, ProdName ="Van", SellingPrice=13250, PurchaseDate=Convert.ToDateTime("06-May-2021")}
        };
        public async Task<List<Product>> ProductList()
        {
            return await Task.FromResult(products);
        }
    }
Step 6 - Create a Datagrid Component

You will need to use the RadzenGrid Component and bind the product model with it.

@if(product == null)
{
    <p>Loading.....</p>
}
else
{

    <RadzenGrid AllowPaging="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" PageSize="4" AllowSorting="true"
                Data="@product" TItem="Product" ColumnWidth="150px">
        <Columns>
            <RadzenGridColumn TItem="Product" Property="ProdID" Title="Product ID"> </RadzenGridColumn>
            <RadzenGridColumn TItem="Product" Property="ProdName" Title="Product Name"> </RadzenGridColumn>
            <RadzenGridColumn TItem="Product" Property="SellingPrice" Title="Selling Price"> </RadzenGridColumn>
            <RadzenGridColumn TItem="Product" Property="PurchaseDate" Title="Purchase Date">
                <Template Context="data">
                    @String.Format("{0:d}", data.PurchaseDate)
                </Template>
            </RadzenGridColumn>
        </Columns>
    </RadzenGrid>

}
@code {
    IEnumerable<Product> product;

    protected override async Task OnInitializedAsync()
    {
        product = await Task.Run(() => productService.ProductList());
    }
}
Make sure to watch the video tutorial below, where I have gone through more details.