OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-kanban
Implement Syncfusion Blazor Kanban board component (SfKanban) for card-based workflow management. Use this when building Kanban boards, task management UIs with swimlanes, or drag-and-drop column workflows in Blazor applications. This skill covers data binding, column and card configuration, swimlane organization, drag-and-drop interactions, dialog editing, sorting, WIP validation, accessibility, localization, and responsive mode.
npx skills add syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-kanban
Use this skill when:
| 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 |
| 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 |
<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><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" },
};
}<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><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><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>