Datagrid: MultiSelect | ShiftClick Feature

Demos/Blazorise.Demo/Pages/Tests/DataGridPage.razor

@@ -223,9 +223,7 @@
                                 </Button>
                             </FilterTemplate>
                             <MultiSelectTemplate>
-                                <Label @onclick:stopPropagation>
-                                    <Check TValue="bool" Checked="@context.IsSelected" Indeterminate="@context.IsIndeterminate" CheckedChanged="@context.SelectedChanged" @onclick:stopPropagation></Check>
-                                </Label>
+                                <Check TValue="bool" Checked="@context.IsSelected" CheckedExpression="() => context.IsSelected" Indeterminate="@context.IsIndeterminate" CheckedChanged="@context.SelectedChanged"></Check>
                             </MultiSelectTemplate>
                         </DataGridMultiSelectColumn>
                         <DataGridCommandColumn TItem="Employee" Width="170px">
@@ -289,9 +287,6 @@
                                     <SelectItem TValue="string" Value="@("D")">Diverse</SelectItem>
                                 </Select>
                             </FilterTemplate>
-                            @code{
-
-                            }
                             <DisplayTemplate>
                                 @{
                                     var gender = ( context as Employee )?.Gender;

SUPPORTERS.md

@@ -76,4 +76,9 @@ In case you don't want to be on the list please let me know. And 'm sorry if I f
 - Jesse Hamilton
 - Logan Payton
 - Catrina Zapata
+- Angel Ruben
+- TridentShoxx Labs
+- Dejan Demonjić
+- Sebastian Gerner
+- Philip Näf
 - Your name can be here, [become a patron](https://www.patreon.com/mladenmacanovic) or [buy me a coffee](https://www.buymeacoffee.com/mladenmacanovic)

Source/Blazorise/Components/Table/TableRow.razor.cs

@@ -50,7 +50,8 @@ protected async Task OnClickHandler( MouseEventArgs eventArgs )
         {
             // https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event
             // works good enough. Click is still called before the double click, but it is advise to not use both events anyway.
-            if ( eventArgs.Detail == 1 )
+            // We'll be treating any Detail higher then 2 as the user constantly clicking, therefore triggering Single Click.
+            if ( eventArgs.Detail == 1 || eventArgs.Detail > 2 )
                 await Clicked.InvokeAsync( EventArgsMapper.ToMouseEventArgs( eventArgs ) );
             else if ( eventArgs.Detail == 2 )
                 await DoubleClicked.InvokeAsync( EventArgsMapper.ToMouseEventArgs( eventArgs ) );

Source/Extensions/Blazorise.DataGrid/DataGrid.razor.cs

@@ -101,6 +101,11 @@ public partial class DataGrid<TItem> : BaseDataGridComponent
         /// </summary>
         protected PaginationContext<TItem> paginationContext;
 
+        /// <summary>
+        /// Holds the last known selected row index.
+        /// </summary>
+        protected internal short lastSelectedRowIndex;
+
         #endregion
 
         #region Constructors
@@ -392,32 +397,77 @@ protected void OnCancelCommand()
                 PopupVisible = false;
         }
 
+        protected internal short ResolveItemIndex( TItem item )
+        {
+            short index = 0;
+            foreach ( var displayItem in DisplayData )
+            {
+                if ( item.IsEqual( displayItem ) )
+                    break;
+                index++;
+            }
+            return index;
+        }
+
         protected async Task OnMultiSelectCommand( MultiSelectEventArgs<TItem> eventArgs )
         {
             SelectedAllRows = false;
             UnSelectAllRows = false;
 
-            if ( SelectedRows is null )
-            {
-                SelectedRows = new List<TItem>();
-            }
+            SelectedRows ??= new List<TItem>();
+
+            await HandleShiftClick( eventArgs );
 
-            if ( eventArgs.Selected && !SelectedRows.Contains( eventArgs.Item ) )
+            if ( eventArgs.Selected && !SelectedRows.Contains( eventArgs.Item ) && !eventArgs.ShiftKey )
             {
                 SelectedRows.Add( eventArgs.Item );
             }
+            else if ( !eventArgs.Selected && SelectedRows.Contains( eventArgs.Item ) && !eventArgs.ShiftKey )
+            {
+                if ( SelectedRows.Contains( eventArgs.Item ) )
+                {
+                    SelectedRows.Remove( eventArgs.Item );
+
+                    if ( SelectedRow.IsEqual( eventArgs.Item ) )
+                    {
+                        await SelectedRowChanged.InvokeAsync( default( TItem ) );
+                    }
+                }
+            }
 
-            if ( !eventArgs.Selected && SelectedRows.Contains( eventArgs.Item ) )
+            await SelectedRowsChanged.InvokeAsync( SelectedRows );
+        }
+
+        private async Task HandleShiftClick( MultiSelectEventArgs<TItem> eventArgs )
+        {
+            if ( eventArgs.ShiftKey )
             {
-                SelectedRows.Remove( eventArgs.Item );
+                SelectedRows.Clear();
 
-                if ( SelectedRow.IsEqual( eventArgs.Item ) )
+                var currIndex = ResolveItemIndex( eventArgs.Item );
+
+                if ( currIndex >= lastSelectedRowIndex )
+                {
+                    foreach ( var item in DisplayData.Skip( lastSelectedRowIndex ).Take( currIndex - lastSelectedRowIndex + 1 ) )
+                    {
+                        SelectedRows.Add( item );
+                    }
+                }
+                else
+                {
+                    foreach ( var item in DisplayData.Skip( currIndex ).Take( lastSelectedRowIndex - currIndex + 1 ) )
+                    {
+                        SelectedRows.Add( item );
+                    }
+                }
+
+                if ( !SelectedRows.Contains( SelectedRow ) )
                 {
                     await SelectedRowChanged.InvokeAsync( default( TItem ) );
                 }
             }
-
-            await SelectedRowsChanged.InvokeAsync( SelectedRows );
+            else
+                lastSelectedRowIndex = ResolveItemIndex( eventArgs.Item );
         }
 
         protected async Task OnMultiSelectAll( bool selectAll )

Source/Extensions/Blazorise.DataGrid/EventArguments.cs

@@ -187,10 +187,12 @@ public class MultiSelectEventArgs<TItem> : EventArgs
         /// </summary>
         /// <param name="item">Model that belongs to the grid row.</param>
         /// <param name="selected">Indicates if the row is selected or not.</param>
-        public MultiSelectEventArgs( TItem item, bool selected )
+        /// <param name="shiftKey">True if the user is holding shifg key.</param>
+        public MultiSelectEventArgs( TItem item, bool selected, bool shiftKey )
         {
             Item = item;
             Selected = selected;
+            ShiftKey = shiftKey;
         }
 
         /// <summary>
@@ -202,5 +204,10 @@ public MultiSelectEventArgs( TItem item, bool selected )
         /// Returns true if the row is selected.
         /// </summary>
         public bool Selected { get; }
+
+        /// <summary>
+        /// Returns true if user has ShiftClicked.
+        /// </summary>
+        public bool ShiftKey { get; }
     }
 }

Source/Extensions/Blazorise.DataGrid/_DataGridRow.razor

@@ -33,7 +33,7 @@
             {
                 @if ( ParentDataGrid.MultiSelect )
                 {
-                    <_DataGridRowMultiSelect @ref="multiSelect" TItem="TItem" Item="Item" Checked="@IsSelected" CheckedChanged="@OnMultiSelectCommand" Class="@column.CellClass?.Invoke(Item)" Style="@column.CellStyle?.Invoke(Item)" Width="@column.Width" TextAlignment="@column.TextAlignment"></_DataGridRowMultiSelect>
+                    <_DataGridRowMultiSelect @ref="multiSelect" TItem="TItem" Item="Item" Checked="@IsSelected" CheckedClicked="@OnMultiSelectCheckClicked" Class="@column.CellClass?.Invoke(Item)" Style="@column.CellStyle?.Invoke(Item)" Width="@column.Width" TextAlignment="@column.TextAlignment"></_DataGridRowMultiSelect>
                 }
             }
             else

Source/Extensions/Blazorise.DataGrid/_DataGridRow.razor.cs

@@ -1,11 +1,9 @@
 #region Using directives
-
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
 using Blazorise.Extensions;
 using Microsoft.AspNetCore.Components;
-
 #endregion
 
 namespace Blazorise.DataGrid
@@ -24,6 +22,12 @@ public abstract class _BaseDataGridRow<TItem> : BaseDataGridComponent
         /// </summary>
         protected _DataGridRowMultiSelect<TItem> multiSelect;
 
+        /// <summary>
+        /// If click came propagated from MultiSelect Check
+        /// Funels the selection logic into HandleClick.
+        /// </summary>
+        protected bool clickFromCheck;
+
         #endregion
 
         #region Methods
@@ -50,21 +54,43 @@ protected override Task OnAfterRenderAsync( bool firstRender )
 
         protected internal async Task HandleClick( BLMouseEventArgs eventArgs )
         {
-            await Clicked.InvokeAsync( new DataGridRowMouseEventArgs<TItem>( Item, eventArgs ) );
+            if ( !clickFromCheck )
+                await Clicked.InvokeAsync( new DataGridRowMouseEventArgs<TItem>( Item, eventArgs ) );
 
             var selectable = ParentDataGrid.RowSelectable?.Invoke( Item ) ?? true;
 
             if ( !selectable )
                 return;
 
+            if ( !clickFromCheck )
+                await HandleSingleSelectClick( eventArgs );
+
+            await HandleMultiSelectClick( eventArgs );
+            clickFromCheck = false;
+        }
+
+        private async Task HandleMultiSelectClick( BLMouseEventArgs eventArgs )
+        {
+            if ( ParentDataGrid.MultiSelect )
+            {
+                var isSelected = ( ParentDataGrid.SelectedRows == null || ( ParentDataGrid.SelectedRows != null && !ParentDataGrid.SelectedRows.Any( x => x.IsEqual( Item ) ) ) );
+                var shiftClick = ( eventArgs.ShiftKey && eventArgs.Button == MouseButton.Left );
+
+                await OnMultiSelectCommand( isSelected || shiftClick, shiftClick );
+            }
+        }
+
+        private async Task HandleSingleSelectClick( BLMouseEventArgs eventArgs )
+        {
             // Un-select row if the user is holding the ctrl key on already selected row.
             if ( ParentDataGrid.SingleSelect && eventArgs.CtrlKey && eventArgs.Button == MouseButton.Left
                 && ParentDataGrid.SelectedRow != null
                 && Item.IsEqual( ParentDataGrid.SelectedRow ) )
             {
                 await Selected.InvokeAsync( default );
             }
-            else if ( ParentDataGrid.MultiSelect
+            else if ( !eventArgs.ShiftKey
+                && ParentDataGrid.MultiSelect
                 && ParentDataGrid.SelectedRows != null
                 && ParentDataGrid.SelectedRows.Any( x => x.IsEqual( Item ) ) )
             {
@@ -77,18 +103,6 @@ protected internal async Task HandleClick( BLMouseEventArgs eventArgs )
             {
                 await Selected.InvokeAsync( Item );
             }
-
-            if ( ParentDataGrid.MultiSelect )
-            {
-                if ( multiSelect != null )
-                {
-                    await multiSelect.OnCheckedChanged( !multiSelect.Checked );
-                }
-                else
-                {
-                    await OnMultiSelectCommand( ParentDataGrid.SelectedRows != null && !ParentDataGrid.SelectedRows.Any( x => x.IsEqual( Item ) ) );
-                }
-            }
         }
 
         protected internal Task HandleDoubleClick( BLMouseEventArgs eventArgs )
@@ -118,7 +132,19 @@ protected internal Task OnCancelCommand()
 
         protected internal Task OnMultiSelectCommand( bool selected )
         {
-            return MultiSelect.InvokeAsync( new MultiSelectEventArgs<TItem>( Item, selected ) );
+            return MultiSelect.InvokeAsync( new MultiSelectEventArgs<TItem>( Item, selected, false ) );
+        }
+
+        protected internal Task OnMultiSelectCommand( bool selected, bool shiftClick )
+        {
+            return MultiSelect.InvokeAsync( new MultiSelectEventArgs<TItem>( Item, selected, shiftClick ) );
+        }
+
+        protected Task OnMultiSelectCheckClicked()
+        {
+            clickFromCheck = true;
+
+            return Task.CompletedTask;
         }
 
         #endregion

Source/Extensions/Blazorise.DataGrid/_DataGridRowMultiSelect.razor

@@ -3,14 +3,14 @@
 <TableRowCell Class="@Class" Style="@BuildCellStyle()" TextAlignment="@TextAlignment">
     @if ( ParentDataGrid.MultiSelectColumn?.MultiSelectTemplate != null )
     {
-        <Label @onclick:stopPropagation>
+        <Label @onclick="@OnCheckedClicked">
             @ParentDataGrid.MultiSelectColumn.MultiSelectTemplate( new MultiSelectContext<TItem>( EventCallback.Factory.Create( this, new Func<bool, Task>( OnCheckedChanged ) ), Checked, false, Item ) )
         </Label>
     }
     else
     {
-        <Label @onclick:stopPropagation>
-            <Check TValue="bool" Checked="@Checked" CheckedChanged="@OnCheckedChanged" CheckedExpression="@(()=> Checked)" @onclick:stopPropagation></Check>
+        <Label @onclick="@OnCheckedClicked">
+            <Check TValue="bool" Checked="@Checked" CheckedChanged="@OnCheckedChanged" CheckedExpression="@(()=> Checked)"></Check>
         </Label>
     }
 </TableRowCell>

Source/Extensions/Blazorise.DataGrid/_DataGridRowMultiSelect.razor.cs

@@ -12,8 +12,13 @@ public abstract class _BaseDataGridRowMultiSelect<TItem> : ComponentBase
 
         internal Task OnCheckedChanged( bool @checked )
         {
-            Checked = @checked;
-            return CheckedChanged.InvokeAsync( @checked );
+            //Multi Select Checked State is bound to the Row Selected State
+            return CheckedChanged.InvokeAsync( Checked );
+        }
+
+        internal Task OnCheckedClicked()
+        {
+            return CheckedClicked.InvokeAsync();
         }
 
         protected string BuildCellStyle()
@@ -49,6 +54,8 @@ protected string BuildCellStyle()
 
         [Parameter] public EventCallback<bool> CheckedChanged { get; set; }
 
+        [Parameter] public EventCallback CheckedClicked { get; set; }
+
         #endregion
     }
 }