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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gapvelocity.ai/blazor-ai-migrator/blazor-ai-migrator/dcp-desktop-compatibility-library/components-information/listview/wmlistviewdetails.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.