New to Telerik UI for Blazor? Download free 30-day trial

Single Row Selection

The Grid component can allow the user to select only a single row at a time, or to select multiple.

In this article:

Basics

To use single row selection, set the SelectionMode property to Telerik.Blazor.GridSelectionMode.Single.

To un-select the item, click its checkbox again, or hold the Ctrl key and click/tap the row.

The Examples section showcases how you can use the grid features together.

Checkbox Selection

In Single SelectionMode, selection is applied with a click on a row, or by clicking a checkbox in the GridCheckboxColumn.

Only one row can be selected at a time, even with checkboxes enabled, so the last one that is clicked will be selected.

If you add a checkbox column, you should set its SelectAll parameter to false to disable the header checkbox that will select all rows.

Selected Items

The SelectedItemsChanged event receives a collection of the grid data model that has one member only.

You can use the SelectedItems collection in two-way binding. You can use this to pre-select a row for your users.

The SelectedItems collection persists across paging operations. Changing the page will keep it populated.

If the collection has more than one item in it, the grid will use the last item to select the row in single selection mode.

Examples

Single Row Selection and Checkbox

You can add a checkbox column for single selection. It is required if the InCell edit mode is used. Otherwise, it is optional.

Single Selection and a checkbox column.

Single selection can be done by clicking a row or through a checkbox

<TelerikGrid Data=@GridData
             SelectionMode="@GridSelectionMode.Single"
             Pageable="true">
    <GridColumns>
        <GridCheckboxColumn SelectAll="false" Title="Select" Width="70px" />
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3
            });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
    }
}

SelectedItemsChanged Event

You can respond to the user action of selecting a new item through the SelectedItemsChanged event.

The example below shows how to handle the SelectedItemsChanged event to extract information about the selected item and use it to populate a second grid with details about the selected record.

If you want to load that data on demand, you should use the OnRowClick event.

Single Selection and handling the SelectedItemsChanged event

@* Use the selection change event to show detail data *@

<TelerikGrid Data=@GridData
             SelectionMode="GridSelectionMode.Single"
             SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
             SelectedItems="@SelectedItems"
             Pageable="true"
             Height="300px">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
    </GridColumns>
</TelerikGrid>

@if (TeamMatesList != null)
{
    <h6>@SelectedEmployee.Team</h6>
    <TelerikGrid Data="@TeamMatesList">
        <GridColumns>
            <GridColumn Field=@nameof(Employee.Name) />
        </GridColumns>
    </TelerikGrid>
}

@code {
    public List<Employee> GridData { get; set; }
    public IEnumerable<Employee> SelectedItems { get; set; } = Enumerable.Empty<Employee>();

    public Employee SelectedEmployee { get; set; }
    public List<Employee> TeamMatesList { get; set; }

    protected void OnSelect(IEnumerable<Employee> employees)
    {
        SelectedEmployee = employees.FirstOrDefault();
        // update the collection so that the grid can highlight the correct item
        // when two-way binding is used this happens automatically, but the framework does not allow two-way binding and the event at the same time
        SelectedItems = new List<Employee> { SelectedEmployee };

        GetChildGridData(); // note: an async operation here can break the selection and may not even render its results in the view
        // for async operations, use the OnRowClick event
    }

    void GetChildGridData()
    {
        if (TeamMatesList == null)
        {
            TeamMatesList = new List<Employee>();
        }
        TeamMatesList.Clear();
        TeamMatesList = GridData.Where(empl => empl.Team == SelectedEmployee.Team).ToList();
    }

    protected override async Task OnInitializedAsync()
    {

        GridData = new List<Employee>();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3
            });
        }

        // add default selection and execute its logic. Not required
        SelectedItems = new List<Employee> { GridData.FirstOrDefault() };
        SelectedEmployee = GridData.FirstOrDefault();
        GetChildGridData();
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
    }
}

The lambda expression in the handler is required by the framework: https://github.com/aspnet/AspNetCore/issues/12226.

Two-way Binding of SelectedItems

You can predefine the selected item for your users through the two-way binding of the SelectedItems property. The collection will be updated by the grid when the selection changes. Note that both binding to the property and using its event cannot be used at the same time, as Blazor only allows one.

Single Selection and two-way binding of the SelectedItems property

Selected item: @SelectedItems.FirstOrDefault().Name

<TelerikGrid Data=@GridData
             SelectionMode="@GridSelectionMode.Single"
             @bind-SelectedItems="@SelectedItems"
             Pageable="true"
             Height="400px">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<Employee> GridData { get; set; }
    public IEnumerable<Employee> SelectedItems { get; set; } = Enumerable.Empty<Employee>();

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3
            });
        }

        // select Employee with ID 4
        SelectedItems = GridData.Where(item => item.EmployeeId == 4).ToList();
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
    }
}

See Also

In this article