syncfusion-blazor-kanban

# Implementing Syncfusion Blazor Kanban Component ## 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) ## Quick Start ### 1. Install NuGet Packages ```csharp dotnet add package Syncfusion.Blazor.Kanban dotnet add package Syncfusion.Blazor.Themes ``` ### 2. Register Service (Program.cs) ```csharp using Syncfusion.Blazor; builder.Services.AddSyncfusionBlazor(); ``` ### 3. Add Imports (_Imports.razor) ```razor @using Syncfusion.Blazor @using Syncfusion.Blazor.Kanban ``` ### 4. Add Stylesheet and Script (index.html or 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> ``` ### 5. Basic Kanban with Cards ```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](references/getting-started.md) | | Data binding (local, remote, ExpandoObject, Observable) | [data-binding.md](references/data-binding.md) | | Column configuration | [columns.md](references/columns.md) | | Card customization | [cards.md](references/cards.md) | | Drag and drop (internal & external) | [drag-and-drop.md](references/drag-and-drop.md) | | Swimlane grouping | [swimlane.md](references/swimlane.md) | | Card editing dialog | [dialog.md](references/dialog.md) | | Events reference | [events.md](references/events.md) | | Card sorting | [sort.md](references/sort.md) | | Workflow restrictions | [workflow.md](references/workflow.md) | | WIP validation (MinCount/MaxCount) | [validation.md](references/validation.md) | | Styling and CSS classes | [style.md](references/style.md) | | Accessibility (WCAG, keyboard navigation) | [accessibility.md](references/accessibility.md) | | Localization and RTL | [localization.md](references/localization.md) | | Tooltips | [tooltip.md](references/tooltip.md) | | Responsive mode | [responsive-mode.md](references/responsive-mode.md) | | Height and width dimensions | [dimensions.md](references/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> ``` ### Kanban with WIP Validation ```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> ``` ## 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 |