Blazorise DataGrid: Cell Selection

The DataGrid allows you to select cells with keyboard or clicks by setting NavigationMode to Cell

Examples

Cell Selecting

You can track which cell is selected by binding to the SelectedCell parameter.
#
First Name
Last Name
Email
Salary
1SamuelCollierSamuel.Collier62@gmail.com86 030,41 €
2IrvinZiemannIrvin.Ziemann@gmail.com61 781,31 €
3GeraldPollichGerald82@yahoo.com58 810,75 €
4CoraConnCora27@yahoo.com84 414,66 €
5AlfonsoD'AmoreAlfonso.DAmore@hotmail.com69 318,29 €
6JessieWilkinsonJessie_Wilkinson@gmail.com78 566,12 €
7GregoryRennerGregory63@hotmail.com57 456,82 €
8MaryannHilpertMaryann.Hilpert12@gmail.com89 153,38 €
9MerlePacochaMerle3@gmail.com55 349,94 €
10AngelinaWardAngelina42@gmail.com73 625,86 €
Selected Cell
<DataGrid TItem="Employee"
          Data="@employeeList"
          NavigationMode="DataGridNavigationMode.Cell"
          @bind-Selectedcell="@selectedCell"
          Responsive>
    <DataGridMultiSelectColumn Width="Width.Px( 30 )"></DataGridMultiSelectColumn>
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof( Employee.Id )" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof( Employee.LastName )" Caption="Last Name" Editable />
    <DataGridColumn Field="@nameof( Employee.Email )" Caption="Email" Editable />
    <DataGridColumn Field="@nameof( Employee.Salary )" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo( "fr-FR" )" Editable>
        <EditTemplate>
            <NumericInput TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@(v => context.CellValue = v)" />
        </EditTemplate>
    </DataGridColumn>
</DataGrid>

<Row>
    <Column>
        <Card>
            <CardHeader>
                <CardTitle>Selected Cell</CardTitle>
            </CardHeader>
            <CardBody>
                <Fields>
                    <Field>
                        <FieldLabel>Row Index</FieldLabel>
                        <FieldBody>
                            <TextInput ReadOnly Value="@selectedCell?.RowIndex.ToString()"></TextInput>
                        </FieldBody>
                    </Field>
                    <Field>
                        <FieldLabel>Field</FieldLabel>
                        <FieldBody>
                            <TextInput ReadOnly Value="@selectedCell?.ColumnInfo?.Field"></TextInput>
                        </FieldBody>
                    </Field>
                    <Field>
                        <FieldLabel>Value</FieldLabel>
                        <TextInput ReadOnly Value="@selectedCell?.Column?.FormatDisplayValue( selectedCell?.Item )"></TextInput>
                    </Field>
                </Fields>
            </CardBody>
        </Card>
    </Column>
</Row>

@code {
    private readonly EmployeeData EmployeeData = new();
    private List<Employee> employeeList;
    private DataGridCellInfo<Employee> selectedCell;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page