syncfusion-blazor-listview

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion Blazor ListView Component

Syncfusion Blazor ListView组件实现教程

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.
Syncfusion Blazor ListView组件是一个功能丰富的控件,用于展示和操作数据列表。它支持数据绑定、自定义模板、分组、筛选、虚拟化及高级选择模式。

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
  • ListView组件搭建 - 安装、命名空间配置、服务注册、主题设置
  • 数据绑定 - 本地数据数组、远程DataManager数据源、Entity Framework
  • 模板创建 - 自定义项模板、页眉、页脚、分组页眉、设备专属渲染
  • 选择与交互 - 复选框选择、获取选中项、点击事件处理器
  • 筛选与搜索 - 实时搜索、文本筛选、自定义筛选逻辑
  • 数据组织 - 按类别分组、分组页眉、层级分组
  • 性能优化 - 大数据集虚拟滚动、容器滚动 vs 窗口滚动
  • 高级布局 - 网格布局、双列表模式、聊天UI、移动端响应式设计
  • 样式与自定义 - CSS类、主题、HTML属性、响应式设计
  • 事件处理 - 项选择、导航、超链接集成、列表事件

Quick Start Example

快速开始示例

cshtml
@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; }
    }
}
cshtml
@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)
  • DataSource - 用于绑定的项数组或DataManager
  • HeaderTitle - 可选页眉文本
  • ShowHeader - 显示/隐藏页眉(布尔值)
  • EnableCheckbox - 启用复选框选择(布尔值)
  • EnableVirtualization - 针对大型列表的虚拟滚动(布尔值)
  • Height - 容器高度(虚拟滚动必填)
  • ShowCheckBox - 显示用于选择的复选框
  • SortOrder - 项排序方式(升序/降序)

Template Properties

模板属性

  • HeaderTemplate - Customize header appearance
  • Template - Custom item rendering
  • GroupTemplate - Group header customization
  • FooterTemplate - Footer customization
  • HeaderTemplate - 自定义页眉外观
  • Template - 自定义项渲染
  • GroupTemplate - 自定义分组页眉
  • FooterTemplate - 自定义页脚

Selection & Data

选择与数据

  • ListViewFieldSettings - Map data properties:
    • Id
      - Item identifier
    • Text
      - Display text
    • GroupBy
      - Grouping field
    • Child
      - Nested items
    • IconCss
      - Icon class
    • Tooltip
      - Hover tooltip
  • ListViewFieldSettings - 映射数据属性:
    • Id
      - 项标识符
    • Text
      - 显示文本
    • GroupBy
      - 分组字段
    • Child
      - 嵌套项
    • IconCss
      - 图标类
    • 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
📄 阅读: references/getting-started.md
  • WebAssembly、Web应用及服务器应用项目中的安装
  • NuGet包安装
  • 命名空间导入与服务注册
  • 主题样式表与脚本引用
  • 首个ListView组件搭建
  • 最简运行示例

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
📄 阅读: references/data-binding-and-source.md
  • 本地数据数组与JSON绑定
  • 基于DataManager的远程数据
  • OData、OData V4、Web API集成
  • Entity Framework绑定
  • 通过ListViewFieldSettings进行字段映射
  • 动态数据更新与刷新

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
📄 阅读: references/templating-and-rendering.md
  • 项模板自定义
  • 页眉与页脚模板
  • 分组页眉模板
  • 设备专属模板(响应式渲染)
  • 模板元素类(e-list-template、e-list-wrapper等)
  • 头像与徽章模板
  • 多行项

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
📄 阅读: references/item-selection-and-actions.md
  • GetCheckedItemsAsync方法
  • 复选框选择
  • 单选与多选模式
  • 获取选中项数据与索引
  • 自定义模板选择处理
  • 点击事件处理器

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
📄 阅读: references/filtering-and-searching.md
  • 实时搜索实现
  • 文本输入筛选
  • 筛选逻辑与谓词
  • 字符串匹配策略
  • 大小写不敏感筛选
  • 自定义筛选条件

Grouping and Organization

分组与组织

📄 Read: references/grouping-and-organization.md
  • GroupBy field configuration
  • Group header styling
  • Collapsible groups
  • Category-based organization
  • Hierarchical grouping patterns
📄 阅读: references/grouping-and-organization.md
  • GroupBy字段配置
  • 分组页眉样式
  • 可折叠分组
  • 基于类别的数据组织
  • 层级分组模式

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
📄 阅读: references/virtualization-and-performance.md
  • EnableVirtualization属性
  • 窗口滚动 vs 容器滚动
  • 高度配置
  • 大数据集处理(1000+项)
  • 性能优化技巧
  • 虚拟滚动的限制与约束

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
📄 阅读: references/advanced-layouts.md
  • 网格布局自定义
  • 双列表/多选模式
  • 移动端响应式联系人布局
  • 聊天窗口UI实现
  • 布局专属CSS类
  • 响应式设计模式

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
📄 阅读: references/styling-and-customization.md
  • CSS类自定义(e-listview、e-list-item、e-list-header)
  • 主题集成与颜色配置
  • 悬停状态样式
  • 选中项样式
  • 分组页眉样式
  • HTML属性支持
  • CSS结构与选择器

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
📄 阅读: references/events-and-navigation.md
  • ListViewItem事件处理
  • 点击与选择事件
  • 导航模式
  • 超链接集成与路由
  • 事件方法签名
  • 事件上下文与数据

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
📄 阅读: references/advanced-patterns.md
  • 嵌套列表实现
  • 动态添加/移除项
  • ListData的CRUD操作
  • 复杂数据场景
  • 多层嵌套
  • 层级数据最佳实践

API Reference

API参考

📄 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
📄 阅读: references/api-reference.md
  • 完整属性文档(含类型与默认值)
  • 所有组件方法(含参数与返回类型)
  • 事件签名与事件参数
  • 字段设置与字段映射配置
  • 模板定义与用法
  • 支持的枚举(SortOrder、CheckBoxPosition、ListViewEffect)
  • 包含所有功能的完整运行示例

Key Props Reference

核心属性参考

PropertyTypePurpose
DataSource
Array/DataManagerItems to display
HeaderTitle
stringHeader text
ShowHeader
boolShow/hide header
ShowCheckBox
boolEnable checkboxes
EnableVirtualization
boolVirtual scrolling
Height
stringComponent height (px)
SortOrder
SortOrderAscending/Descending
CssClass
stringCustom CSS class
Template
RenderFragmentItem template
HeaderTemplate
RenderFragmentHeader template
属性类型用途
DataSource
Array/DataManager要展示的项
HeaderTitle
string页眉文本
ShowHeader
bool显示/隐藏页眉
ShowCheckBox
bool启用复选框
EnableVirtualization
bool虚拟滚动
Height
string组件高度(像素)
SortOrder
SortOrder升序/降序
CssClass
string自定义CSS类
Template
RenderFragment项模板
HeaderTemplate
RenderFragment页眉模板

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.
  1. 简单列表展示 - 使用基础DataSource绑定与ListViewFieldSettings
  2. 可选择列表 - 添加ShowCheckBox="true"并配合GetCheckedItemsAsync()
  3. 可搜索列表 - 将TextBox输入绑定到OnInput事件中筛选DataSource
  4. 分组列表 - 在ListViewFieldSettings中映射GroupBy字段
  5. 大数据集 - 启用EnableVirtualization="true"并设置Height
  6. 自定义UI - 使用Template属性实现多行布局、头像、徽章
  7. 嵌套列表 - 映射Child字段并使用递归模板
  8. 响应式设计 - 设备专属模板或基于视口的动态模板

本指南提供了所有ListView场景的架构与模式。如需详细实现方案及代码示例,请参考具体的指南文档。