syncfusion-blazor-listview
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseImplementing 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:
- - Item identifier
Id - - Display text
Text - - Grouping field
GroupBy - - Nested items
Child - - Icon class
IconCss - - Hover tooltip
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
核心属性参考
| Property | Type | Purpose |
|---|---|---|
| Array/DataManager | Items to display |
| string | Header text |
| bool | Show/hide header |
| bool | Enable checkboxes |
| bool | Virtual scrolling |
| string | Component height (px) |
| SortOrder | Ascending/Descending |
| string | Custom CSS class |
| RenderFragment | Item template |
| RenderFragment | Header template |
| 属性 | 类型 | 用途 |
|---|---|---|
| Array/DataManager | 要展示的项 |
| string | 页眉文本 |
| bool | 显示/隐藏页眉 |
| bool | 启用复选框 |
| bool | 虚拟滚动 |
| string | 组件高度(像素) |
| SortOrder | 升序/降序 |
| string | 自定义CSS类 |
| RenderFragment | 项模板 |
| RenderFragment | 页眉模板 |
Common Use Cases
常见用例
- Simple list display - Use basic DataSource binding with ListViewFieldSettings
- Selectable lists - Add ShowCheckBox="true" with GetCheckedItemsAsync()
- Searchable list - Bind TextBox input to filter DataSource in OnInput events
- Grouped lists - Map GroupBy field in ListViewFieldSettings
- Large datasets - Enable virtualization with EnableVirtualization="true" and Height
- Custom UI - Use Template property with multi-line layouts, avatars, badges
- Nested lists - Map Child field and use recursive templates
- 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.
- 简单列表展示 - 使用基础DataSource绑定与ListViewFieldSettings
- 可选择列表 - 添加ShowCheckBox="true"并配合GetCheckedItemsAsync()
- 可搜索列表 - 将TextBox输入绑定到OnInput事件中筛选DataSource
- 分组列表 - 在ListViewFieldSettings中映射GroupBy字段
- 大数据集 - 启用EnableVirtualization="true"并设置Height
- 自定义UI - 使用Template属性实现多行布局、头像、徽章
- 嵌套列表 - 映射Child字段并使用递归模板
- 响应式设计 - 设备专属模板或基于视口的动态模板
本指南提供了所有ListView场景的架构与模式。如需详细实现方案及代码示例,请参考具体的指南文档。