SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillssyncfusion-blazor-listview

syncfusion-blazor-listview

General & other

View repository

Updated 10-15 21:06

About this skill

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.