syncfusion-blazor-listview

Implementing Syncfusion Blazor ListView Component

The Syncfusion Blazor ListView component is a feature-rich control for displaying and interacting with lists of data. It supports data binding, custom templates, grouping, filtering, virtualization, and advanced selection modes.

When to Use This Skill

• Setting up ListView - Installation, namespaces, service registration, theme setup
• Binding data - Local data arrays, remote DataManager sources, Entity Framework
• Creating templates - Custom item templates, headers, footers, group headers, device-specific rendering
• Selection & interaction - Checkbox selection, retrieving selected items, click handlers
• Filtering & searching - Real-time search, text filtering, custom filter logic
• Organizing data - Grouping by category, group headers, hierarchical grouping
• Performance - Virtual scrolling for large datasets, container scroll vs window scroll
• Advanced layouts - Grid layouts, dual-list patterns, chat UI, mobile-responsive designs
• Styling & customization - CSS classes, themes, HTML attributes, responsive design
• Event handling - Item selection, navigation, hyperlink integration, list events

Quick Start Example

@using Syncfusion.Blazor.Lists

<SfListView DataSource="@ListData">
    <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text"></ListViewFieldSettings>
</SfListView>

@code {
    List<DataModel> ListData = new List<DataModel>();

    protected override void OnInitialized()
    {
        ListData.Add(new DataModel { Text = "Item 1", Id = "1" });
        ListData.Add(new DataModel { Text = "Item 2", Id = "2" });
        ListData.Add(new DataModel { Text = "Item 3", Id = "3" });
    }

    public class DataModel
    {
        public string Id { get; set; }
        public string Text { get; set; }
    }
}

Common Properties & Events

Essential Properties

• DataSource - Array of items or DataManager for binding
• HeaderTitle - Optional header text
• ShowHeader - Display/hide header (boolean)
• EnableCheckbox - Enable checkbox selection (boolean)
• EnableVirtualization - Virtual scrolling for large lists (boolean)
• Height - Container height (required for virtual scrolling)
• ShowCheckBox - Display checkboxes for selection
• SortOrder - Sort items (Ascending/Descending)

Template Properties

• HeaderTemplate - Customize header appearance
• Template - Custom item rendering
• GroupTemplate - Group header customization
• FooterTemplate - Footer customization

Selection & Data

• ListViewFieldSettings - Map data properties:
  • Id - Item identifier
  • Text - Display text
  • GroupBy - Grouping field
  • Child - Nested items
  • IconCss - Icon class
  • Tooltip - Hover tooltip

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation in WebAssembly, Web App, and Server App projects
• Package installation (NuGet)
• Namespace imports and service registration
• Theme stylesheet and script references
• First ListView component setup
• Minimal working example

Data Binding and Sources

📄 Read: references/data-binding-and-source.md

• Local data arrays and JSON binding
• Remote data with DataManager
• OData, OData V4, Web API integration
• Entity Framework binding
• Field mapping with ListViewFieldSettings
• Dynamic data updates and refresh

Templating and Rendering

📄 Read: references/templating-and-rendering.md

• Item template customization
• Header and footer templates
• Group header templates
• Device-specific templates (responsive rendering)
• Template element classes (e-list-template, e-list-wrapper, etc.)
• Avatar and badge templates
• Multi-line items

Item Selection and Actions

📄 Read: references/item-selection-and-actions.md

• GetCheckedItemsAsync method
• Selection with checkboxes
• Single and multiple selection modes
• Retrieving selected item data and indices
• Custom template selection handling
• Click event handlers

Filtering and Searching

📄 Read: references/filtering-and-searching.md

• Real-time search implementation
• Text input filtering
• Filter logic and predicates
• String matching strategies
• Case-insensitive filtering
• Custom filter conditions

Grouping and Organization

📄 Read: references/grouping-and-organization.md

• GroupBy field configuration
• Group header styling
• Collapsible groups
• Category-based organization
• Hierarchical grouping patterns

Virtualization and Performance

📄 Read: references/virtualization-and-performance.md

• EnableVirtualization property
• Window scroll vs container scroll
• Height configuration
• Large dataset handling (1000+ items)
• Performance optimization techniques
• Virtual scrolling limitations and constraints

Advanced Layouts

📄 Read: references/advanced-layouts.md

• Grid layout customization
• Dual-list/multi-select patterns
• Mobile-responsive contact layouts
• Chat window UI implementation
• Layout-specific CSS classes
• Responsive design patterns

Styling and Customization

📄 Read: references/styling-and-customization.md

• CSS class customization (e-listview, e-list-item, e-list-header)
• Theme integration and colors
• Hover state styling
• Selected item styling
• Group header styling
• HTML attribute support
• CSS structure and selectors

Events and Navigation

📄 Read: references/events-and-navigation.md

• ListViewItem event handling
• Click and selection events
• Navigation patterns
• Hyperlink integration and routing
• Event method signatures
• Event context and data

Advanced Patterns

📄 Read: references/advanced-patterns.md

• Nested list implementation
• Add/remove items dynamically
• CRUD operations on ListData
• Complex data scenarios
• Multiple nested levels
• Best practices for hierarchical data

API Reference

📄 Read: references/api-reference.md

• Complete properties documentation with types and defaults
• All component methods with parameters and return types
• Event signatures and event arguments
• Field settings and field mapping configuration
• Template definitions and usage
• Supporting enums (SortOrder, CheckBoxPosition, ListViewEffect)
• Complete working example with all features

Key Props Reference

Property	Type	Purpose
DataSource	Array/DataManager	Items to display
HeaderTitle	string	Header text
ShowHeader	bool	Show/hide header
ShowCheckBox	bool	Enable checkboxes
EnableVirtualization	bool	Virtual scrolling
Height	string	Component height (px)
SortOrder	SortOrder	Ascending/Descending
CssClass	string	Custom CSS class
Template	RenderFragment	Item template
HeaderTemplate	RenderFragment	Header template

Common Use Cases

1. Simple list display - Use basic DataSource binding with ListViewFieldSettings
2. Selectable lists - Add ShowCheckBox="true" with GetCheckedItemsAsync()
3. Searchable list - Bind TextBox input to filter DataSource in OnInput events
4. Grouped lists - Map GroupBy field in ListViewFieldSettings
5. Large datasets - Enable virtualization with EnableVirtualization="true" and Height
6. Custom UI - Use Template property with multi-line layouts, avatars, badges
7. Nested lists - Map Child field and use recursive templates
8. Responsive design - Device-specific templates or dynamic templates based on viewport

---

This skill provides architecture and patterns for all ListView scenarios. Reference the specific guide files for detailed implementations and code examples.