dvoituron commented 3 weeks ago

[DataGrid] Multiselect feature, adding a `SelectColumn`

There are two ways of managing this SelectColumn.

Either by supplying a list of data via Items and letting the grid manage the selected rows entirely, via SelectedItems. property.

<FluentDataGrid Items="@People" ShowHover="true" TGridItem="Person">
    <!-- THIS LINE TO HAVE MULTISELECT -->
    <SelectColumn TGridItem="Person"
                    SelectMode="@DataGridSelectMode.Multiple"
                    @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>

Or by manually managing the way selected lines are saved, via Property, OnSelect and SelectAll. This requires more configuration but is probably more interesting when using Virtualize or when directly managing a custom IsSelected property.
- Property: Function to be executed to display the checked/unchecked icon, depending of you data model.
- OnSelect: Action to be executed when the row is selected or unselected.
- SelectAll: Value indicating whether the [All] checkbox is selected.

<FluentDataGrid Items="@People" ShowHover="true" TGridItem="Person">
    <!-- THIS LINE TO HAVE MULTISELECT -->
    <SelectColumn TGridItem="Person"
                    SelectMode="@DataGridSelectMode.Multiple"
                    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>

These example are using a class containing:

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

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

Example

peek

Unit Tests

github-actions[bot] commented 3 weeks ago

✅ All tests passed successfully

Details on your Workflow / Core Tests page.

github-actions[bot] commented 3 weeks ago

Summary - Unit Tests Code Coverage

Summary

||| |:---|:---| | Generated on: | 4/30/2024 - 10:11:54 AM | | Coverage date: | 4/30/2024 - 10:11:44 AM | | Parser: | Cobertura | | Assemblies: | 1 | | Classes: | 229 | | Files: | 337 | | **Line coverage:** | 56.2% (4426 of 7870) | | Covered lines: | 4426 | | Uncovered lines: | 3444 | | Coverable lines: | 7870 | | Total lines: | 27040 | | **Branch coverage:** | 48.3% (2101 of 4345) | | Covered branches: | 2101 | | Total branches: | 4345 | | **Method coverage:** | [Feature is only available for sponsors](https://reportgenerator.io/pro) | | Tag: | 311_8892993915 |

Coverage

Microsoft.FluentUI.AspNetCore.Components - 56.2%

|**Name**|**Line**|**Branch**| |:---|---:|---:| |**Microsoft.FluentUI.AspNetCore.Components**|**56.2%**|**48.3%**| |Microsoft.FluentUI.AspNetCore.Components.AccordionChangeEventArgs|0%|| |Microsoft.FluentUI.AspNetCore.Components.ActionButton`1|50%|| |Microsoft.FluentUI.AspNetCore.Components.ActionLink`1|0%|| |Microsoft.FluentUI.AspNetCore.Components.CalendarExtended|95%|86.6%| |Microsoft.FluentUI.AspNetCore.Components.CalendarTitles|87%|76.6%| |Microsoft.FluentUI.AspNetCore.Components.CheckboxChangeEventArgs|50%|| |Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1|56.5%|21%| |Microsoft.FluentUI.AspNetCore.Components.CommunicationToast|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.CommunicationToastContent|0%|| |Microsoft.FluentUI.AspNetCore.Components.ComponentParameters|16.6%|0%| |Microsoft.FluentUI.AspNetCore.Components.Components.Dialog.ContentComponent
s.RenderFragmentDialog|100%|| |Microsoft.FluentUI.AspNetCore.Components.Components.Tooltip.TooltipGlobalOp
tions|0%|| |Microsoft.FluentUI.AspNetCore.Components.Components.Tooltip.TooltipOptions|0%|| |Microsoft.FluentUI.AspNetCore.Components.Components.Tooltip.TooltipService|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.CountdownTimer|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.AsyncQuery
ExecutorSupplier|72.7%|66.6%| |Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.ColumnsCol
lectedNotifier`1|87.5%|50%| |Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.Defer|100%|| |Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.DisplayAtt
ributeExtensions|66.6%|50%| |Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.InternalGr
idContext`1|94.7%|100%| |Microsoft.FluentUI.AspNetCore.Components.DataGridCellFocusEventArgs|0%|| |Microsoft.FluentUI.AspNetCore.Components.DataGridRowFocusEventArgs|0%|| |Microsoft.FluentUI.AspNetCore.Components.DialogEventArgs|0%|| |Microsoft.FluentUI.AspNetCore.Components.DialogInstance|92.3%|75%| |Microsoft.FluentUI.AspNetCore.Components.DialogParameters|92.3%|| |Microsoft.FluentUI.AspNetCore.Components.DialogParameters`1|0%|| |Microsoft.FluentUI.AspNetCore.Components.DialogReference|33.3%|0%| |Microsoft.FluentUI.AspNetCore.Components.DialogResult|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.DialogService|3%|3.3%| |Microsoft.FluentUI.AspNetCore.Components.Emoji|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.EmojiCompress|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.EmojiInfo|0%|| |Microsoft.FluentUI.AspNetCore.Components.Extensions.AdditionalAttributesExt
ensions|100%|100%| |Microsoft.FluentUI.AspNetCore.Components.Extensions.BooleanExtensions|100%|50%| |Microsoft.FluentUI.AspNetCore.Components.Extensions.DateTimeExtensions|83.8%|85%| |Microsoft.FluentUI.AspNetCore.Components.Extensions.EnumExtensions|84.6%|75%| |Microsoft.FluentUI.AspNetCore.Components.Extensions.FluentInputExtensions|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentAccessibilityStatus|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentAccordion|52.3%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentAccordionItem|73.9%|35.7%| |Microsoft.FluentUI.AspNetCore.Components.FluentAnchor|88.8%|67.8%| |Microsoft.FluentUI.AspNetCore.Components.FluentAnchoredRegion|86%|60%| |Microsoft.FluentUI.AspNetCore.Components.FluentAppBar|57.7%|41.1%| |Microsoft.FluentUI.AspNetCore.Components.FluentAppBarItem|84.3%|66.6%| |Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1|80.7%|66.6%| |Microsoft.FluentUI.AspNetCore.Components.FluentBadge|100%|100%| |Microsoft.FluentUI.AspNetCore.Components.FluentBodyContent|100%|| |Microsoft.FluentUI.AspNetCore.Components.FluentBreadcrumb|100%|| |Microsoft.FluentUI.AspNetCore.Components.FluentBreadcrumbItem|100%|100%| |Microsoft.FluentUI.AspNetCore.Components.FluentButton|82.8%|64%| |Microsoft.FluentUI.AspNetCore.Components.FluentCalendar|89.9%|83.3%| |Microsoft.FluentUI.AspNetCore.Components.FluentCalendarBase|100%|94.4%| |Microsoft.FluentUI.AspNetCore.Components.FluentCalendarDay|100%|100%| |Microsoft.FluentUI.AspNetCore.Components.FluentCalendarMonth|100%|66.6%| |Microsoft.FluentUI.AspNetCore.Components.FluentCalendarYear|90.9%|60%| |Microsoft.FluentUI.AspNetCore.Components.FluentCard|100%|100%| |Microsoft.FluentUI.AspNetCore.Components.FluentCheckbox|95.7%|90.3%| |Microsoft.FluentUI.AspNetCore.Components.FluentCollapsibleRegion|100%|100%| |Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1|51.8%|31.5%| |Microsoft.FluentUI.AspNetCore.Components.FluentComponentBase|90.9%|50%| |Microsoft.FluentUI.AspNetCore.Components.FluentCounterBadge|92.3%|86.5%| |Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1|56.9%|44.7%| |Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1|93.3%|| |Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1|57.4%|30%| |Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker|75.6%|47.2%| |Microsoft.FluentUI.AspNetCore.Components.FluentDesignSystemProvider|100%|50%| |Microsoft.FluentUI.AspNetCore.Components.FluentDesignTheme|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentDialog|61%|71%| |Microsoft.FluentUI.AspNetCore.Components.FluentDialogBody|100%|| |Microsoft.FluentUI.AspNetCore.Components.FluentDialogFooter|66.6%|44.1%| |Microsoft.FluentUI.AspNetCore.Components.FluentDialogHeader|82.6%|76.9%| |Microsoft.FluentUI.AspNetCore.Components.FluentDialogProvider|38%|18.7%| |Microsoft.FluentUI.AspNetCore.Components.FluentDivider|82.3%|100%| |Microsoft.FluentUI.AspNetCore.Components.FluentDragContainer`1|69.2%|| |Microsoft.FluentUI.AspNetCore.Components.FluentDragEventArgs`1|0%|| |Microsoft.FluentUI.AspNetCore.Components.FluentDropZone`1|22.2%|5%| |Microsoft.FluentUI.AspNetCore.Components.FluentEditForm|100%|100%| |Microsoft.FluentUI.AspNetCore.Components.FluentEmoji`1|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentFlipper|100%|| |Microsoft.FluentUI.AspNetCore.Components.FluentFooter|100%|| |Microsoft.FluentUI.AspNetCore.Components.FluentGrid|71.4%|50%| |Microsoft.FluentUI.AspNetCore.Components.FluentGridItem|87.5%|82.5%| |Microsoft.FluentUI.AspNetCore.Components.FluentHeader|100%|| |Microsoft.FluentUI.AspNetCore.Components.FluentHighlighter|80%|20%| |Microsoft.FluentUI.AspNetCore.Components.FluentHorizontalScroll|51.8%|20%| |Microsoft.FluentUI.AspNetCore.Components.FluentIcon`1|94.8%|93.3%| |Microsoft.FluentUI.AspNetCore.Components.FluentInputBase`1|64.1%|57.5%| |Microsoft.FluentUI.AspNetCore.Components.FluentInputFile|88.5%|76.6%| |Microsoft.FluentUI.AspNetCore.Components.FluentInputFileBuffer|100%|| |Microsoft.FluentUI.AspNetCore.Components.FluentInputFileEventArgs|91.6%|| |Microsoft.FluentUI.AspNetCore.Components.FluentInputLabel|95.2%|88.8%| |Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode|89.5%|84.6%| |Microsoft.FluentUI.AspNetCore.Components.FluentKeyCodeEventArgs|100%|83.3%| |Microsoft.FluentUI.AspNetCore.Components.FluentKeyCodeProvider|57.1%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentLabel|58.6%|21.4%| |Microsoft.FluentUI.AspNetCore.Components.FluentLayout|100%|| |Microsoft.FluentUI.AspNetCore.Components.FluentListbox`1|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentMain|100%|| |Microsoft.FluentUI.AspNetCore.Components.FluentMainLayout|100%|100%| |Microsoft.FluentUI.AspNetCore.Components.FluentMenu|38.8%|41.6%| |Microsoft.FluentUI.AspNetCore.Components.FluentMenuButton|59.3%|8.3%| |Microsoft.FluentUI.AspNetCore.Components.FluentMenuItem|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentMessageBar|50%|22.8%| |Microsoft.FluentUI.AspNetCore.Components.FluentMessageBarProvider|82.3%|66.6%| |Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitter|81.1%|66.6%| |Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterEventArgs|100%|| |Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterPane|95.7%|87.5%| |Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterResizeEventArgs|100%|| |Microsoft.FluentUI.AspNetCore.Components.FluentNavBase|50%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentNavGroup|61.2%|36.6%| |Microsoft.FluentUI.AspNetCore.Components.FluentNavLink|84.6%|50%| |Microsoft.FluentUI.AspNetCore.Components.FluentNavMenu|57.1%|40%| |Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuGroup|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuItemBase|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuLink|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuTree|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentNumberField`1|60.4%|47.2%| |Microsoft.FluentUI.AspNetCore.Components.FluentOption`1|52.9%|33.3%| |Microsoft.FluentUI.AspNetCore.Components.FluentOverflow|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentOverflowItem|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentOverlay|70.5%|50%| |Microsoft.FluentUI.AspNetCore.Components.FluentPageScript|100%|| |Microsoft.FluentUI.AspNetCore.Components.FluentPaginator|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentPersona|100%|84.3%| |Microsoft.FluentUI.AspNetCore.Components.FluentPopover|76%|65.9%| |Microsoft.FluentUI.AspNetCore.Components.FluentPresenceBadge|60.9%|29.1%| |Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu|100%|100%| |Microsoft.FluentUI.AspNetCore.Components.FluentProgress|79%|68.1%| |Microsoft.FluentUI.AspNetCore.Components.FluentProgressRing|97.2%|92.8%| |Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh|94%|89.2%| |Microsoft.FluentUI.AspNetCore.Components.FluentRadio`1|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentRadioContext|70%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentRadioGroup`1|80%|31.2%| |Microsoft.FluentUI.AspNetCore.Components.FluentSearch|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentSelect`1|0%|| |Microsoft.FluentUI.AspNetCore.Components.FluentSkeleton|52.9%|50%| |Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1|56.3%|38.6%| |Microsoft.FluentUI.AspNetCore.Components.FluentSliderLabel`1|57.5%|30%| |Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1|68.2%|50%| |Microsoft.FluentUI.AspNetCore.Components.FluentSortableListEventArgs|0%|| |Microsoft.FluentUI.AspNetCore.Components.FluentSpacer|100%|50%| |Microsoft.FluentUI.AspNetCore.Components.FluentSplashScreen|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentSplitter|70.7%|40%| |Microsoft.FluentUI.AspNetCore.Components.FluentStack|90.4%|60%| |Microsoft.FluentUI.AspNetCore.Components.FluentSwitch|77.7%|50%| |Microsoft.FluentUI.AspNetCore.Components.FluentTab|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentTabs|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentTextArea|80%|| |Microsoft.FluentUI.AspNetCore.Components.FluentTextField|86.6%|60%| |Microsoft.FluentUI.AspNetCore.Components.FluentTimePicker|100%|75%| |Microsoft.FluentUI.AspNetCore.Components.FluentToast|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentToastProvider|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentToolbar|100%|| |Microsoft.FluentUI.AspNetCore.Components.FluentTooltip|60.7%|47.6%| |Microsoft.FluentUI.AspNetCore.Components.FluentTooltipProvider|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentTreeItem|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentTreeView|22.6%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentValidationMessage`1|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.FluentValidationSummary|100%|87.5%| |Microsoft.FluentUI.AspNetCore.Components.FluentWizard|94%|82.3%| |Microsoft.FluentUI.AspNetCore.Components.FluentWizardStep|95.7%|88.3%| |Microsoft.FluentUI.AspNetCore.Components.FluentWizardStepArgs|100%|| |Microsoft.FluentUI.AspNetCore.Components.FluentWizardStepChangeEventArgs|100%|| |Microsoft.FluentUI.AspNetCore.Components.GlobalState|33.3%|50%| |Microsoft.FluentUI.AspNetCore.Components.GridItemsProviderRequest`1|92.3%|25%| |Microsoft.FluentUI.AspNetCore.Components.GridItemsProviderResult|100%|| |Microsoft.FluentUI.AspNetCore.Components.GridItemsProviderResult`1|100%|| |Microsoft.FluentUI.AspNetCore.Components.GridSort`1|35.1%|25.9%| |Microsoft.FluentUI.AspNetCore.Components.HorizontalScrollEventArgs|0%|| |Microsoft.FluentUI.AspNetCore.Components.Icon|81.3%|82.3%| |Microsoft.FluentUI.AspNetCore.Components.IconFromImage|100%|| |Microsoft.FluentUI.AspNetCore.Components.IconInfo|100%|| |Microsoft.FluentUI.AspNetCore.Components.Identifier|66.6%|62.5%| |Microsoft.FluentUI.AspNetCore.Components.IdentifierContext|66.6%|41.6%| |Microsoft.FluentUI.AspNetCore.Components.INavMenuItemsOwner|0%|| |Microsoft.FluentUI.AspNetCore.Components.Infrastructure.EventCallbackSubscr
ibable`1|83.3%|100%| |Microsoft.FluentUI.AspNetCore.Components.Infrastructure.EventCallbackSubscr
iber`1|90%|75%| |Microsoft.FluentUI.AspNetCore.Components.InputHelpers`1|38.8%|31.6%| |Microsoft.FluentUI.AspNetCore.Components.InternalDialogContext|80%|| |Microsoft.FluentUI.AspNetCore.Components.InternalListContext`1|60%|50%| |Microsoft.FluentUI.AspNetCore.Components.InternalToastContext|0%|| |Microsoft.FluentUI.AspNetCore.Components.KeyCodeService|84.6%|50%| |Microsoft.FluentUI.AspNetCore.Components.LibraryConfiguration|100%|| |Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1|50%|43.4%| |Microsoft.FluentUI.AspNetCore.Components.LoadedEventArgs|0%|| |Microsoft.FluentUI.AspNetCore.Components.LuminanceChangedEventArgs|0%|| |Microsoft.FluentUI.AspNetCore.Components.MenuChangeEventArgs|0%|| |Microsoft.FluentUI.AspNetCore.Components.Message|50%|0%| |Microsoft.FluentUI.AspNetCore.Components.MessageBox|50%|0%| |Microsoft.FluentUI.AspNetCore.Components.MessageBoxContent|0%|| |Microsoft.FluentUI.AspNetCore.Components.MessageOptions|76.9%|| |Microsoft.FluentUI.AspNetCore.Components.MessageService|33%|26.9%| |Microsoft.FluentUI.AspNetCore.Components.NavMenuActionArgs|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.OfficeColorUtilities|0%|| |Microsoft.FluentUI.AspNetCore.Components.Option`1|0%|| |Microsoft.FluentUI.AspNetCore.Components.OptionsSearchEventArgs`1|100%|| |Microsoft.FluentUI.AspNetCore.Components.OverflowItem|100%|| |Microsoft.FluentUI.AspNetCore.Components.PaginationState|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.ProgressFileDetails|100%|| |Microsoft.FluentUI.AspNetCore.Components.ProgressToast|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.ProgressToastContent|0%|| |Microsoft.FluentUI.AspNetCore.Components.PropertyColumn`2|71.4%|46.6%| |Microsoft.FluentUI.AspNetCore.Components.Resources.TimeAgoResource|76.1%|100%| |Microsoft.FluentUI.AspNetCore.Components.SelectColumn`1|93.4%|86.9%| |Microsoft.FluentUI.AspNetCore.Components.ServiceCollectionExtensions|78.5%|100%| |Microsoft.FluentUI.AspNetCore.Components.SortedProperty|0%|| |Microsoft.FluentUI.AspNetCore.Components.SplashScreenContent|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.SplitterCollapsedEventArgs|0%|| |Microsoft.FluentUI.AspNetCore.Components.SplitterResizedEventArgs|0%|| |Microsoft.FluentUI.AspNetCore.Components.StandardLuminanceExtensions|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.StaticAssetServiceConfiguration|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.TabChangeEventArgs|0%|| |Microsoft.FluentUI.AspNetCore.Components.TemplateColumn`1|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.TimeAgoOptions|100%|| |Microsoft.FluentUI.AspNetCore.Components.ToastInstance|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.ToastParameters|0%|| |Microsoft.FluentUI.AspNetCore.Components.ToastParameters`1|0%|| |Microsoft.FluentUI.AspNetCore.Components.ToastResult|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.ToastService|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.TreeChangeEventArgs|0%|| |Microsoft.FluentUI.AspNetCore.Components.UploadedFileDetails|0%|| |Microsoft.FluentUI.AspNetCore.Components.Utilities.CssBuilder|100%|91.6%| |Microsoft.FluentUI.AspNetCore.Components.Utilities.Debouncer|94.8%|37.5%| |Microsoft.FluentUI.AspNetCore.Components.Utilities.InlineStyleBuilder|96.4%|87.5%| |Microsoft.FluentUI.AspNetCore.Components.Utilities.JSModule|0%|0%| |Microsoft.FluentUI.AspNetCore.Components.Utilities.Splitter|82.8%|81.8%| |Microsoft.FluentUI.AspNetCore.Components.Utilities.StyleBuilder|100%|91.6%| |Microsoft.FluentUI.AspNetCore.Components.ZIndex|100%|| |System.Text.RegularExpressions.Generated|72.5%|42.1%|

vnbaaij commented 3 weeks ago

Love this!

Would probably be good to store the selected state of rows centrally, for example in the InternalGridContext And also to have Selected`SelectedChanged` on the DataGridRow so that an initial state can be set programmatically

hksalessio commented 3 weeks ago

Finally!! Looking great! Always been using some ugly workarounds to get similar behavior. Could you maybe add the option for an checkbox in the header? Like maybe a parameter SelectMode with SelectMode.Single and SelectMode.Multiple, where the latter adds the header checkbox? And won't this column allow for a bindable "SelectedItems" HashSet in the DataGrid?

dvoituron commented 3 weeks ago

Would probably be good to store the selected state of rows centrally, for example in the InternalGridContext And also to have Selected``SelectedChanged on the DataGridRow so that an initial state can be set programmatically

Columns and attributes already updated

As far as storing the selected state is concerned, this could be an additional feature, but it would probably cause a lot of problems. For example, when using the virtualization function, I'm not sure that all "previous" items are stored in this internal memory. I will check.

dvoituron commented 3 weeks ago

Finally!! Looking great! Always been using some ugly workarounds to get similar behavior. Could you maybe add the option for an checkbox in the header? Like maybe a parameter SelectMode with SelectMode.Single and SelectMode.Multiple, where the latter adds the header checkbox? And won't this column allow for a bindable "SelectedItems" HashSet in the DataGrid?

On the same remark, adding a checkbox in the header seems like a good thing if we have all the data in memory. But we could add this option and an EventCallback to allow the developer to select all the elements.

About Single/Multiple, yes that will be done :-)

dvoituron commented 3 weeks ago

@vnbaaij @hksalessio I renamed to these attributes: Property and OnSelect. And I added a bindable SelectAll property which display a [x] in the column header. So the dev can intercept the SelectAllChanged (or :after event) to update his model.

Example

SelectAllChanged="@(all => people.ToList().ForEach(p => p.Selected = (all == true)))"

sardar97 commented 3 weeks ago

Nice work @dvoituron thank u for creating this feature. I just have one suggestion when you select one row or more the select all checkbox should change like a (minus) inside the select all checkbox and when you select all it should change to select all. for more explanation I will show it with 2 image.

when you select 1 row or more :

when you select all rows :

dvoituron commented 3 weeks ago

Nice work @dvoituron thank u for creating this feature. I just have one suggestion when you select one row or more the select all checkbox should change like a (minus) inside the select all checkbox and when you select all it should change to select all. for more explanation I will show it with 2 image.

That's not the case in Windows Explorer, for example

sardar97 commented 3 weeks ago

so we could not have it even with CSS ?

sardar97 commented 3 weeks ago

and one more suggestion is very important please if you haven't done it already! when the user click the row I mean anywhere on the it should select not only click on exactly the checkbox.

dvoituron commented 3 weeks ago

and one more suggestion is very important please if you haven't done it already! when the user click the row I mean anywhere on the it should select not only click on exactly the checkbo

Already done and included in the GIF above :-)

dvoituron commented 3 weeks ago

Updated with

SelectedItems Gets or sets the list of selected items (in addition with Property and OnSelect). I will write a documentation to explain different uses.
SelectMode selection mode (Single or Multiple).
IconIndeterminate Icon to be rendered when some but not all rows are selected.

GIFs in summary are also updated.

dvoituron commented 2 weeks ago

I finished the development and updated the description (top of this PR). I still need to add the unit tests to finalize the PR.

boyanmihnev92 commented 2 weeks ago

Will this feature be released any time soon?

chandrasbd commented 2 weeks ago

added to milestone v4.7.2

microsoft / fluentui-blazor