A grouped list (GroupedList
) allows you to render a set of items as multiple lists with various grouping properties.
A grouped list (GroupedList
) allows you to render a set of items as multiple lists with various grouping properties.
<Stack Style="height:calc(100% - 0px);"> <Toggle Label="IsVirtualizing" @bind-Checked="isVirtualizing" /> <Toggle OffText="Normal" OnText="Compact" Label="Enable compact mode" @bind-Checked="isCompact" /> <div data-is-scrollable="true" style="height:100%;overflow-y:auto;"> <SelectionZone Selection=@selection DisableRenderOnSelectionChanged="true" SelectionMode=@SelectionMode.Multiple> <FocusZone Direction="FocusZoneDirection.Vertical"> <GroupedList ItemsSource=@groupedData TKey="object" GetKey="item => item.Key" Compact=@isCompact IsVirtualizing=@isVirtualizing TItem="GroupedDataItem" GroupTitleSelector=@(x=>x.DisplayName) Selection=@selection SubGroupSelector=@(x=>x.Data) SelectionMode=@SelectionMode.Multiple> <ItemTemplate> <DetailsRow Item=@context.Item!.Item Columns=@(columns!) Compact=@isCompact ItemIndex=@context.Index Selection=@(selection!) GroupNestingDepth=@context.Item.Depth SelectionMode=@SelectionMode.Multiple /> </ItemTemplate> </GroupedList> </FocusZone> </SelectionZone> </div> </Stack>