[DataGrid] Add OnCellClick event and SelectColumn.SelectFromEntireRow property

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -1449,6 +1449,12 @@
             Gets or sets whether the [All] checkbox is disabled (not clickable).
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.SelectColumn`1.SelectFromEntireRow">
+            <summary>
+            Gets or sets whether the selection of rows is restricted to the SelectColumn (false) or if the whole row can be clicked to toggled the selection (true).
+            Default is True.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.SelectColumn`1.SelectAllTemplate">
             <summary>
             Gets or sets the template for the [All] checkbox column template.
@@ -1720,6 +1726,11 @@
             Gets or sets a callback when a row is focused.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.OnCellClick">
+            <summary>
+            Gets or sets a callback when a cell is clicked.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.OnRowClick">
             <summary>
             Gets or sets a callback when a row is clicked.
@@ -1855,6 +1866,14 @@
             Gets or sets the owning <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/> component
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1.Column">
+            <summary>
+            Gets a reference to the column that this cell belongs to.
+            </summary>
+        </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1.HandleOnCellClickAsync">
+            <summary />
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1.Item">
             <summary>
             Gets or sets the reference to the item that holds this row's values.

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridMultiSelect.razor

@@ -4,16 +4,20 @@
     <FluentCheckbox @bind-Value="@UseSelectedItems"
                     @bind-Value:after="@(() => ResetSelectItems())"
                     Label="Use `SelectedItems` property" />
+    <FluentCheckbox @bind-Value="@SelectFromEntireRow"
+                    @bind-Value:after="@(() => ResetSelectItems())"
+                    Label="Use `SelectFromEntireRow` property" />
 </FluentStack>
 
 @if (UseSelectedItems)
 {
     @* Sample using SelectedItems  *@
     <div>Using SelectedItems</div>
 
-    <FluentDataGrid Items="@People" ShowHover="true" TGridItem="Person">
+    <FluentDataGrid Items="@People" ShowHover="@SelectFromEntireRow" TGridItem="Person">
         <SelectColumn TGridItem="Person"
                       SelectMode="@Mode"
+                      SelectFromEntireRow="@SelectFromEntireRow"
                       @bind-SelectedItems="@SelectedItems" />
         <PropertyColumn Width="100px" Property="@(p => p.PersonId)" Title="ID" />
         <PropertyColumn Width="300px" Property="@(p => p.Name)" />
@@ -30,9 +34,10 @@ else
     @* Sample using Property and OnSelect  *@
     <div>Using Property and OnSelect</div>
 
-    <FluentDataGrid Items="@People" ShowHover="true" TGridItem="Person">
+    <FluentDataGrid Items="@People" ShowHover="@SelectFromEntireRow" TGridItem="Person">
         <SelectColumn TGridItem="Person"
                       SelectMode="@Mode"
+                      SelectFromEntireRow="@SelectFromEntireRow"
                       Property="@(e => e.Selected)"
                       OnSelect="@(e => e.Item.Selected = e.Selected)"
                       SelectAll="@(People.All(p => p.Selected))"
@@ -50,6 +55,7 @@ else
 
 @code {
     bool UseSelectedItems = true;
+    bool SelectFromEntireRow = true;
     DataGridSelectMode Mode = DataGridSelectMode.Single;
 
     IEnumerable<Person> SelectedItems = People.Where(p => p.Selected);

src/Core/Components/DataGrid/Columns/SelectColumn.cs

@@ -44,6 +44,13 @@ public SelectColumn()
     [Parameter]
     public bool SelectAllDisabled { get; set; } = false;
 
+    /// <summary>
+    /// Gets or sets whether the selection of rows is restricted to the SelectColumn (false) or if the whole row can be clicked to toggled the selection (true).
+    /// Default is True.
+    /// </summary>
+    [Parameter]
+    public bool SelectFromEntireRow { get; set; } = true;
+
     /// <summary>
     /// Gets or sets the template for the [All] checkbox column template.
     /// </summary>
@@ -309,8 +316,12 @@ private RenderFragment<TGridItem> GetDefaultChildContent()
 
             builder.OpenComponent<FluentIcon<Icon>>(0);
             builder.AddAttribute(1, "Value", GetIcon(selected));
-            builder.AddAttribute(1, "Title", selected ? TitleChecked : TitleUnchecked);
-            builder.AddAttribute(2, "row-selected", selected);
+            builder.AddAttribute(2, "Title", selected ? TitleChecked : TitleUnchecked);
+            builder.AddAttribute(3, "row-selected", selected);
+            if (!SelectFromEntireRow)
+            {
+                builder.AddAttribute(4, "style", "cursor: pointer;");
+            }
             builder.CloseComponent();
         });
     }

src/Core/Components/DataGrid/FluentDataGrid.razor.cs

@@ -124,6 +124,12 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
     [Parameter]
     public EventCallback<FluentDataGridCell<TGridItem>> OnCellFocus { get; set; }
 
+    /// <summary>
+    /// Gets or sets a callback when a cell is clicked.
+    /// </summary>
+    [Parameter]
+    public EventCallback<FluentDataGridCell<TGridItem>> OnCellClick { get; set; }
+
     /// <summary>
     /// Gets or sets a callback when a row is clicked.
     /// </summary>
@@ -187,7 +193,7 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
     // We cascade the InternalGridContext to descendants, which in turn call it to add themselves to _columns
     // This happens on every render so that the column list can be updated dynamically
     private readonly InternalGridContext<TGridItem> _internalGridContext;
-    private readonly List<ColumnBase<TGridItem>> _columns;
+    internal readonly List<ColumnBase<TGridItem>> _columns;
     private bool _collectingColumns; // Columns might re-render themselves arbitrarily. We only want to capture them at a defined time.
 
     // Tracking state for options and sorting

src/Core/Components/DataGrid/FluentDataGridCell.razor

@@ -6,6 +6,7 @@
                        grid-column=@GridColumn
                        class="@Class"
                        style="@StyleValue"
+                       @onclick="@HandleOnCellClickAsync"
                        @attributes="AdditionalAttributes">
     @ChildContent
 </fluent-data-grid-cell>

src/Core/Components/DataGrid/FluentDataGridCell.razor.cs

@@ -41,14 +41,19 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
     /// Gets or sets the owning <see cref="FluentDataGridRow{TItem}"/> component.
     /// </summary>
     [CascadingParameter(Name = "OwningRow")]
-    public FluentDataGridRow<TGridItem> Owner { get; set; } = default!;
+    internal FluentDataGridRow<TGridItem> Owner { get; set; } = default!;
 
     /// <summary>
     /// Gets or sets the owning <see cref="FluentDataGrid{TItem}"/> component
     /// </summary>
     [CascadingParameter]
     private InternalGridContext<TGridItem> GridContext { get; set; } = default!;
 
+    /// <summary>
+    /// Gets a reference to the column that this cell belongs to.
+    /// </summary>
+    private ColumnBase<TGridItem>? Column => Owner.Owner.Grid._columns.ElementAtOrDefault(GridColumn - 1);
+
     protected string? StyleValue => new StyleBuilder(Style)
        .AddStyle("height", $"{GridContext.Grid.ItemSize:0}px", () => !GridContext.Grid.Loading && GridContext.Grid.Virtualize && Owner.RowType == DataGridRowType.Default)
        .AddStyle("align-content", "center", () => !GridContext.Grid.Loading && GridContext.Grid.Virtualize && Owner.RowType == DataGridRowType.Default && string.IsNullOrEmpty(Style))
@@ -59,6 +64,22 @@ protected override void OnInitialized()
         Owner.Register(this);
     }
 
+    /// <summary />
+    internal async Task HandleOnCellClickAsync()
+    {
+        if (GridContext.Grid.OnCellClick.HasDelegate)
+        {
+            await GridContext.Grid.OnCellClick.InvokeAsync(this);
+        }
+
+        // If the cell is a checkbox cell, add or remove the item from the selected items list.
+        var selectColumn = Column as SelectColumn<TGridItem>;
+        if (CellType == DataGridCellType.Default && selectColumn != null && selectColumn.SelectFromEntireRow == false)
+        {
+            await selectColumn.AddOrRemoveSelectedItemAsync(Item);
+        }
+    }
+
     public void Dispose() => Owner.Unregister(this);
 
 }

src/Core/Components/DataGrid/FluentDataGridRow.razor.cs

@@ -56,7 +56,7 @@ public partial class FluentDataGridRow<TGridItem> : FluentComponentBase, IHandle
     /// Gets or sets the owning <see cref="FluentDataGrid{TItem}"/> component
     /// </summary>
     [CascadingParameter]
-    private InternalGridContext<TGridItem> Owner { get; set; } = default!;
+    internal InternalGridContext<TGridItem> Owner { get; set; } = default!;
 
     protected string? ClassValue => new CssBuilder(Class)
         .AddClass("hover", when: Owner.Grid.ShowHover)
@@ -112,7 +112,7 @@ internal async Task HandleOnRowClickAsync(string rowId)
 
             if (row != null && row.RowType == DataGridRowType.Default)
             {
-                foreach (var selColumn in Owner.Grid.SelectColumns)
+                foreach (var selColumn in Owner.Grid.SelectColumns.Where(i => i.SelectFromEntireRow))
                 {
                     await selColumn.AddOrRemoveSelectedItemAsync(Item);
                 }