> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/blazor-ai-migrator/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/blazor-ai-migrator/blazor-ai-migrator/dcp-desktop-compatibility-library/components-information/listview/wmlistviewdetails.md).

# 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**

```css
.@model.GetComponentClass() .k-table,
.@model.GetComponentClass() .k-grid {
    font-size: inherit;
}

.@model.GetComponentClass() tr > td,
.@model.GetComponentClass() 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`