syncfusion-blazor-kanban

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Blazor Kanban Component

实现Syncfusion Blazor Kanban组件

When to Use This Skill

何时使用本技能

Use this skill when:

Building Kanban boards or workflow management UIs in Blazor
Implementing task/card management with column-based workflows
Adding swimlane grouping to organize cards by assignee or category
Enabling drag-and-drop card movement between columns
Configuring WIP (Work-In-Progress) validation limits
Customizing card appearance with templates
Binding Kanban to local or remote data sources
Integrating Kanban with external components (Schedule, TreeView)

在以下场景使用本技能：

在Blazor中构建看板或工作流管理UI
实现基于列工作流的任务/卡片管理
添加泳道分组，按经办人或类别组织卡片
启用卡片在列间的拖拽移动
配置WIP（在制品）验证限制
通过模板自定义卡片外观
将看板绑定到本地或远程数据源
将看板与外部组件（Schedule、TreeView）集成

Quick Start

快速开始

1. Install NuGet Packages

1. 安装NuGet包

csharp

dotnet add package Syncfusion.Blazor.Kanban
dotnet add package Syncfusion.Blazor.Themes

csharp

dotnet add package Syncfusion.Blazor.Kanban
dotnet add package Syncfusion.Blazor.Themes

2. Register Service (Program.cs)

2. 注册服务（Program.cs）

csharp

using Syncfusion.Blazor;
builder.Services.AddSyncfusionBlazor();

csharp

using Syncfusion.Blazor;
builder.Services.AddSyncfusionBlazor();

3. Add Imports (_Imports.razor)

3. 添加导入（_Imports.razor）

razor

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Kanban

razor

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Kanban

4. Add Stylesheet and Script (index.html or App.razor)

4. 添加样式表与脚本（index.html或App.razor）

html

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

html

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

5. Basic Kanban with Cards

5. 基础看板示例（带卡片）

razor

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() {"Testing"})"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
</SfKanban>

@code {
    public class TasksModel
    {
        public string Id { get; set; }
        public string Title { get; set; }
        public string Status { get; set; }
        public string Summary { get; set; }
        public string Assignee { get; set; }
    }

    public List<TasksModel> Tasks = new List<TasksModel>()
    {
        new TasksModel { Id = "Task 1", Title = "BLAZ-29001", Status = "Open", Summary = "Analyze the new requirements gathered from the customer.", Assignee = "Nancy Davloio" },
        new TasksModel { Id = "Task 2", Title = "BLAZ-29002", Status = "InProgress", Summary = "Improve application performance", Assignee = "Andrew Fuller" },
        new TasksModel { Id = "Task 3", Title = "BLAZ-29003", Status = "Open", Summary = "Arrange a web meeting with the customer.", Assignee = "Janet Leverling" },
        new TasksModel { Id = "Task 4", Title = "BLAZ-29004", Status = "Testing", Summary = "Fix the issues reported by the customer.", Assignee = "Janet Leverling" },
        new TasksModel { Id = "Task 5", Title = "BLAZ-29005", Status = "Close", Summary = "Fix the issues reported in Safari browser.", Assignee = "Steven walker" },
    };
}

razor

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() {"Testing"})"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
</SfKanban>

@code {
    public class TasksModel
    {
        public string Id { get; set; }
        public string Title { get; set; }
        public string Status { get; set; }
        public string Summary { get; set; }
        public string Assignee { get; set; }
    }

    public List<TasksModel> Tasks = new List<TasksModel>()
    {
        new TasksModel { Id = "Task 1", Title = "BLAZ-29001", Status = "Open", Summary = "Analyze the new requirements gathered from the customer.", Assignee = "Nancy Davloio" },
        new TasksModel { Id = "Task 2", Title = "BLAZ-29002", Status = "InProgress", Summary = "Improve application performance", Assignee = "Andrew Fuller" },
        new TasksModel { Id = "Task 3", Title = "BLAZ-29003", Status = "Open", Summary = "Arrange a web meeting with the customer.", Assignee = "Janet Leverling" },
        new TasksModel { Id = "Task 4", Title = "BLAZ-29004", Status = "Testing", Summary = "Fix the issues reported by the customer.", Assignee = "Janet Leverling" },
        new TasksModel { Id = "Task 5", Title = "BLAZ-29005", Status = "Close", Summary = "Fix the issues reported in Safari browser.", Assignee = "Steven walker" },
    };
}

Navigation Guide

导航指南

Topic	Reference File
Getting started (WebAssembly/Server/Web App)	getting-started.md
Data binding (local, remote, ExpandoObject, Observable)	data-binding.md
Column configuration	columns.md
Card customization	cards.md
Drag and drop (internal & external)	drag-and-drop.md
Swimlane grouping	swimlane.md
Card editing dialog	dialog.md
Events reference	events.md
Card sorting	sort.md
Workflow restrictions	workflow.md
WIP validation (MinCount/MaxCount)	validation.md
Styling and CSS classes	style.md
Accessibility (WCAG, keyboard navigation)	accessibility.md
Localization and RTL	localization.md
Tooltips	tooltip.md
Responsive mode	responsive-mode.md
Height and width dimensions	dimensions.md

主题	参考文件
快速入门（WebAssembly/Server/Web App）	getting-started.md
数据绑定（本地、远程、ExpandoObject、Observable）	data-binding.md
列配置	columns.md
卡片自定义	cards.md
拖拽（内部及外部）	drag-and-drop.md
泳道分组	swimlane.md
卡片编辑对话框	dialog.md
事件参考	events.md
卡片排序	sort.md
工作流限制	workflow.md
WIP验证（MinCount/MaxCount）	validation.md
样式与CSS类	style.md
可访问性（WCAG、键盘导航）	accessibility.md
本地化与RTL	localization.md
工具提示	tooltip.md
响应式模式	responsive-mode.md
高度与宽度尺寸	dimensions.md

Common Patterns

常见模式

Kanban with Swimlane

带泳道的看板

razor

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
    <KanbanSwimlaneSettings KeyField="Assignee"></KanbanSwimlaneSettings>
</SfKanban>

razor

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
    <KanbanSwimlaneSettings KeyField="Assignee"></KanbanSwimlaneSettings>
</SfKanban>

Kanban with WIP Validation

带WIP验证的看板

razor

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="Backlog" KeyField="@(new List<string>() {"Open"})" MinCount="2"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})" MaxCount="3"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
</SfKanban>

razor

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="Backlog" KeyField="@(new List<string>() {"Open"})" MinCount="2"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})" MaxCount="3"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
</SfKanban>

Kanban with Index-Based Sorting

基于索引排序的看板

razor

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
    <KanbanSortSettings SortBy="SortOrderBy.Index" Field="RankId"></KanbanSortSettings>
</SfKanban>

razor

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
    <KanbanSortSettings SortBy="SortOrderBy.Index" Field="RankId"></KanbanSortSettings>
</SfKanban>

Key Properties Reference

关键属性参考

Property	Component	Description
`KeyField`	`SfKanban`	Maps the data field that determines which column a card belongs to
`DataSource`	`SfKanban`	Binds local or remote data to the Kanban
`AllowDragAndDrop`	`SfKanban`	Enables/disables drag-and-drop (default: true)
`EnableTooltip`	`SfKanban`	Shows card details on hover
`EnableRtl`	`SfKanban`	Enables right-to-left layout
`HeaderField`	`KanbanCardSettings`	Maps the unique ID field for card headers
`ContentField`	`KanbanCardSettings`	Maps the field shown in card body
`KeyField`	`KanbanColumn`	One or more status values that map cards to this column
`AllowToggle`	`KanbanColumn`	Allows column expand/collapse
`MinCount`	`KanbanColumn`	Minimum card count for WIP validation
`MaxCount`	`KanbanColumn`	Maximum card count for WIP validation
`TransitionColumns`	`KanbanColumn`	Restricts cards to only drop into specified columns
`AllowDrop`	`KanbanColumn`	Prevents cards from being dropped into a column
`AllowDrag`	`KanbanColumn`	Prevents cards from being dragged from a column
`KeyField`	`KanbanSwimlaneSettings`	Groups cards into swimlane rows by this field
`SortBy`	`KanbanSortSettings`	Sorting mode: DataSourceOrder, Index, or Custom

属性	组件	描述
`KeyField`	`SfKanban`	映射用于确定卡片所属列的数据字段
`DataSource`	`SfKanban`	将本地或远程数据绑定到看板
`AllowDragAndDrop`	`SfKanban`	启用/禁用拖拽功能（默认值：true）
`EnableTooltip`	`SfKanban`	鼠标悬停时显示卡片详情
`EnableRtl`	`SfKanban`	启用从右到左的布局
`HeaderField`	`KanbanCardSettings`	映射卡片标题的唯一ID字段
`ContentField`	`KanbanCardSettings`	映射卡片主体中显示的字段
`KeyField`	`KanbanColumn`	一个或多个状态值，用于将卡片映射到本列
`AllowToggle`	`KanbanColumn`	允许列展开/折叠
`MinCount`	`KanbanColumn`	WIP验证的最小卡片数量
`MaxCount`	`KanbanColumn`	WIP验证的最大卡片数量
`TransitionColumns`	`KanbanColumn`	限制卡片只能拖放到指定列
`AllowDrop`	`KanbanColumn`	阻止卡片被拖放到本列
`AllowDrag`	`KanbanColumn`	阻止卡片从本列被拖走
`KeyField`	`KanbanSwimlaneSettings`	按此字段将卡片分组为泳道行
`SortBy`	`KanbanSortSettings`	排序模式：DataSourceOrder、Index或Custom