In this article, we will discuss how to do data binding in the Blazor Telerik grid.
Telerik Blazor Data Grid gives 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.
- Create the
TelerikGrid
tag.
- Assign the Telerik Grid
Data
parameter to the IEnumerable<T>
property, or use the OnRead
event. here we will create Data
this time.
- Enable a couple of the data operations as per grid-like paging, filtering, and sorting (optional).
- Now add the
GridColumn
instances under the GridColumns
tag.
- Here each column
Field
should be pointed to the model property to display.
- Now use
nameof()
the plain field name.
- Define a user-friendly column
Titles
or 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;
}
}
}
Output
If I filter EmployeeName with 11 the below is the output,