메뉴
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.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-listview명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
| name | syncfusion-aspnetcore-listview |
| description | 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. |
| metadata | {"author":"Syncfusion Inc","version":"34.1.29"} |
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.
Use this skill when you need to:
groupBy fieldThe 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 |
📄 Read: references/api-reference.md
Basic ASP.NET Core ListView with TagHelper:
@{
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:
<ejs-listview id="list" dataSource="dataSource"
showCheckBox="true" checkBoxPosition="Right">
</ejs-listview>
With Grouping:
<ejs-listview id="list" dataSource="dataSource">
<e-listview-fieldsettings text="text" groupBy="category" id="id"></e-listview-fieldsettings>
</ejs-listview>
Use dataSource with array of strings or objects; map fields.text for display.
Set fields.groupBy to organize items under category headers automatically.
Map fields.child to enable drill-down navigation through parent-child relationships.
Enable enableVirtualization="true" to render only visible items; improves performance 10x+.
Use template property with <div class="e-list-wrapper"> for rich formatting (avatars, badges, multi-line text).
Use dataSource with DataManager; set query to filter/sort server-side; bind fields to match API response.
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" |
Group products by category; enable selection for shopping cart addition.
Use nested lists with icons for file explorer interface.
Combine checkboxes with templates for todo/task display and status tracking.
Sort alphabetically; template with avatars and contact info; filter by category.
Enable virtualization; implement scroll event for dynamic loading; optimize rendering.
Next Steps:
Implements Syncfusion ASP.NET Core Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
Use this skill when users ask how to build Syncfusion PivotView/pivot tables in ASP.NET Core apps. Trigger for server integration, data binding (API/DB/remote), OLAP, aggregation, drill-down, grouping, filtering, conditional formatting, exporting (Excel/PDF/CSV), or pivot charts in ASP.NET Core. Not for MVC/Blazor/JS.
Implement the Syncfusion ASP.NET Core AI AssistView control for interactive AI-powered assistance interfaces. Use this skill when implementing AI assistants, prompt suggestions, custom views, file attachments, markdown responses, customizable templates, regenerable responses, thinking capabilities (chain-of-thoughts), generative UI blocks, Text-to-Speech conversion, Speech-to-Text voice input, or customizing advanced AI conversation UI in ASP.NET Core applications.
SOC 직업 분류 기준
