Blazor server-side

Selecting row

Index

There are 2 ways to configure selecting rows:

• using the Selectable method of the GridClient object
• using the SetCheckboxColumn or SetSingleCheckboxColumn methods on the column definition

Selectable method

The GridClient object has a method called Selectable to configure if a row can be selected. It's value can be true and false. Since the version 1.1.0 of the GridBlazor nuget package the default value of the Selectable feature is false (it was true for earlier versions).

There are optional parameters to control selection behavior:

• Auto Select First Row: There is an optional boolean parameter to control if the first row should automatically be selected when a page loads. It's value can be true and false. By default this parameter's value is false.
• Allow Multi Select: There is an optional boolean paramter to control if multiple rows can be selected. It's value can be true and false. By default this parameter's value is false. You can select multiple rows while pressing the [Ctrl] key You select multiple adjacent rows by clicking on the first row holding down the [Shift] key and then clicking on the last row of the interval keeping the [Shift] key held down

Rows configured in this way will be highlighted when selected.

You can enable it as follows:

    var client = new GridClient<Order>(q => orderService.GetOrdersGridRows(columns, q), query, false, "ordersGrid", columns)
        .Selectable(true, true, true);

You have to add the OnRowClicked attribute on the component. For example, the razor page can contain the following line:

    <GridComponent T="Order" Grid="@_grid" OnRowClicked="@OrderDetails"></GridComponent>

Then you have to add the function called by the event. In this example its name is OrderDetails:

    protected void OrderDetails(object item)
    {
        Order order = null;
        if (item.GetType() == typeof(Order))
        {
            order = (Order)item;
        }
        Console.WriteLine("Order Id: " + (order == null ? "NULL" : order.OrderID.ToString()));
    }

In this sample a line of text with the selected row id is writen on the console log.

When items are selected in grid, collection of selected items are available using SelectedItems property. SelectedItems property is of type IEnumerable