[DataGrid] Multiselect feature, adding a `SelectColumn` #1952

dvoituron · 2024-04-26T12:55:37Z

[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

Unit Tests

github-actions · 2024-04-26T12:59:28Z

✅ All tests passed successfully

Details on your Workflow / Core Tests page.

github-actions · 2024-04-26T12:59:43Z

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
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 · 2024-04-26T13:25:11Z

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 · 2024-04-26T13:26:17Z

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 · 2024-04-26T13:30:34Z

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 · 2024-04-26T13:33:09Z

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 · 2024-04-26T15:42:28Z

@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)))"

…oft/fluentui-blazor into users/datagrid/multi-select

sardar97 · 2024-04-26T16:41:16Z

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 · 2024-04-26T16:43:29Z

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 · 2024-04-26T16:45:17Z

so we could not have it even with CSS ?

sardar97 · 2024-04-26T16:47:04Z

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 · 2024-04-26T16:49:31Z

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 :-)

examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor

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

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

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

boyanmihnev92 · 2024-04-30T15:03:52Z

Will this feature be released any time soon?

chandrasbd · 2024-05-02T05:58:17Z

added to milestone v4.7.2

matasbern · 2024-06-05T21:07:32Z

What if I want to only Select item on Checkbox rather than Full row? Is there a way to do it? SOme of my columns contain custom data and DATA that user has @OnClick on them.. Trying to solve it?

dvoituron · 2024-06-06T08:17:34Z

What if I want to only Select item on Checkbox rather than Full row? Is there a way to do it? SOme of my columns contain custom data and DATA that user has @OnClick on them.. Trying to solve it?

Today, this is not possible. Unless you create your own "SelectColumn" using a TemplateColumn.

hksalessio · 2024-06-06T08:19:03Z

What if I want to only Select item on Checkbox rather than Full row? Is there a way to do it? SOme of my columns contain custom data and DATA that user has @OnClick on them.. Trying to solve it?

I am kind of working on a pull request that could solve this problem. Shoud be ready for review later today.

matasbern · 2024-06-06T10:12:33Z

Thanks for such a rapid response guys.
Just one question, from what I understand it works by design.. but it seems to be wrong?
If I open page which has multiselect, my first select gets added to my IEnumerable SelectedItems, but UI rerenders and removes the checkbox state?
You can see what I mean here. Is there a way to stop this?

EDIT: I'm using SelectedItems
EDIT EDIT: Ok, it seems its happening only if I'm using ItemsProvider, Items with IQueryable works fine. Seems like first click on ItemsProvider MultiSelect triggers a call to API. Any ideas how to overcome this?

dvoituron · 2024-06-06T11:46:32Z

EDIT EDIT: Ok, it seems its happening only if I'm using ItemsProvider, Items with IQueryable works fine. Seems like first click on ItemsProvider MultiSelect triggers a call to API. Any ideas how to overcome this?

Do you use manual management via Property and OnSelect? Because an ItemsProvider doesn't store your data (and your selection in memory). You have to use "manual management" to store this information in your objects.

matasbern · 2024-06-06T12:41:46Z

EDIT EDIT: Ok, it seems its happening only if I'm using ItemsProvider, Items with IQueryable works fine. Seems like first click on ItemsProvider MultiSelect triggers a call to API. Any ideas how to overcome this?

Do you use manual management via Property and OnSelect? Because an ItemsProvider doesn't store your data (and your selection in memory). You have to use "manual management" to store this information in your objects.

Ok I see, thanks for your reply. Is there a way to somehow stop triggering Grid refresh on any 'onclick' event that triggers it? I have noticed it also happens if I add a button to TemplateColumn, once I clicked on a button first time - it reloads the data. Any consequent clicks don't do it.

vnbaaij · 2024-06-06T12:52:51Z

We can't change that on our side. You could optimize on your side and determine is the reload is necessary.

dvoituron added 2 commits April 26, 2024 14:34

Add SelectRowColumn column

a113c59

Including Icons

81177cd

dvoituron mentioned this pull request Apr 26, 2024

Add MultiSelect to FluentDataGrid #173

Closed

Update the colum name to SelectColumn and use a EventCallback

3e233e2

vnbaaij changed the title ~~[DataGrid] Multiselect feature, adding a SelectRowColumn~~ [DataGrid] Multiselect feature, adding a SelectColumn Apr 26, 2024

Adding TGridItem="Person"

ef233bc

dvoituron mentioned this pull request Apr 26, 2024

Add support for OnRowClick & OnRowDblClick in Fluent Data Grid #1953

Closed

dvoituron added 2 commits April 26, 2024 17:19

Add SelectAllChanged

5524506

Add a bindable SelectAll property

fc2f225

dvoituron and others added 6 commits April 26, 2024 17:46

Remove AllSelected demo var

ac38417

Merge branch 'dev' into users/datagrid/multi-select

888a78e

Merge branch 'dev' into users/datagrid/multi-select

696923e

Add Style

4bf3bbf

Fix the sample

0b38e8c

Merge branch 'users/datagrid/multi-select' of github.com-perso:micros…

f110762

…oft/fluentui-blazor into users/datagrid/multi-select

dvoituron added 3 commits April 26, 2024 23:11

Add IconIndeterminate

cbfe3c1

Replace by IEnumerable

0b47a07

Add DataGridSelectMode.Single

5ed9696

dvoituron added 7 commits April 28, 2024 18:27

Update doc

d360e7e

Add first Unit Test

323f2c3

Add Unit Tests

e275763

Add Unit Tests for Property attribute

56d3a89

Merge branch 'dev' into users/datagrid/multi-select

4f3e2cc

Add SwitchMultiToSingleSelect

cf19e3f

Update the doc

6473d6e

dvoituron marked this pull request as ready for review April 29, 2024 10:42

dvoituron requested a review from vnbaaij as a code owner April 29, 2024 10:42

dvoituron enabled auto-merge (squash) April 29, 2024 10:43

vnbaaij added this to the v4.7.2 milestone Apr 29, 2024

vnbaaij linked an issue Apr 29, 2024 that may be closed by this pull request

Add support for OnRowClick & OnRowDblClick in Fluent Data Grid #1953

Closed

vnbaaij requested changes Apr 29, 2024

View reviewed changes

verdie-g mentioned this pull request Apr 30, 2024

Add a hover effect on the events list rows verdie-g/dotnet-events-viewer#27

Closed

dvoituron and others added 2 commits April 30, 2024 10:06

Update Single Icons and Doc (PR comments)

c927720

Merge branch 'dev' into users/datagrid/multi-select

1ae2d38

vnbaaij approved these changes Apr 30, 2024

View reviewed changes

dvoituron merged commit 7a94d7a into dev Apr 30, 2024
3 checks passed

dvoituron deleted the users/datagrid/multi-select branch April 30, 2024 10:08

hksalessio mentioned this pull request Jun 6, 2024

[DataGrid] Add OnCellClick and allow restricting selection to checkboxes #2160

Closed

8 tasks

dvoituron mentioned this pull request Jun 24, 2024

[DataGrid] Add OnCellClick event and SelectColumn.SelectFromEntireRow property #2252

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Multiselect feature, adding a `SelectColumn` #1952

[DataGrid] Multiselect feature, adding a `SelectColumn` #1952

dvoituron commented Apr 26, 2024 •

edited

Loading

github-actions bot commented Apr 26, 2024 •

edited

Loading

github-actions bot commented Apr 26, 2024 •

edited

Loading

vnbaaij commented Apr 26, 2024

hksalessio commented Apr 26, 2024

dvoituron commented Apr 26, 2024

dvoituron commented Apr 26, 2024

dvoituron commented Apr 26, 2024

sardar97 commented Apr 26, 2024 •

edited

Loading

dvoituron commented Apr 26, 2024

sardar97 commented Apr 26, 2024

sardar97 commented Apr 26, 2024 •

edited

Loading

dvoituron commented Apr 26, 2024

boyanmihnev92 commented Apr 30, 2024 •

edited

Loading

chandrasbd commented May 2, 2024

matasbern commented Jun 5, 2024

dvoituron commented Jun 6, 2024

hksalessio commented Jun 6, 2024

matasbern commented Jun 6, 2024 •

edited

Loading

dvoituron commented Jun 6, 2024

matasbern commented Jun 6, 2024

vnbaaij commented Jun 6, 2024

[DataGrid] Multiselect feature, adding a SelectColumn #1952

[DataGrid] Multiselect feature, adding a SelectColumn #1952

Conversation

dvoituron commented Apr 26, 2024 • edited Loading

[DataGrid] Multiselect feature, adding a SelectColumn

Example

Unit Tests

github-actions bot commented Apr 26, 2024 • edited Loading

github-actions bot commented Apr 26, 2024 • edited Loading

Summary - Unit Tests Code Coverage

Coverage

vnbaaij commented Apr 26, 2024

hksalessio commented Apr 26, 2024

dvoituron commented Apr 26, 2024

dvoituron commented Apr 26, 2024

dvoituron commented Apr 26, 2024

sardar97 commented Apr 26, 2024 • edited Loading

dvoituron commented Apr 26, 2024

sardar97 commented Apr 26, 2024

sardar97 commented Apr 26, 2024 • edited Loading

dvoituron commented Apr 26, 2024

boyanmihnev92 commented Apr 30, 2024 • edited Loading

chandrasbd commented May 2, 2024

matasbern commented Jun 5, 2024

dvoituron commented Jun 6, 2024

hksalessio commented Jun 6, 2024

matasbern commented Jun 6, 2024 • edited Loading

dvoituron commented Jun 6, 2024

matasbern commented Jun 6, 2024

vnbaaij commented Jun 6, 2024

[DataGrid] Multiselect feature, adding a `SelectColumn` #1952

[DataGrid] Multiselect feature, adding a `SelectColumn` #1952

dvoituron commented Apr 26, 2024 •

edited

Loading

[DataGrid] Multiselect feature, adding a `SelectColumn`

github-actions bot commented Apr 26, 2024 •

edited

Loading

github-actions bot commented Apr 26, 2024 •

edited

Loading

sardar97 commented Apr 26, 2024 •

edited

Loading

sardar97 commented Apr 26, 2024 •

edited

Loading

boyanmihnev92 commented Apr 30, 2024 •

edited

Loading

matasbern commented Jun 6, 2024 •

edited

Loading