syncfusion-aspnetcore-kanban

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion ASP.NET Core Kanban

实现Syncfusion ASP.NET Core Kanban

Quick Start

快速入门

csharp

// HomeController.cs
public IActionResult Index()
{
    ViewBag.data = new KanbanDataModels().KanbanTasks();
    return View();
}

html

<!-- Index.cshtml -->
<ejs-kanban id="Kanban" keyField="Status" dataSource="@ViewBag.data">
    <e-kanban-columns>
        <e-kanban-column headerText="To Do" keyField="Open"></e-kanban-column>
        <e-kanban-column headerText="In Progress" keyField="InProgress"></e-kanban-column>
        <e-kanban-column headerText="Testing" keyField="Testing"></e-kanban-column>
        <e-kanban-column headerText="Done" keyField="Close"></e-kanban-column>
    </e-kanban-columns>
    <e-kanban-cardsettings headerField="Title" contentField="Summary"></e-kanban-cardsettings>
</ejs-kanban>

Prerequisites:

NuGet:

Install-Package Syncfusion.EJ2.AspNet.Core

_ViewImports.cshtml

@addTagHelper *, Syncfusion.EJ2

_Layout.cshtml

: Fluent CSS +

ej2.min.js

CDN links +

<ejs-scripts></ejs-scripts>

→ For full setup details, see references/getting-started.md

csharp

// HomeController.cs
public IActionResult Index()
{
    ViewBag.data = new KanbanDataModels().KanbanTasks();
    return View();
}

html

<!-- Index.cshtml -->
<ejs-kanban id="Kanban" keyField="Status" dataSource="@ViewBag.data">
    <e-kanban-columns>
        <e-kanban-column headerText="To Do" keyField="Open"></e-kanban-column>
        <e-kanban-column headerText="In Progress" keyField="InProgress"></e-kanban-column>
        <e-kanban-column headerText="Testing" keyField="Testing"></e-kanban-column>
        <e-kanban-column headerText="Done" keyField="Close"></e-kanban-column>
    </e-kanban-columns>
    <e-kanban-cardsettings headerField="Title" contentField="Summary"></e-kanban-cardsettings>
</ejs-kanban>

前置条件:

NuGet:

Install-Package Syncfusion.EJ2.AspNet.Core

_ViewImports.cshtml

@addTagHelper *, Syncfusion.EJ2

_Layout.cshtml

: Fluent CSS +

ej2.min.js

CDN链接 +

<ejs-scripts></ejs-scripts>

→ 完整搭建细节请查看 references/getting-started.md

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Build a Kanban board — multi-column workflow visualization
Configure columns — single/multi-key columns, stacked headers, toggle, drag
Add swimlanes — group cards by team, user, or category with frozen rows
Enable drag-and-drop — between columns, swimlanes, or external components
Implement card dialogs — edit dialog with custom fields, templates, CRUD persistence
Bind remote data — OData, WebAPI, UrlAdaptor with CRUD operations
Apply sorting — by index, data source order, or custom field
Set card priorities — exact-position drop ordering via numeric rank field
Add column constraints — min/max card count validation per column
Show tooltips — default or template-based hover tooltips
Enable virtual scrolling — handle large datasets (100k+ cards) efficiently
Configure accessibility — WCAG 2.2 AA, keyboard navigation, screen reader support
Localize or RTL — multi-language support and right-to-left layout
Filter or search cards — using the
```
query
```
property
Change columns dynamically — update column configuration at runtime
Handle events — react to card clicks, drags, dialog open/close, data binding, and more
Call methods programmatically — add/update/delete cards, open dialogs, show/hide columns, refresh the board
Reference all properties — full list of component and sub-model properties with types and defaults

在以下场景中可使用本技能：

构建Kanban看板 — 多列工作流可视化
配置列 — 单键/多键列、堆叠表头、折叠、拖拽
添加泳道 — 按团队、用户或类别分组卡片，支持冻结行
启用拖放 — 在列之间、泳道之间或与外部组件进行拖放
实现卡片对话框 — 带自定义字段、模板、CRUD持久化的编辑对话框
绑定远程数据 — OData、WebAPI、UrlAdaptor及CRUD操作
应用排序 — 按索引、数据源顺序或自定义字段排序
设置卡片优先级 — 通过数字排名字段实现精准位置拖放排序
添加列约束 — 每列卡片数量的最小/最大值验证
显示工具提示 — 默认或基于模板的悬停工具提示
启用虚拟滚动 — 高效处理大型数据集（10万+卡片）
配置无障碍访问 — 符合WCAG 2.2 AA标准，支持键盘导航、屏幕阅读器
本地化或RTL布局 — 多语言支持与从右到左布局
筛选或搜索卡片 — 使用
```
query
```
属性
动态修改列 — 运行时更新列配置
处理事件 — 响应卡片点击、拖拽、对话框打开/关闭、数据绑定等操作
调用编程方法 — 添加/更新/删除卡片、打开对话框、显示/隐藏列、刷新看板
查阅所有属性 — 组件及子模型属性的完整列表，包含类型与默认值

Documentation and Navigation Guide

文档与导航指南

Setup and First Board

环境搭建与首个看板

📄 Read: references/getting-started.md

NuGet installation and package setup
Tag Helper registration in
```
_ViewImports.cshtml
```
CDN configuration (CSS + JS) in
```
_Layout.cshtml
```
Minimal Kanban board with 4 columns
Basic swimlane quickstart
License key registration

📄 阅读: references/getting-started.md

NuGet安装与包配置
在
```
_ViewImports.cshtml
```
中注册Tag Helper
在
```
_Layout.cshtml
```
中配置CDN（CSS + JS）
包含4列的极简Kanban看板
泳道快速入门
许可证密钥注册

Data Binding

数据绑定

📄 Read: references/data-binding.md

Local data binding via
```
@ViewBag.data
```
Remote data: OData, ODataV4, WebAPI, UrlAdaptor
```
<e-data-manager>
```
configuration
CRUD operations with
```
insertUrl
```
,
```
updateUrl
```
,
```
removeUrl
```
,
```
crudUrl
```
Custom adaptor pattern
```
actionFailure
```
event handling
Ajax loading indicator behavior

📄 阅读: references/data-binding.md

通过
```
@ViewBag.data
```
绑定本地数据
远程数据：OData、ODataV4、WebAPI、UrlAdaptor
```
<e-data-manager>
```
配置
使用
```
insertUrl
```
、
```
updateUrl
```
、
```
removeUrl
```
、
```
crudUrl
```
实现CRUD操作
自定义适配器模式
```
actionFailure
```
事件处理
Ajax加载指示器行为

Cards

卡片

📄 Read: references/cards.md

```
headerField
```
(mandatory unique card ID)
```
showHeader
```
— show/hide card header
```
contentField
```
— card body text field
Card template with jsrender syntax
```
selectionType
```
— None, Single, Multiple
Card color customization via
```
colorField
```

📄 阅读: references/cards.md

```
headerField
```
（必填的唯一卡片ID）
```
showHeader
```
— 显示/隐藏卡片表头
```
contentField
```
— 卡片正文文本字段
使用jsrender语法的卡片模板
```
selectionType
```
— None、Single、Multiple
通过
```
colorField
```
自定义卡片颜色

Columns

列

📄 Read: references/columns.md

Single-key and multi-key
```
keyField
```
mapping
```
headerText
```
— column display name
Column header template
```
allowToggle
```
— collapsible columns
```
isExpanded
```
— initial expand/collapse state
Stacked headers (
```
<e-kanban-stackedheaders>
```
)
Column-level drag (
```
allowColumnDragAndDrop
```
)
```
showItemCount
```
— display card count in header

📄 阅读: references/columns.md

单键与多键
```
keyField
```
映射
```
headerText
```
— 列显示名称
列表头模板
```
allowToggle
```
— 可折叠列
```
isExpanded
```
— 初始展开/折叠状态
堆叠表头（
```
<e-kanban-stackedheaders>
```
）
列级拖拽（
```
allowColumnDragAndDrop
```
）
```
showItemCount
```
— 在表头显示卡片数量

Swimlanes

泳道

📄 Read: references/swimlane.md

```
keyField
```
— data field to group by
```
textField
```
— display label field
Swimlane header template
```
sortBy
```
— sort swimlane rows
```
allowDragAndDrop
```
— enable cross-swimlane card drag
```
showEmptyRow
```
— display empty swimlane rows
```
showItemCount
```
— card count per swimlane
```
enableFrozenRows
```
— sticky swimlane headers on scroll

📄 阅读: references/swimlane.md

```
keyField
```
— 用于分组的数据字段
```
textField
```
— 显示标签字段
泳道表头模板
```
sortBy
```
— 排序泳道行
```
allowDragAndDrop
```
— 启用跨泳道卡片拖拽
```
showEmptyRow
```
— 显示空泳道行
```
showItemCount
```
— 每个泳道的卡片数量
```
enableFrozenRows
```
— 滚动时固定泳道表头

Drag and Drop

拖放功能

📄 Read: references/drag-and-drop.md

Internal column drag (default enabled)
```
allowDragAndDrop="false"
```
— disable all drag
Per-column
```
allowDrag
```
/
```
allowDrop
```
flags
```
transitionColumns
```
— restrict allowed column transitions
Cross-swimlane drag via
```
swimlaneSettings.allowDragAndDrop
```
External drag:
```
externalDropId
```
property
Kanban-to-Kanban drag (
```
dragStop
```
event +
```
deleteCard
```
/
```
addCard
```
)
Kanban-to-Treeview and Kanban-to-Schedule integration

📄 阅读: references/drag-and-drop.md

列内拖拽（默认启用）
```
allowDragAndDrop="false"
```
— 禁用所有拖拽
每列的
```
allowDrag
```
/
```
allowDrop
```
标志
```
transitionColumns
```
— 限制允许的列转换
通过
```
swimlaneSettings.allowDragAndDrop
```
实现跨泳道拖拽
外部拖拽：
```
externalDropId
```
属性
Kanban到Kanban的拖拽（
```
dragStop
```
事件 +
```
deleteCard
```
/
```
addCard
```
）
Kanban与Treeview、Kanban与Schedule的集成

Card Edit Dialog

卡片编辑对话框

📄 Read: references/dialog.md

Default dialog (double-click card)
Custom dialog fields via
```
<e-kanban-dialogsettings fields="...">
```
Field types: String, Numeric, TextArea, DropDown, TextBox, Input
Custom dialog template with EJ2 component initialization
Preventing dialog open with
```
dialogOpen
```
event +
```
args.cancel = true
```
Programmatic add:
```
kanbanObj.openDialog('Add', data)
```
CRUD persistence via UrlAdaptor with server-side
```
EditParams
```
class

📄 阅读: references/dialog.md

默认对话框（双击卡片）
通过
```
<e-kanban-dialogsettings fields="...">
```
自定义对话框字段
字段类型：String、Numeric、TextArea、DropDown、TextBox、Input
包含EJ2组件初始化的自定义对话框模板
通过
```
dialogOpen
```
事件 +
```
args.cancel = true
```
阻止对话框打开
编程式添加：
```
kanbanObj.openDialog('Add', data)
```
通过UrlAdaptor结合服务端
```
EditParams
```
类实现CRUD持久化

Sorting, Priority, and Validation

排序、优先级与验证

📄 Read: references/sorting-priority-validation.md

<e-kanban-sortsettings>

with

sortBy

field

direction

```
sortBy
```
values: Index, DataSourceOrder, Custom

Priority field:

<e-kanban-cardsettings priority="RankId">

for exact-position drops

Column min/max card count:
```
minCount
```
,
```
maxCount
```
on
```
<e-kanban-column>
```
Constraint type: Column (default) or Swimlane
Visual color indication on constraint violation

📄 阅读: references/sorting-priority-validation.md

包含

sortBy

、

field

、

direction

的

<e-kanban-sortsettings>

```
sortBy
```
取值：Index、DataSourceOrder、Custom
优先级字段：
```
<e-kanban-cardsettings priority="RankId">
```
用于精准位置拖放
列最小/最大卡片数量：
```
<e-kanban-column>
```
上的
```
minCount
```
、
```
maxCount
```
约束类型：列（默认）或泳道
约束违规时的视觉颜色提示

Tooltip, Style, and Dimensions

工具提示、样式与尺寸

📄 Read: references/tooltip-style-dimensions.md

```
enableTooltip="true"
```
— hover tooltip on cards
```
tooltipTemplate
```
— custom HTML tooltip template
CSS class reference for all Kanban elements
Sticky header pattern
```
width
```
and
```
height
```
— auto, pixel, percentage values

📄 阅读: references/tooltip-style-dimensions.md

```
enableTooltip="true"
```
— 卡片悬停工具提示
```
tooltipTemplate
```
— 自定义HTML工具提示模板
所有Kanban元素的CSS类参考
固定表头模式
```
width
```
与
```
height
```
— auto、像素、百分比值

Persistence, Localization, and Responsive

持久化、本地化与响应式

📄 Read: references/persistence-localization-responsive.md

```
enablePersistence="true"
```
— localStorage state saving
```
locale
```
property +
```
ej.base.L10n.load()
```
script
All locale key names for Kanban strings
```
enableRtl="true"
```
— right-to-left layout
Mobile responsive behavior (swipe, tap-hold, swimlane menu)

📄 阅读: references/persistence-localization-responsive.md

```
enablePersistence="true"
```
— 保存状态到localStorage
```
locale
```
属性 +
```
ej.base.L10n.load()
```
脚本
Kanban字符串的所有本地化键名
```
enableRtl="true"
```
— 从右到左布局
移动端响应式行为（滑动、长按、泳道菜单）

Virtual Scrolling and Accessibility

虚拟滚动与无障碍访问

📄 Read: references/virtual-scrolling-accessibility.md

```
enableVirtualization="true"
```
— on-demand card rendering
```
cardHeight
```
— fixed height required for virtualization
Server-side
```
KanbanVirtualization
```
parameter handling
WCAG 2.2 AA compliance table
WAI-ARIA attributes (
```
aria-label
```
,
```
aria-expanded
```
,
```
aria-selected
```
, etc.)
Keyboard shortcuts reference
```
AllowKeyboard="false"
```
— disable keyboard interaction

📄 阅读: references/virtual-scrolling-accessibility.md

```
enableVirtualization="true"
```
— 按需渲染卡片
```
cardHeight
```
— 虚拟滚动所需的固定高度
服务端
```
KanbanVirtualization
```
参数处理
WCAG 2.2 AA合规性表格
WAI-ARIA属性（
```
aria-label
```
、
```
aria-expanded
```
、
```
aria-selected
```
等）
键盘快捷键参考
```
AllowKeyboard="false"
```
— 禁用键盘交互

Events

事件

📄 Read: references/events.md

```
ActionBegin
```
/
```
ActionComplete
```
/
```
ActionFailure
```
— lifecycle and error handling
```
CardClick
```
/
```
CardDoubleClick
```
/
```
CardRendered
```
— card interaction hooks
```
ColumnDrag
```
/
```
ColumnDragStart
```
/
```
ColumnDrop
```
— column reorder events

Created

DataBinding

DataBound

DataSourceChanged

— initialization and data events

```
DialogOpen
```
/
```
DialogClose
```
— intercept or cancel dialog (use
```
args.cancel = true
```
)
```
Drag
```
/
```
DragStart
```
/
```
DragStop
```
— card drag lifecycle (cross-Kanban scenarios use
```
DragStop
```
)
```
QueryCellInfo
```
— customize column cell elements before render

📄 阅读: references/events.md

```
ActionBegin
```
/
```
ActionComplete
```
/
```
ActionFailure
```
— 生命周期与错误处理
```
CardClick
```
/
```
CardDoubleClick
```
/
```
CardRendered
```
— 卡片交互钩子
```
ColumnDrag
```
/
```
ColumnDragStart
```
/
```
ColumnDrop
```
— 列重排事件

Created

DataBinding

DataBound

DataSourceChanged

— 初始化与数据事件

```
DialogOpen
```
/
```
DialogClose
```
— 拦截或取消对话框（使用
```
args.cancel = true
```
）
```
Drag
```
/
```
DragStart
```
/
```
DragStop
```
— 卡片拖拽生命周期（跨Kanban场景使用
```
DragStop
```
）
```
QueryCellInfo
```
— 渲染前自定义列单元格元素

Methods

方法

📄 Read: references/methods.md

```
AddCard
```
/
```
UpdateCard
```
/
```
DeleteCard
```
— CRUD card operations
```
AddColumn
```
/
```
DeleteColumn
```
— dynamic column management
```
OpenDialog
```
/
```
CloseDialog
```
— programmatic dialog control
```
ShowColumn
```
/
```
HideColumn
```
— toggle column visibility

GetCardDetails

GetColumnData

GetSelectedCards

GetSwimlaneData

— data retrieval

```
ShowSpinner
```
/
```
HideSpinner
```
— loading indicator control
```
Refresh
```
/
```
RefreshHeader
```
/
```
RefreshUI
```
— board re-render helpers
```
DataBind
```
/
```
Destroy
```
/
```
AppendTo
```
/
```
Inject
```
— component lifecycle utilities

📄 阅读: references/methods.md

```
AddCard
```
/
```
UpdateCard
```
/
```
DeleteCard
```
— 卡片CRUD操作
```
AddColumn
```
/
```
DeleteColumn
```
— 动态列管理
```
OpenDialog
```
/
```
CloseDialog
```
— 编程式对话框控制
```
ShowColumn
```
/
```
HideColumn
```
— 切换列可见性

GetCardDetails

GetColumnData

GetSelectedCards

GetSwimlaneData

— 数据检索

```
ShowSpinner
```
/
```
HideSpinner
```
— 加载指示器控制
```
Refresh
```
/
```
RefreshHeader
```
/
```
RefreshUI
```
— 看板重渲染辅助方法
```
DataBind
```
/
```
Destroy
```
/
```
AppendTo
```
/
```
Inject
```
— 组件生命周期工具

All Properties Reference

所有属性参考

📄 Read: references/properties.md

Complete list of all
```
<ejs-kanban>
```
root properties with types, defaults, and examples

Sub-model properties:

CardSettings

Columns

SwimlaneSettings

SortSettings

DialogSettings

StackedHeaders

Enum values:

ConstraintType

SelectionType

SortOrderBy

SortDirection

📄 阅读: references/properties.md

```
<ejs-kanban>
```
根属性的完整列表，包含类型、默认值与示例

子模型属性：

CardSettings

、

Columns

、

SwimlaneSettings

、

SortSettings

、

DialogSettings

、

StackedHeaders

枚举值：

ConstraintType

、

SelectionType

、

SortOrderBy

、

SortDirection

How-To Recipes

实操方案

📄 Read: references/how-to.md

Dynamically change columns at runtime
Filter cards using the
```
query
```
property with dropdown
Search cards by field values with text input
Add header double-click event handler

📄 阅读: references/how-to.md

运行时动态修改列
使用下拉框结合
```
query
```
属性筛选卡片
通过文本输入按字段值搜索卡片
添加表头双击事件处理程序

Common Patterns

常见模式

Swimlane Board with Remote Data

带远程数据的泳道看板

Use when: You need to group cards by user/team and load data from an API endpoint (OData, WebAPI, etc.) instead of a local collection.

html

<ejs-kanban id="Kanban" keyField="Status">
    <e-data-manager url="/api/tasks" adaptor="ODataV4Adaptor"></e-data-manager>
    <e-kanban-columns>
        <e-kanban-column headerText="To Do" keyField="Open"></e-kanban-column>
        <e-kanban-column headerText="In Progress" keyField="InProgress"></e-kanban-column>
        <e-kanban-column headerText="Done" keyField="Close"></e-kanban-column>
    </e-kanban-columns>
    <e-kanban-cardsettings headerField="Title" contentField="Summary"></e-kanban-cardsettings>
    <e-kanban-swimlanesettings keyField="Assignee" textField="Assignee"></e-kanban-swimlanesettings>
</ejs-kanban>

适用场景: 需要按用户/团队分组卡片，并从API端点（OData、WebAPI等）加载数据而非本地集合。

html

<ejs-kanban id="Kanban" keyField="Status">
    <e-data-manager url="/api/tasks" adaptor="ODataV4Adaptor"></e-data-manager>
    <e-kanban-columns>
        <e-kanban-column headerText="To Do" keyField="Open"></e-kanban-column>
        <e-kanban-column headerText="In Progress" keyField="InProgress"></e-kanban-column>
        <e-kanban-column headerText="Done" keyField="Close"></e-kanban-column>
    </e-kanban-columns>
    <e-kanban-cardsettings headerField="Title" contentField="Summary"></e-kanban-cardsettings>
    <e-kanban-swimlanesettings keyField="Assignee" textField="Assignee"></e-kanban-swimlanesettings>
</ejs-kanban>

Board with Column Constraints

带列约束的看板

Use when: You need to enforce WIP (Work-In-Progress) limits — preventing too few or too many cards from stacking in a column.

html

<ejs-kanban id="Kanban" keyField="Status" dataSource="@ViewBag.data">
    <e-kanban-columns>
        <e-kanban-column headerText="To Do" keyField="Open"></e-kanban-column>
        <e-kanban-column headerText="In Progress" keyField="InProgress"
            minCount="3" maxCount="5" showItemCount="true"></e-kanban-column>
        <e-kanban-column headerText="Done" keyField="Close"></e-kanban-column>
    </e-kanban-columns>
    <e-kanban-cardsettings headerField="Title" contentField="Summary"></e-kanban-cardsettings>
</ejs-kanban>

适用场景: 需要执行WIP（在制品）限制 — 防止列中卡片数量过少或过多。

html

<ejs-kanban id="Kanban" keyField="Status" dataSource="@ViewBag.data">
    <e-kanban-columns>
        <e-kanban-column headerText="To Do" keyField="Open"></e-kanban-column>
        <e-kanban-column headerText="In Progress" keyField="InProgress"
            minCount="3" maxCount="5" showItemCount="true"></e-kanban-column>
        <e-kanban-column headerText="Done" keyField="Close"></e-kanban-column>
    </e-kanban-columns>
    <e-kanban-cardsettings headerField="Title" contentField="Summary"></e-kanban-cardsettings>
</ejs-kanban>

Board with Card Edit Dialog + CRUD

带卡片编辑对话框+CRUD的看板

Use when: Users need to create, edit, or delete cards through a dialog form, with changes persisted to the server via
UrlAdaptor
.

html

<ejs-kanban id="Kanban" keyField="Status">
    <e-data-manager url="/Home/UpdateData" adaptor="UrlAdaptor"
        crudUrl="/Home/UpdateData"></e-data-manager>
    <e-kanban-columns>
        <e-kanban-column headerText="To Do" keyField="Open"></e-kanban-column>
        <e-kanban-column headerText="Done" keyField="Close"></e-kanban-column>
    </e-kanban-columns>
    <e-kanban-cardsettings headerField="Title" contentField="Summary"></e-kanban-cardsettings>
    <e-kanban-dialogsettings fields="@ViewBag.dialogFields"></e-kanban-dialogsettings>
</ejs-kanban>

适用场景: 用户需要通过对话框表单创建、编辑或删除卡片，并通过
UrlAdaptor
将更改持久化到服务器。

html

<ejs-kanban id="Kanban" keyField="Status">
    <e-data-manager url="/Home/UpdateData" adaptor="UrlAdaptor"
        crudUrl="/Home/UpdateData"></e-data-manager>
    <e-kanban-columns>
        <e-kanban-column headerText="To Do" keyField="Open"></e-kanban-column>
        <e-kanban-column headerText="Done" keyField="Close"></e-kanban-column>
    </e-kanban-columns>
    <e-kanban-cardsettings headerField="Title" contentField="Summary"></e-kanban-cardsettings>
    <e-kanban-dialogsettings fields="@ViewBag.dialogFields"></e-kanban-dialogsettings>
</ejs-kanban>

Virtual Scrolling Board

虚拟滚动看板

Use when: The dataset is large (hundreds to thousands of cards) and rendering all cards at once would cause performance issues.

html

<ejs-kanban id="Kanban" keyField="Status" dataSource="@ViewBag.data"
    enableVirtualization="true">
    <e-kanban-columns>
        <e-kanban-column headerText="To Do" keyField="Open"></e-kanban-column>
        <e-kanban-column headerText="In Progress" keyField="InProgress"></e-kanban-column>
        <e-kanban-column headerText="Done" keyField="Close"></e-kanban-column>
    </e-kanban-columns>
    <e-kanban-cardsettings headerField="Title" contentField="Summary"
        selectionType="Multiple"></e-kanban-cardsettings>
</ejs-kanban>

适用场景: 数据集较大（数百到数千张卡片），一次性渲染所有卡片会导致性能问题。

html

<ejs-kanban id="Kanban" keyField="Status" dataSource="@ViewBag.data"
    enableVirtualization="true">
    <e-kanban-columns>
        <e-kanban-column headerText="To Do" keyField="Open"></e-kanban-column>
        <e-kanban-column headerText="In Progress" keyField="InProgress"></e-kanban-column>
        <e-kanban-column headerText="Done" keyField="Close"></e-kanban-column>
    </e-kanban-columns>
    <e-kanban-cardsettings headerField="Title" contentField="Summary"
        selectionType="Multiple"></e-kanban-cardsettings>
</ejs-kanban>

Key Properties Reference

关键属性参考

Property	Tag	Values	Purpose
`keyField`	`<ejs-kanban>`	Field name string	Maps cards to columns by status value
`dataSource`	`<ejs-kanban>`	`@ViewBag.data`	Local data collection
`enableVirtualization`	`<ejs-kanban>`	true/false	Virtual scrolling for large data
`enableTooltip`	`<ejs-kanban>`	true/false	Hover tooltip on cards
`tooltipTemplate`	`<ejs-kanban>`	Template ID string	Custom tooltip HTML template
`allowDragAndDrop`	`<ejs-kanban>`	true/false	Global drag-and-drop toggle
`externalDropId`	`<ejs-kanban>`	Element ID array	Target IDs for external drop
`enablePersistence`	`<ejs-kanban>`	true/false	Save state to localStorage
`locale`	`<ejs-kanban>`	Locale string (e.g. `"de"` )	UI string localization
`enableRtl`	`<ejs-kanban>`	true/false	Right-to-left layout
`width`	`<ejs-kanban>`	auto/px/%	Board width
`height`	`<ejs-kanban>`	auto/px/%	Board height
`AllowKeyboard`	`<ejs-kanban>`	true/false	Keyboard navigation toggle
`headerField`	`<e-kanban-cardsettings>`	Field name string	Unique card ID field (mandatory)
`contentField`	`<e-kanban-cardsettings>`	Field name string	Card body text field
`template`	`<e-kanban-cardsettings>`	Template ID string	Custom card HTML template
`selectionType`	`<e-kanban-cardsettings>`	None/Single/Multiple	Card selection mode
`priority`	`<e-kanban-cardsettings>`	Field name string	Numeric rank field for ordering
`showHeader`	`<e-kanban-cardsettings>`	true/false	Show/hide card header
`keyField`	`<e-kanban-column>`	Status value(s)	Column card filter (single or comma-separated)
`headerText`	`<e-kanban-column>`	Display string	Column title
`allowToggle`	`<e-kanban-column>`	true/false	Collapsible column
`isExpanded`	`<e-kanban-column>`	true/false	Initial expand state
`minCount`	`<e-kanban-column>`	Integer	Minimum cards constraint
`maxCount`	`<e-kanban-column>`	Integer	Maximum cards constraint
`showItemCount`	`<e-kanban-column>`	true/false	Show card count badge
`allowDrag`	`<e-kanban-column>`	true/false	Allow cards to be dragged from column
`allowDrop`	`<e-kanban-column>`	true/false	Allow cards to be dropped into column
`keyField`	`<e-kanban-swimlanesettings>`	Field name string	Swimlane grouping field
`textField`	`<e-kanban-swimlanesettings>`	Field name string	Swimlane display label field
`sortBy`	`<e-kanban-sortsettings>`	Index/DataSourceOrder/Custom	Card sort strategy
`field`	`<e-kanban-sortsettings>`	Field name string	Field to sort by
`direction`	`<e-kanban-sortsettings>`	Ascending/Descending	Sort direction

属性	标签	取值	用途
`keyField`	`<ejs-kanban>`	字段名字符串	按状态值将卡片映射到列
`dataSource`	`<ejs-kanban>`	`@ViewBag.data`	本地数据集合
`enableVirtualization`	`<ejs-kanban>`	true/false	大型数据的虚拟滚动
`enableTooltip`	`<ejs-kanban>`	true/false	卡片悬停工具提示
`tooltipTemplate`	`<ejs-kanban>`	模板ID字符串	自定义工具提示HTML模板
`allowDragAndDrop`	`<ejs-kanban>`	true/false	全局拖放开关
`externalDropId`	`<ejs-kanban>`	元素ID数组	外部拖放的目标ID
`enablePersistence`	`<ejs-kanban>`	true/false	将状态保存到localStorage
`locale`	`<ejs-kanban>`	本地化字符串（如 `"de"` ）	UI字符串本地化
`enableRtl`	`<ejs-kanban>`	true/false	从右到左布局
`width`	`<ejs-kanban>`	auto/px/%	看板宽度
`height`	`<ejs-kanban>`	auto/px/%	看板高度
`AllowKeyboard`	`<ejs-kanban>`	true/false	键盘导航开关
`headerField`	`<e-kanban-cardsettings>`	字段名字符串	必填的唯一卡片ID字段
`contentField`	`<e-kanban-cardsettings>`	字段名字符串	卡片正文文本字段
`template`	`<e-kanban-cardsettings>`	模板ID字符串	自定义卡片HTML模板
`selectionType`	`<e-kanban-cardsettings>`	None/Single/Multiple	卡片选择模式
`priority`	`<e-kanban-cardsettings>`	字段名字符串	用于排序的数字排名字段
`showHeader`	`<e-kanban-cardsettings>`	true/false	显示/隐藏卡片表头
`keyField`	`<e-kanban-column>`	状态值（单个或逗号分隔）	列卡片筛选条件
`headerText`	`<e-kanban-column>`	显示字符串	列标题
`allowToggle`	`<e-kanban-column>`	true/false	可折叠列
`isExpanded`	`<e-kanban-column>`	true/false	初始展开状态
`minCount`	`<e-kanban-column>`	整数	最小卡片数量约束
`maxCount`	`<e-kanban-column>`	整数	最大卡片数量约束
`showItemCount`	`<e-kanban-column>`	true/false	显示卡片数量徽章
`allowDrag`	`<e-kanban-column>`	true/false	允许从列中拖拽卡片
`allowDrop`	`<e-kanban-column>`	true/false	允许向列中拖放卡片
`keyField`	`<e-kanban-swimlanesettings>`	字段名字符串	泳道分组字段
`textField`	`<e-kanban-swimlanesettings>`	字段名字符串	泳道显示标签字段
`sortBy`	`<e-kanban-sortsettings>`	Index/DataSourceOrder/Custom	卡片排序策略
`field`	`<e-kanban-sortsettings>`	字段名字符串	排序依据字段
`direction`	`<e-kanban-sortsettings>`	Ascending/Descending	排序方向

Data Model

数据模型

The standard

KanbanDataModels

class for all examples:

csharp

public class KanbanDataModels
{
    public string Id { get; set; }
    public string Title { get; set; }
    public string Status { get; set; }      // Maps to keyField
    public string Summary { get; set; }     // Card body content
    public string Type { get; set; }
    public string Priority { get; set; }
    public string Tags { get; set; }
    public double Estimate { get; set; }
    public string Assignee { get; set; }    // Used for swimlane grouping
    public int RankId { get; set; }         // Numeric rank for priority ordering
    public string Color { get; set; }       // Optional card color field
}

所有示例使用的标准

KanbanDataModels

类：

csharp

public class KanbanDataModels
{
    public string Id { get; set; }
    public string Title { get; set; }
    public string Status { get; set; }      // 映射到keyField
    public string Summary { get; set; }     // 卡片正文内容
    public string Type { get; set; }
    public string Priority { get; set; }
    public string Tags { get; set; }
    public double Estimate { get; set; }
    public string Assignee { get; set; }    // 用于泳道分组
    public int RankId { get; set; }         // 用于优先级排序的数字排名
    public string Color { get; set; }       // 可选的卡片颜色字段
}

syncfusion-aspnetcore-kanban

Original

Translation

Implementing Syncfusion ASP.NET Core Kanban

实现Syncfusion ASP.NET Core Kanban

Table of Contents

目录

Quick Start

快速入门

When to Use This Skill

何时使用本技能

Documentation and Navigation Guide

文档与导航指南

Setup and First Board

环境搭建与首个看板

Data Binding

数据绑定

Cards

卡片

Columns

列

Swimlanes

泳道

Drag and Drop

拖放功能

Card Edit Dialog

卡片编辑对话框

Sorting, Priority, and Validation

排序、优先级与验证

Tooltip, Style, and Dimensions

工具提示、样式与尺寸

Persistence, Localization, and Responsive

持久化、本地化与响应式

Virtual Scrolling and Accessibility

虚拟滚动与无障碍访问

Events

事件

Methods

方法

All Properties Reference

所有属性参考

How-To Recipes

实操方案

Common Patterns

常见模式

Swimlane Board with Remote Data

带远程数据的泳道看板

Board with Column Constraints

带列约束的看板

Board with Card Edit Dialog + CRUD

带卡片编辑对话框+CRUD的看板

Virtual Scrolling Board

虚拟滚动看板

Key Properties Reference

关键属性参考

Data Model

数据模型