How to Create Telerik Data Grid in Blazor | Telerik Blazor Grid Overview

  In this article, we will discuss how to do data binding in the Blazor Telerik grid.

Telerik Blazor Data Grid gives us an overall set of ready-to-use features to us. Telerik Blazor Data contains everything from sorting, paging, editing, filtering, and grouping the row virtualization and optimized data reading, etc.

The Telerik grid is built on the native Blazor from the ground up so it is a very customizable Grid that delivers lightning-fast performance.

• Creating the Blazor Data Grid

1. Create the TelerikGrid tag.
2. Assign the Telerik Grid Data parameter to the IEnumerable<T> property, or use the OnRead event. here we will create Data this time. 
3. Enable a couple of the data operations as per grid-like paging, filtering, and sorting (optional).
4. Now add the GridColumn instances under the GridColumns tag.
5. Here each column Field should be pointed to the model property to display.
6. Now use nameof() the plain field name. 
7. Define a user-friendly column Titlesor DisplayFormat for numeric and date values.

Create the Blazor Web Assembly project and add the below code in the Razor file.

Below is the code to create a Telerik Grid,

Blazor Code

@page "/"
<h3>Telerik GridDemo</h3>
<TelerikGrid Data="@empData"
    Pageable="true"
    SelectionMode="@selectionMode"
    @bind-SelectedItems="@SelectedItems"
    Sortable="true"
    FilterMode="@GridFilterMode.FilterRow">
  <GridColumns>
    <GridCheckboxColumn SelectAll="@ShowSelectAll"></GridCheckboxColumn>
    <GridColumn Field="Name" Title="Employee Name"  />
    <GridColumn Field="Salary"  />
    <GridColumn Field="@(nameof(Employee.DOJ))"  />
  </GridColumns>
</TelerikGrid>
<h2>Selected Employees:</h2>
<ul>     @foreach (Employee emp in SelectedItems)     {          <li>             @emp.Name          </li>     } </ul>
@code {
    GridSelectionMode selectionMode {
        get;
        set;
    } = GridSelectionMode.Multiple;
    List < Employee > empData {
        get;
        set;
    }
    bool ShowSelectAll => selectionMode == GridSelectionMode.Multiple;
    public IEnumerable < Employee > SelectedItems {
        get;
        set;
    } = new List < Employee > ();
    protected override void OnInitialized() {
        empData = Enumerable.Range(1, 50).Select(x => new Employee {
            Id = x,
                Name = "Employee name " + x,
                Salary = (decimal)(x * 5.12),
                DOJ = DateTime.Now.AddMonths(-x).Date,
        }).ToList();
        base.OnInitialized();
    }
    void ClearSelection(ChangeEventArgs e) {
        Enum.TryParse(e.Value.ToString(), out GridSelectionMode mode);
        selectionMode = mode;
        if (mode == GridSelectionMode.Single) {
            Employee selectedItem = null;
            if (SelectedItems.Count() > 0) {
                selectedItem = SelectedItems.Last();
            }
            var items = new List < Employee > ();
            if (selectedItem != null) {
                items.Add(selectedItem);
            }
            SelectedItems = items.AsEnumerable < Employee > ();
        }
    }
    public class Employee {
        public int Id {
            get;
            set;
        }
        public string Name {
            get;
            set;
        }
        public decimal Salary {
            get;
            set;
        }
        public DateTime DOJ {
            get;
            set;
        }
    }
}

JavaScript

Output

If I filter EmployeeName with 11 the below is the output,

------------------------------

Author : Dotnet Office | https://www.youtube.com/TheDotNetOffice

Share this

Related Posts