WMListViewDetails

Description

This component renders the Details view of a Gap.Blazor.ListView using a virtualized Telerik Grid. It supports dynamic columns, checkbox selection, and real-time updates to the grid based on changes in the underlying model. The component is optimized for performance with virtual scrolling and dynamic data binding.

Usage

@inherits WMListView
@using Gap.Blazor.Components
@using System.Dynamic
@using Telerik.Blazor.Components
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
@namespace Gap.Blazor.Components

<WMStyleBase model=@listViewModel></WMStyleBase>
<div class="@listViewModel.GetStringClasses()">
    <TelerikGrid Height="100%" Width="100%" @ref="telerikGrid"
                 SelectionMode="GridSelectionMode.Single"
                 OnRead="@OnDataRead"
                 SelectedItemsChanged="@((IEnumerable<ExpandoObject> items) => selectionChangeHandler())"
                 RowHeight="20" PageSize="50"
                 ScrollMode="@GridScrollMode.Virtual"
                 Resizable="true">
        <GridColumns>
            @if (listViewModel.Columns.Count > 0)
            {
                if (listViewModel.CheckBoxes)
                {
                    <GridColumn FieldType="typeof(bool)" Width="16px">
                        <Template>
                            @{
                                var index = this.DataAdapter.GetRowIndex((ExpandoObject)context);
                                <div style="display: flex; justify-content: center;">
                                    <TelerikCheckBox Value=@GetItemCheckedValue(index)
                                                     ValueChanged="@((bool value) => OnItemCheckBoxValueChanged(value, index))"/>
                                </div>
                            }
                        </Template>
                    </GridColumn>
                }
                foreach (var column in listViewModel.Columns.Cast<ColumnHeader>())
                {
                    <GridColumn Field=@column.Text FieldType="typeof(string)" Width="@($"{column.Width}px")">
                        <HeaderTemplate>
                            <span>@column.Text</span>
                        </HeaderTemplate>
                    </GridColumn>
                }
            }
        </GridColumns>
    </TelerikGrid>
</div>

Properties

• ListViewModel: Instance of the Gap.Blazor.ListView model.

• telerikGrid: Reference to the Telerik Grid component.

• DataAdapter: Adapter that transforms ListViewItem data into a format compatible with Telerik Grid.

Methods

• OnInitialized(): Subscribes to model events for item and subitem changes.

• OnDataRead(GridReadEventArgs): Handles virtual scrolling and paging by returning a DataSourceResult from the adapter.

• selectionChangeHandler(): Maps selected grid row to the corresponding ListViewItem and triggers ListViewItemClickAction and SelectedIndexChanged.

• Items_AfterAdd / AfterInsert / BeforeRemove / AfterClear: Synchronize grid data with model changes.

• UpdateSubItem(): Updates a specific cell in the grid when a subitem changes.

• RecallOnChange_Data(): Forces the grid to refresh its state.

• GetItemCheckedValue(index): Returns the checked state of a ListViewItem.

• OnItemCheckBoxValueChanged(value, index): Updates the checked state of a ListViewItem.

Dynamic Rendering

• GridColumns: Dynamically generated based on listViewModel.Columns.

• Checkbox Column: Conditionally rendered if CheckBoxes is enabled.

• Virtual Scrolling: Enabled via ScrollMode="Virtual" and OnRead.

Styles

[e-mail]() .k-table,
[e-mail]() .k-grid {
    font-size: inherit;
}

[e-mail]() tr > td,
[e-mail]() tr > th {
    padding-block: 0px !important;
    padding-inline: 0px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

Events

• Items Collection Events: AfterAdd, AfterInsert, BeforeRemove, AfterClear

• SubItem Updates: UpdateSubItem

• Selection Events: SelectedItemsChanged, ListViewItemClickAction, SelectedIndexChanged