New DataGrid SelectColumn

[Rocky-25]

When using the new SelectColumn if I have an OnRowClick action, when selecting an item this also triggers. Is there a way to stop this happening so both can be used at the same time? Not sure if this is a bug?

[vnbaaij]

I don't think this is a bug. Without a select column, a click on a cell is treated as a click on a row as well. You use the select column to select a grid item (ie a row) not just a column (ie a cell).

There are ways to get what you want within the OnRowClick handler.

See for example this altered code from the demosite Single/Multi select sample. When SelectFromEntire row is set to true, no console message will be shown. If set to false, all row clicks, with exception of clicking the selected one, will output a console message

<FluentStack VerticalAlignment="VerticalAlignment.Center">
    <FluentSelect Items="@(Enum.GetValues<DataGridSelectMode>())"
    @bind-SelectedOption="@Mode" />
    <FluentCheckbox @bind-Value="@UseSelectedItems"
    @bind-Value:after="@(() => ResetSelectItems())"
    Label="Use `SelectedItems` property" />
    <FluentCheckbox @bind-Value="@SelectFromEntireRow"
    @bind-Value:after="@(() => ResetSelectItems())"
    Label="Use `SelectFromEntireRow` property" />
    <FluentCheckbox @bind-Value="@SelectableBefore2000"
    @bind-Value:after="@(() => ResetSelectItems())"
    Label="Use `Selectable` property" />
</FluentStack>

@if (UseSelectedItems)
{
    @* Sample using SelectedItems  *@
    <div>Using SelectedItems</div>

    <FluentDataGrid Items="@People" ShowHover="@SelectFromEntireRow" TGridItem="Person" OnRowClick="HandleRowClick">
        <SelectColumn TGridItem="Person"
        SelectMode="@Mode"
        SelectFromEntireRow="@SelectFromEntireRow"
        Selectable="@(e => !SelectableBefore2000 || e.BirthDate.Year >= 2000)"
        @bind-SelectedItems="@SelectedItems" />
        <PropertyColumn Width="100px" Property="@(p => p.PersonId)" Title="ID" />
        <PropertyColumn Width="300px" Property="@(p => p.Name)" />
        <PropertyColumn Width="150px" Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
    </FluentDataGrid>

    <div style="margin-top: 0.5rem;">
        <b>SelectedItems:</b>
        @String.Join("; ", SelectedItems.Select(p => p.Name))
    </div>
}
else
{
    @* Sample using Property and OnSelect  *@
    <div>Using Property and OnSelect</div>

    <FluentDataGrid Items="@People" ShowHover="@SelectFromEntireRow" TGridItem="Person">
        <SelectColumn TGridItem="Person"
        SelectMode="@Mode"
        SelectFromEntireRow="@SelectFromEntireRow"
        Selectable="@(e => !SelectableBefore2000 || e.BirthDate.Year >= 2000)"
        Property="@(e => e.Selected)"
        OnSelect="@(e => e.Item.Selected = e.Selected)"
        SelectAll="@(People.All(p => p.Selected))"
        SelectAllChanged="@(all => People.ToList().ForEach(p => p.Selected = (all == true)))" />
        <PropertyColumn Width="100px" Property="@(p => p.PersonId)" Title="ID" />
        <PropertyColumn Width="300px" Property="@(p => p.Name)" />
        <PropertyColumn Width="150px" Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
    </FluentDataGrid>

    <div>
        <b>Peoples:</b>
        @String.Join("; ", People.Where(p => p.Selected).Select(p => p.Name))
    </div>
}

@code {
    bool UseSelectedItems = true;
    bool SelectFromEntireRow = true;
    bool SelectableBefore2000 = false;
    DataGridSelectMode Mode = DataGridSelectMode.Single;

    IEnumerable<Person> SelectedItems = People.Where(p => p.Selected);

    record Person(int PersonId, string Name, DateOnly BirthDate)
    {
        public bool Selected { get; set; }
    };

    static IQueryable<Person> People = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)) { Selected = true },
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();

    private void ResetSelectItems()
    {
        People.ToList().ForEach(i => i.Selected = false);
        People.First().Selected = true;
        SelectedItems = People.Where(p => p.Selected);
    }

    private void HandleRowClick(FluentDataGridRow<Person> row)
    {
        if (!SelectedItems.Contains(row.Item))
        {
            DemoLogger.WriteLine($"Row clicked: {row.RowIndex}");
        }
    }
}

[Rocky-25]

I ended up using OnCellClick instead and simply saying if cell.GridColumn > 1 (SelectColumn is column 1) then do the action. The action is different from adding the row to the selected items as we have the grid where you can select many and then select an action to perform on the selected items but clicking a row navigates you to the edit page for that item.