# Syncfusion Aspnetcore Listview

> Master the Syncfusion ListView component for ASP.NET Core to create interactive, data-bound lists with advanced features like grouping, virtualization, templates, and nested navigation.

- Skill: `syncfusion/syncfusion-aspnetcore-listview` (Agent Skill, multi-file: 12 files)
- Install (CLI): `npx skillmds@latest add syncfusion/syncfusion-aspnetcore-listview`
- Raw SKILL.md: https://api.skillmd.com/api/skills/syncfusion/syncfusion-aspnetcore-listview/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: syncfusion (https://skillmd.com/u/syncfusion)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/syncfusion/syncfusion-aspnetcore-listview

---


# Implementing ListView in ASP.NET Core

The ListView component is a powerful, feature-rich control that displays data in interactive hierarchical structures. It supports data binding (local and remote), grouping, nested lists, custom templates, virtualization for performance, and comprehensive keyboard accessibility.

## When to Use This Skill

Use this skill when you need to:

- **Display Interactive Lists**: Render data collections with click selection, hover effects, and visual feedback
- **Group Related Items**: Organize list items into categories using the `groupBy` field
- **Support Nested Navigation**: Create multi-level hierarchies with parent-child relationships
- **Optimize Performance**: Handle large datasets (1000+ items) with UI virtualization
- **Customize Appearance**: Apply templates for headers, items, and group titles
- **Enable Selection**: Implement single or multi-select with checkboxes
- **Handle Remote Data**: Bind to server APIs with DataManager and Query
- **Implement Keyboard Access**: Support keyboard navigation for accessibility

## Component Overview

The ListView component in Syncfusion EJ2 for ASP.NET Core uses **TagHelper syntax** and exposes core properties:

| Category | Key Properties |
|----------|----------------|
| **Data Binding** | `dataSource`, `fields`, `query` |
| **Display Control** | `template`, `headerTemplate`, `groupTemplate` |
| **User Interaction** | `showCheckBox`, `checkBoxPosition`, `sortOrder` |
| **Performance** | `enableVirtualization`, `height` |
| **Appearance** | `cssClass`, `width`, `showHeader`, `showIcon` |
| **Accessibility** | `enableRtl`, event handlers |

## Documentation and Navigation Guide

### Getting Started & Data Binding
📄 **Read:** [references/getting-started-and-data-binding.md](references/getting-started-and-data-binding.md)
- ASP.NET Core project setup and TagHelper import
- DataSource property variations (array, JSON, remote)
- Field mapping for text, id, and nested properties
- Remote data binding with DataManager and Query
- Basic ListView initialization examples

### Field Settings & Configuration
📄 **Read:** [references/field-settings-and-configuration.md](references/field-settings-and-configuration.md)
- Complete field mapping options (14 properties)
- iconCss for dynamic icon customization
- enabled, isVisible, isChecked state properties
- groupBy for categorization logic
- child property for nested list support
- Validation patterns and edge cases

### Grouping, Nested Lists & Virtualization
📄 **Read:** [references/grouping-nested-lists-virtualization.md](references/grouping-nested-lists-virtualization.md)
- Grouping items by category with groupTemplate
- Nested list navigation structure
- enableVirtualization for large datasets
- Window scroll vs container scroll modes
- Conditional rendering in templates
- Performance optimization strategies

### Templates & Customization
📄 **Read:** [references/templates-and-customization.md](references/templates-and-customization.md)
- template property for item customization
- headerTemplate and groupTemplate
- Built-in CSS classes (e-list-wrapper, e-list-avatar, e-list-badge, etc.)
- Avatar and multi-line list patterns
- Custom HTML markup in templates

### Checkboxes, Selection & Events
📄 **Read:** [references/checkboxes-selection-events.md](references/checkboxes-selection-events.md)
- showCheckBox property and positioning (Left/Right)
- select event with SelectEventArgs
- Multi-item selection patterns
- Checked state management
- Selection event handling

### Styling & Appearance
📄 **Read:** [references/styling-appearance-properties.md](references/styling-appearance-properties.md)
- cssClass for custom styling
- height and width control
- showHeader and showIcon properties
- CSS selector reference for styling
- Hover and focus state customization

### Events & Error Handling
📄 **Read:** [references/events-and-error-handling.md](references/events-and-error-handling.md)
- select, scroll, actionBegin, actionComplete events
- Event binding in TagHelper
- Remote data failure scenarios
- Error handling strategies

### Sorting, Filtering & Scrolling
📄 **Read:** [references/sorting-filtering-scrolling.md](references/sorting-filtering-scrolling.md)
- sortOrder property (Ascending, Descending)
- sortBy field mapping
- scroll event for dynamic loading
- Infinite scroll patterns
- Filter operations

### Accessibility & Keyboard Navigation
📄 **Read:** [references/accessibility-keyboard-aria.md](references/accessibility-keyboard-aria.md)
- Keyboard shortcuts (Arrow Up/Down, Select, Back)
- ARIA attributes (aria-selected, aria-level)
- enableRtl for right-to-left support
- Screen reader compatibility
- Best practices for inclusive design

### Advanced Features & Persistence
📄 **Read:** [references/advanced-features-persistence.md](references/advanced-features-persistence.md)
- enablePersistence for state retention
- animation property with AnimationSettings
- locale for localization
- disableHtmlEncode and enableHtmlSanitizer
- RTL and cultural adaptations

### API Reference
📄 **Read:** [references/api-reference.md](references/api-reference.md)
- Complete ListView properties (30+ properties documented)
- Events reference (select, scroll, actionBegin, actionComplete, actionFailure)
- Field mapping API with type signatures
- Enumerations (SortOrder, AnimationEffect, etc.)
- Method signatures for programmatic control
- Event argument types and properties

## Quick Start Example

**Basic ASP.NET Core ListView with TagHelper:**

```cshtml
@{
    ViewData["Title"] = "ListView Example";
    List<ListItem> dataSource = new List<ListItem>()
    {
        new ListItem { id = "1", text = "Artwork" },
        new ListItem { id = "2", text = "Abstract" },
        new ListItem { id = "3", text = "Modern Painting" },
        new ListItem { id = "4", text = "Ceramics" }
    };
}

<ejs-listview id="list" dataSource="dataSource" 
    showHeader="true" headerTitle="Art Gallery">
</ejs-listview>

@code {
    public class ListItem
    {
        public string id { get; set; }
        public string text { get; set; }
    }
}
```

**With Selection & Checkbox:**

```cshtml
<ejs-listview id="list" dataSource="dataSource" 
    showCheckBox="true" checkBoxPosition="Right">
</ejs-listview>
```

**With Grouping:**

```cshtml
<ejs-listview id="list" dataSource="dataSource">
    <e-listview-fieldsettings text="text" groupBy="category" id="id"></e-listview-fieldsettings>
</ejs-listview>
```

## Common Patterns

### Pattern 1: Simple Data List
Use `dataSource` with array of strings or objects; map `fields.text` for display.

### Pattern 2: Categorized Groups
Set `fields.groupBy` to organize items under category headers automatically.

### Pattern 3: Nested Hierarchies
Map `fields.child` to enable drill-down navigation through parent-child relationships.

### Pattern 4: Large Dataset Optimization
Enable `enableVirtualization="true"` to render only visible items; improves performance 10x+.

### Pattern 5: Custom Item Display
Use `template` property with `<div class="e-list-wrapper">` for rich formatting (avatars, badges, multi-line text).

### Pattern 6: Remote Data Integration
Use `dataSource` with DataManager; set `query` to filter/sort server-side; bind `fields` to match API response.

## Key Field Mappings Reference

The `fields` property controls data extraction. Common mappings:

| Field Property | Purpose | Example |
|---|---|---|
| `text` | Display text for item | `text="productName"` |
| `id` | Unique identifier | `id="productId"` |
| `groupBy` | Category/group field | `groupBy="category"` |
| `child` | Nested list data | `child="subcategories"` |
| `iconCss` | Icon class | `iconCss="iconClass"` |
| `enabled` | Enable/disable state | `enabled="isActive"` |
| `isChecked` | Checkbox state | `isChecked="isSelected"` |
| `isVisible` | Visibility state | `isVisible="isVisible"` |
| `tooltip` | Hover tooltip text | `tooltip="description"` |
| `sortBy` | Sort field | `sortBy="name"` |
| `htmlAttributes` | Custom attributes | `htmlAttributes="attributes"` |

## Common Use Cases

### Use Case 1: Product Category Browser
Group products by category; enable selection for shopping cart addition.

### Use Case 2: File/Folder Navigation
Use nested lists with icons for file explorer interface.

### Use Case 3: Task Management List
Combine checkboxes with templates for todo/task display and status tracking.

### Use Case 4: Contact Directory
Sort alphabetically; template with avatars and contact info; filter by category.

### Use Case 5: Large Data Feed (News, Logs)
Enable virtualization; implement scroll event for dynamic loading; optimize rendering.

---

**Next Steps:**
- Read [getting-started-and-data-binding.md](references/getting-started-and-data-binding.md) to set up your first ListView
- Explore [api-reference.md](api-reference.md) for complete property, event, and method documentation
- Review [templates-and-customization.md](references/templates-and-customization.md) for advanced formatting options
- Check [references/accessibility-keyboard-aria.md](references/accessibility-keyboard-aria.md) for keyboard and ARIA support