syncfusion-angular-kanban

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Kanban

实现Syncfusion Angular Kanban

When to Use This Skill

何时使用本技能

The Syncfusion Angular Kanban component is essential when you need to:

Visualize workflows - Display task stages (To Do → In Progress → Testing → Done)
Enable task management - Allow users to organize and track work across multiple columns
Implement drag-and-drop - Let users move cards between columns to change task status
Group tasks - Use swimlanes to organize cards by owner, priority, or category
Set constraints - Enforce WIP (Work In Progress) limits with min/max card counts
Customize appearance - Apply templates, themes, and custom styling to cards and columns
Handle events - Listen to card clicks, drag operations, and state changes
Persist state - Save board configuration and card positions

当你需要实现以下需求时，Syncfusion Angular Kanban组件是必备工具：

可视化工作流 - 展示任务阶段（待办 → 进行中 → 测试 → 完成）
支持任务管理 - 允许用户跨多列组织和跟踪工作
实现拖拽功能 - 支持用户在列之间移动卡片以更改任务状态
任务分组 - 使用泳道按负责人、优先级或类别组织卡片
设置约束 - 强制执行WIP（在制品）限制，设置卡片数量的最小/最大值
自定义外观 - 为卡片和列应用模板、主题和自定义样式
处理事件 - 监听卡片点击、拖拽操作和状态变更事件
状态持久化 - 保存看板配置和卡片位置

Component Overview

组件概述

The Kanban board is a visual workflow management tool built with:

Cards - Represent individual tasks (mapped to dataSource via
```
cardSettings
```
)
Columns - Define workflow stages (mapped using
```
keyField
```
and column configuration)
Swimlanes - Group cards by category (employee, priority, etc.)
Drag-and-drop - Enabled by default (
```
allowDragAndDrop: true
```
)
Data Binding - Supports local arrays and remote DataManager
Templates - Customize card, column header, swimlane header, and tooltip rendering
Responsive - Adapts layout to desktop and mobile devices
Themes - Five built-in themes: Material, Bootstrap 3, Bootstrap 4, Fabric, High Contrast

Kanban看板是一款可视化工作流管理工具，核心组成如下：

卡片 - 代表单个任务（通过
```
cardSettings
```
映射到dataSource）
列 - 定义工作流阶段（通过
```
keyField
```
和列配置映射）
泳道 - 按类别（员工、优先级等）分组卡片
拖拽功能 - 默认启用（
```
allowDragAndDrop: true
```
）
数据绑定 - 支持本地数组和远程DataManager
模板 - 自定义卡片、列标题、泳道标题和提示框的渲染
响应式 - 适配桌面和移动设备布局
主题 - 5个内置主题：Material、Bootstrap 3、Bootstrap 4、Fabric、高对比度

Key Features

核心特性

✓ Multi-column workflow with customizable headers
✓ Smooth drag-and-drop between columns and within columns
✓ Swimlane grouping by any data field
✓ WIP validation (min/max card counts per column/swimlane)
✓ Templates for cards, columns, swimlanes, dialogs, and tooltips
✓ Local & remote data binding with DataManager integration
✓ Keyboard navigation and full accessibility support
✓ Events for user interactions (click, drag, selection, dialog open/close)
✓ Methods for programmatic control (add/delete cards, show/hide columns)
✓ Multiple selection modes (single or multiple card selection)
✓ Stacked headers for grouping related columns
✓ Built-in themes with CSS customization support

✓ 多列工作流，支持自定义表头
✓ 列内、列间流畅的拖拽交互
✓ 支持按任意数据字段进行泳道分组
✓ WIP校验（每列/每个泳道的卡片数量最小/最大值限制）
✓ 支持卡片、列、泳道、弹窗、提示框的模板自定义
✓ 集成DataManager，支持本地和远程数据绑定
✓ 键盘导航和完整的无障碍访问支持
✓ 支持用户交互事件（点击、拖拽、选择、弹窗打开/关闭）
✓ 可编程控制的方法（新增/删除卡片、显示/隐藏列）
✓ 多种选择模式（单选或多选卡片）
✓ 堆叠表头，用于分组关联列
✓ 内置主题，支持CSS自定义样式

Documentation and Navigation Guide

文档和导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Installation and npm package setup
Angular module imports and configuration
CSS imports and theme registration
Basic Kanban initialization with minimal example
First running board with sample data

📄 阅读： references/getting-started.md

安装和npm包设置
Angular模块导入和配置
CSS导入和主题注册
最小示例的基础Kanban初始化
搭载示例数据的首个可运行看板

Core Structure: Columns and Swimlanes

核心结构：列和泳道

📄 Read: references/columns-and-swimlanes.md

Column configuration with keyField mapping
Single-key vs. multi-key column mapping
Column headers and stacked headers
Swimlane grouping by field
Dynamic column add/remove/show/hide

📄 阅读： references/columns-and-swimlanes.md

带keyField映射的列配置
单键 vs 多键列映射
列表头和堆叠表头
按字段实现泳道分组
动态列新增/删除/显示/隐藏

Cards and Data Binding

卡片和数据绑定

📄 Read: references/cards-and-data-binding.md

Card structure: header field, content field, grabber field
Card templates and custom rendering
Local array data binding
Remote data binding with DataManager
OData v4 support
Card selection modes (single/multiple)

📄 阅读： references/cards-and-data-binding.md

卡片结构：头部字段、内容字段、拖拽标识字段
卡片模板和自定义渲染
本地数组数据绑定
使用DataManager实现远程数据绑定
OData v4支持
卡片选择模式（单选/多选）

Drag-and-Drop and Interaction

拖拽和交互

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

Drag-and-drop functionality (enabled by default)
Card movement between columns
Reordering within columns
transitionColumns to control valid transitions
Drag events (beforeDragStart, dragStart, dragStop)
WIP limits: enforcing min/max card counts
Keyboard navigation support

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

拖拽功能（默认启用）
列间卡片移动
列内卡片重排序
使用transitionColumns控制合法的状态流转
拖拽事件（beforeDragStart、dragStart、dragStop）
WIP限制：强制卡片数量最小/最大值
键盘导航支持

Features and Customization

功能和自定义

📄 Read: references/features-and-customization.md

Sorting, filtering, and searching cards
Validation rules and dialogs
Responsive mode for mobile
Custom dialog templates
Tooltip templates and configuration
Priority indicators and color grabbers
Column toggling and collapsing

📄 阅读： references/features-and-customization.md

卡片排序、筛选和搜索
校验规则和弹窗
移动端响应式模式
自定义弹窗模板
提示框模板和配置
优先级标识和彩色拖拽标识
列切换和折叠

Properties Reference

属性参考

📄 Read: references/properties.md

Core properties: allowDragAndDrop, allowKeyboard, allowSelection
Card configuration: cardSettings (headerField, contentField, template, etc.)
Column setup: columns array with ColumnsModel
Swimlane configuration: swimlaneSettings
Dialog and tooltip templates
WIP limits: minCount, maxCount per column
Responsive breakpoints and heights

📄 阅读： references/properties.md

核心属性：allowDragAndDrop、allowKeyboard、allowSelection
卡片配置：cardSettings（headerField、contentField、template等）
列设置：包含ColumnsModel的columns数组
泳道配置：swimlaneSettings
弹窗和提示框模板
WIP限制：每列的minCount、maxCount
响应式断点和高度

Methods Reference

方法参考

📄 Read: references/methods.md

Card operations: addCard(), deleteCard(), updateCard(), getSelectedCards()
Column operations: addColumn(), removeColumn(), hideColumn(), showColumn()
Board operations: refresh(), getCardCount()
Swimlane operations: getSwimlaneData()
Dialog control: openDialog(), closeDialog()
Search/Filter: search(), filter(), sortBy()

📄 阅读： references/methods.md

卡片操作：addCard()、deleteCard()、updateCard()、getSelectedCards()
列操作：addColumn()、removeColumn()、hideColumn()、showColumn()
看板操作：refresh()、getCardCount()
泳道操作：getSwimlaneData()
弹窗控制：openDialog()、closeDialog()
搜索/筛选：search()、filter()、sortBy()

Events Reference

事件参考

📄 Read: references/events.md

Action events: actionBegin, actionComplete, actionFailure
Card events: cardClick, cardDoubleClick, cardSelection
Drag events: dragStart, dragStop, beforeDragStart
Dialog events: dialogOpen, dialogClose
Column/swimlane events: columnClick, swimlaneClick
Event argument types and data structures

📄 阅读： references/events.md

操作事件：actionBegin、actionComplete、actionFailure
卡片事件：cardClick、cardDoubleClick、cardSelection
拖拽事件：dragStart、dragStop、beforeDragStart
弹窗事件：dialogOpen、dialogClose
列/泳道事件：columnClick、swimlaneClick
事件参数类型和数据结构

Data Persistence and State

数据持久化和状态

📄 Read: references/data-persistence.md

Local storage persistence for board state
Saving card positions and column state
ObservableCollection integration
State restoration after page reload
Manual state save/restore patterns

📄 阅读： references/data-persistence.md

看板状态的本地存储持久化
保存卡片位置和列状态
ObservableCollection集成
页面重载后的状态恢复
手动状态保存/恢复模式

Styling, Themes, and Appearance

样式、主题和外观

📄 Read: references/styling-and-theming.md

Built-in themes (Material, Bootstrap 3/4, Fabric, High Contrast)
CSS variable customization
Card and column custom styling
Dark mode support
RTL (right-to-left) language support
Theme Studio integration

📄 阅读： references/styling-and-theming.md

内置主题（Material、Bootstrap 3/4、Fabric、高对比度）
CSS变量自定义
卡片和列自定义样式
深色模式支持
RTL（从右到左）语言支持
主题工作室集成

Accessibility and Internationalization

无障碍访问和国际化

📄 Read: references/accessibility-and-localization.md

WCAG compliance and keyboard navigation
ARIA attributes for screen readers
Focus management and keyboard shortcuts
Internationalization (i18n) setup
Multi-language support
Locale data configuration

📄 阅读： references/accessibility-and-localization.md

WCAG合规和键盘导航
面向屏幕阅读器的ARIA属性
焦点管理和键盘快捷键
国际化（i18n）设置
多语言支持
地区数据配置

Migration and Best Practices

迁移和最佳实践

📄 Read: references/migration-and-best-practices.md

EJ1 to EJ2 migration guide
Performance optimization strategies
Virtual scrolling for large datasets
Common patterns and code examples
Troubleshooting common issues
FAQ and gotchas

📄 阅读： references/migration-and-best-practices.md

EJ1到EJ2迁移指南
性能优化策略
面向大数据集的虚拟滚动
常用模式和代码示例
常见问题排查
FAQ和注意事项

Quick Start Example

快速入门示例

1. Install Package

1. 安装包

bash

npm install @syncfusion/ej2-angular-kanban

bash

npm install @syncfusion/ej2-angular-kanban

2. Import and Setup Component

2. 导入和设置组件

typescript

import { Component } from '@angular/core';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { CardSettingsModel } from '@syncfusion/ej2-angular-kanban';

@Component({
  selector: 'app-kanban-board',
  standalone: true,
  imports: [KanbanModule],
  template: `
    <ejs-kanban 
      keyField="Status" 
      [dataSource]="data"
      [cardSettings]="cardSettings">
      <e-columns>
        <e-column headerText="To Do" keyField="Open"></e-column>
        <e-column headerText="In Progress" keyField="InProgress"></e-column>
        <e-column headerText="Testing" keyField="Testing"></e-column>
        <e-column headerText="Done" keyField="Close"></e-column>
      </e-columns>
    </ejs-kanban>
  `
})
export class KanbanBoardComponent {
  data = [
    { Id: 1, Status: 'Open', Summary: 'Analyze the new requirements gathered from the customer.', Type: 'Epic' },
    { Id: 2, Status: 'InProgress', Summary: 'Improve application performance', Type: 'Epic' },
    { Id: 3, Status: 'Testing', Summary: 'Fix the issues reported in the IE browser', Type: 'Bug' },
    { Id: 4, Status: 'Close', Summary: 'Fix the issue reported by the customer.', Type: 'Bug' }
  ];

  cardSettings: CardSettingsModel = {
    headerField: 'Id',
    contentField: 'Summary'
  };
}

typescript

import { Component } from '@angular/core';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { CardSettingsModel } from '@syncfusion/ej2-angular-kanban';

@Component({
  selector: 'app-kanban-board',
  standalone: true,
  imports: [KanbanModule],
  template: `
    <ejs-kanban 
      keyField="Status" 
      [dataSource]="data"
      [cardSettings]="cardSettings">
      <e-columns>
        <e-column headerText="To Do" keyField="Open"></e-column>
        <e-column headerText="In Progress" keyField="InProgress"></e-column>
        <e-column headerText="Testing" keyField="Testing"></e-column>
        <e-column headerText="Done" keyField="Close"></e-column>
      </e-columns>
    </ejs-kanban>
  `
})
export class KanbanBoardComponent {
  data = [
    { Id: 1, Status: 'Open', Summary: 'Analyze the new requirements gathered from the customer.', Type: 'Epic' },
    { Id: 2, Status: 'InProgress', Summary: 'Improve application performance', Type: 'Epic' },
    { Id: 3, Status: 'Testing', Summary: 'Fix the issues reported in the IE browser', Type: 'Bug' },
    { Id: 4, Status: 'Close', Summary: 'Fix the issue reported by the customer.', Type: 'Bug' }
  ];

  cardSettings: CardSettingsModel = {
    headerField: 'Id',
    contentField: 'Summary'
  };
}

3. Add Styles

3. 添加样式

css

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-kanban/styles/material3.css';

css

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-kanban/styles/material3.css';

Common Patterns

常用模式

Pattern 1: Enable Swimlanes by Owner

模式1：按负责人启用泳道

Group cards by assigned team member:

typescript

swimlaneSettings: { keyField: 'Assignee' }

按分配的团队成员分组卡片：

typescript

swimlaneSettings: { keyField: 'Assignee' }

Pattern 2: Enforce WIP Limits

模式2：强制执行WIP限制

Set min/max cards per column:

typescript

columns: [
  { headerText: 'To Do', keyField: 'Open', minCount: 1, maxCount: 5 },
  { headerText: 'In Progress', keyField: 'InProgress', minCount: 0, maxCount: 3 }
]

设置每列的卡片最小/最大值：

typescript

columns: [
  { headerText: 'To Do', keyField: 'Open', minCount: 1, maxCount: 5 },
  { headerText: 'In Progress', keyField: 'InProgress', minCount: 0, maxCount: 3 }
]

Pattern 3: Handle Card Click Events

模式3：处理卡片点击事件

Listen to card interactions:

typescript

onCardClick(args: CardClickEventArgs): void {
  console.log('Card clicked:', args.data);
}

监听卡片交互：

typescript

onCardClick(args: CardClickEventArgs): void {
  console.log('Card clicked:', args.data);
}

Pattern 4: Programmatically Add Cards

模式4：编程式新增卡片

Use the method API:

typescript

@ViewChild('kanban') kanban: KanbanComponent;

addNewCard(): void {
  this.kanban.addCard({
    Id: 5,
    Status: 'Open',
    Summary: 'New task'
  });
}

使用方法API：

typescript

@ViewChild('kanban') kanban: KanbanComponent;

addNewCard(): void {
  this.kanban.addCard({
    Id: 5,
    Status: 'Open',
    Summary: 'New task'
  });
}

Key Props Reference

核心属性参考

Prop	Type	Purpose
`keyField`	string	Maps cards to columns based on field value
`dataSource`	Object[] \| DataManager	Array or DataManager instance with card data
`cardSettings`	CardSettingsModel	Header, content, and template field mappings
`columns`	ColumnsModel[]	Column definitions with headers and key fields
`swimlaneSettings`	SwimlaneSettingsModel	Swimlane grouping by field
`allowDragAndDrop`	boolean	Enable card drag-and-drop (default: true)
`allowKeyboard`	boolean	Enable keyboard navigation (default: true)
`allowSelection`	boolean	Allow card selection
`selectionType`	'Single' \| 'Multiple'	Selection mode
`height`	string	Board height
`width`	string	Board width

属性	类型	用途
`keyField`	string	基于字段值将卡片映射到对应列
`dataSource`	Object[] \| DataManager	存储卡片数据的数组或DataManager实例
`cardSettings`	CardSettingsModel	头部、内容和模板字段映射
`columns`	ColumnsModel[]	包含表头和关键字段的列定义
`swimlaneSettings`	SwimlaneSettingsModel	按字段进行泳道分组
`allowDragAndDrop`	boolean	启用卡片拖拽（默认值：true）
`allowKeyboard`	boolean	启用键盘导航（默认值：true）
`allowSelection`	boolean	允许选择卡片
`selectionType`	'Single' \| 'Multiple'	选择模式
`height`	string	看板高度
`width`	string	看板宽度

Common Use Cases

常见使用场景

Project Management - Track tasks from backlog to completion
Bug Tracking - Organize issues by status (Open, In Progress, Testing, Closed)
Customer Support - Manage tickets through resolution pipeline
Agile Sprint Board - Display user stories across sprint stages
Sales Pipeline - Track leads from prospect to customer
Content Workflow - Manage articles from draft to published
Recruitment - Organize candidates through hiring stages
DevOps Pipeline - Track deployments across environments

Next Steps: Choose a reference file from the navigation guide above based on your immediate need, or start with Getting Started to set up your first Kanban board.

项目管理 - 跟踪任务从待办到完成的全流程
缺陷跟踪 - 按状态组织问题（打开、进行中、测试、关闭）
客户支持 - 管理工单的全解决流程
敏捷迭代看板 - 展示用户故事在迭代各阶段的进度
销售漏斗 - 跟踪线索从潜在客户到成单的全流程
内容工作流 - 管理文章从草稿到发布的全流程
招聘 - 组织候选人在招聘各阶段的进度
DevOps流水线 - 跟踪部署在各环境的进度

下一步： 根据你的即时需求从上述导航指南中选择对应参考文件，或者从入门指南开始搭建你的第一个Kanban看板。