TreeListColumnHeaderCaptionTemplateContext.IsVirtualized Property

Returns whether the column is being virtualized.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public bool IsVirtualized { get; }

Property Value

Type	Description
Boolean

true if the column is virtualized; otherwise, false.

Remarks

You can activate horizontal virtual scrolling for the TreeList component as follows:

Set VirtualScrollingEnabled to true.
Set VirtualScrollingMode to Columns or RowsAndColumns.

Once activated, the TreeList displays only columns that are in the viewport and virtualizes all other columns. For virtualized data columns, the TreeList component does not render column filter menus or sort glyphs. Use the IsVirtualized context property to render a specific caption while a column is virtualized.

The following code snippet displays Loading… captions for all virtualized columns:

Razor
CSS

razor

<DxTreeList @ref="MyTreeList"
            Data="TreeListData"
            KeyFieldName="Id"
            ParentKeyFieldName="ParentId"
            SkeletonRowsEnabled="SkeletonRowsEnabled"
            FilterMenuButtonDisplayMode="TreeListFilterMenuButtonDisplayMode.Always"
            VirtualScrollingMode="TreeListVirtualScrollingMode.RowsAndColumns"
            VirtualScrollingEnabled="true">
    <Columns>
        <DxTreeListCommandColumn Width="150px">
            <HeaderTemplate Context="CaptionContext">
                @{
                    if (CaptionContext.IsVirtualized) {
                        <span>Loading...</span>
                    }
                    else {
                        <a class="oi oi-plus" @onclick="@(() => MyTreeList.StartEditNewRowAsync())" 
                           class="link-decoration" href="javascript:void(0);"></a>
                    }
                }
            </HeaderTemplate>
        </DxTreeListCommandColumn>

        <DxTreeListSelectionColumn Width="80px">
            <HeaderTemplate Context="CaptionContext">
                @{
                    if (CaptionContext.IsVirtualized) {
                        <span>Loading...</span>
                    }
                    else {
                        <DxButton Click="() => MyTreeList.SelectAllOnPage()" Text="Select All" />
                    }
                }
            </HeaderTemplate>
        </DxTreeListSelectionColumn>
        @* ... *@
    </Columns>
    <ColumnHeaderCaptionTemplate Context="CaptionContext">
    @{
        if (CaptionContext.IsVirtualized) {
            <span>Loading...</span>
        }
        else {
            <span title="Click the header to sort data by this column.">
                @CaptionContext.Caption
            </span>
        }
    }  
    </ColumnHeaderCaptionTemplate>
</DxTreeList>

@code {
    ITreeList MyTreeList;
    object TreeListData;
    // ...
}

css

.link-decoration {
    text-decoration: none;
}