GroupedList

Overview

A grouped list (GroupedList) allows you to render a set of items as multiple lists with various grouping properties.

Usage

Grouped List
<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>