Skip to main content Home Creators syncfusion javascript-ui-controls-skills syncfusion-javascript-kanban
syncfusion-javascript-kanban Implement Syncfusion TypeScript Kanban board for visual task management and workflow tracking. Use this when working with task boards, workflow visualization, or agile project management. This skill covers Kanban board setup, column configuration, card management, swimlanes, drag-and-drop interactions, and WIP limits for TypeScript applications.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-kanbanThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository syncfusion-javascript-data-manager Implements Syncfusion TypeScript/JavaScript(ES6+) DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.
syncfusion-javascript-grid Implements Syncfusion JavaScript Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
syncfusion-javascript-diagram Create and edit visual diagrams with Syncfusion JavaScript Diagram (flowcharts, BPMN, swimlanes, UML, org charts, network topologies). Trigger for diagram rendering, node/connector modeling, layouts, data binding, palettes, interactive tools, exporting, and workflow visualization tasks.
Related occupations SOC
Based on SOC occupation classification
name syncfusion-javascript-kanban description Implement Syncfusion TypeScript Kanban board for visual task management and workflow tracking. Use this when working with task boards, workflow visualization, or agile project management. This skill covers Kanban board setup, column configuration, card management, swimlanes, drag-and-drop interactions, and WIP limits for TypeScript applications. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Data Visualization"}
Implementing Kanban Board
Guide for implementing and customizing the Syncfusion TypeScript Kanban board - a visual task management control that displays work at various stages using columns, cards, and swimlanes.
When to Use This Skill
Use this skill when you need to:
Implement a Kanban board for task or workflow managementCreate visual workflows with drag-and-drop card interactionsBuild agile project boards with columns representing workflow stagesGroup tasks by categories using swimlanes (e.g., by assignee, priority, team)Manage work-in-progress limits with card validation per columnEnable card editing with dialogs for add/edit/delete operationsBind data from local arrays, remote APIs, or OData servicesCustomize card layouts with templates for specific business requirementsTrack project status with visual representation across multiple stages
Control Overview
The Kanban board is a powerful visual management tool that helps teams:
Visualize work stages with customizable columns
Move cards through workflow stages with drag-and-drop
Group related work with swimlanes
Track progress with card counts and WIP limits
Edit tasks with built-in or custom dialogs
Support responsive layouts for desktop and mobile
Multiple column configurations (single-key, multi-key, stacked headers)
Rich card customization (templates, selection, styling)
Flexible data binding (local, remote, OData)
Advanced features (localization, persistence, virtual scrolling)
Documentation and Navigation Guide
Getting Started
Installation and package dependencies
Setting up Vite TypeScript project
CSS imports and theme configuration
Basic Kanban initialization
Column setup with keyField mapping
Populating cards with dataSource
First working example
Columns Configuration
Single-key and multi-key column mapping
Column header text and custom templates
Toggle columns (expand/collapse functionality)
Initially collapsed columns
Column drag-and-drop reordering
Stacked headers for grouping columns
Column properties and configuration
Cards Management
Card structure (header and content)
Drag-and-drop behavior within and between columns
Card header and content field mapping
Custom card templates
Card selection (single and multiple)
Showing/hiding card headers
cardSettings configuration
Swimlane Grouping
Rendering swimlane rows for grouping
keyField mapping for categorization
Custom row text with textField
Swimlane row templates
Sorting swimlane rows (ascending/descending)
Drag-and-drop across swimlanes
Empty row rendering
Card count display per swimlane
Frozen rows for always-visible headers
Data Binding
Local data binding with JSON arrays
DataManager integration
Remote data binding with APIs
OData services integration
Web API binding
CRUD operations with remote data
Data adapters and adaptors
Dialog for Add/Edit/Delete
Default built-in dialog
Dialog fields mapping to data source
Custom fields configuration
Field types (String, Numeric, TextArea, DropDown, TextBox)
Dialog templates for custom layouts
Validation in dialog forms
dialogSettings properties
Drag-and-Drop Features
Card drag-and-drop within columns
Card drag-and-drop between columns
Column drag-and-drop reordering
Swimlane drag-and-drop interactions
Enabling/disabling drag-and-drop
Drag-drop events and customization
Customization and Styling
Setting dimensions (height, width)
CSS styling and custom themes
Tooltip configuration
Template customization options
Built-in themes (Material, Bootstrap, Fabric, Tailwind)
Custom theme creation
Advanced Features
Localization for multi-language support
State persistence across sessions
Priority field mapping and visualization
Card validation and WIP limits
Virtual scrolling for large datasets
Sort configuration options
Accessibility
WCAG compliance features
Keyboard navigation support
ARIA attributes for screen readers
Accessible card and column interactions
Responsive Design
Responsive layout behavior
Mobile and tablet device support
Adaptive column rendering
Touch interaction support
API Reference - Properties
Complete list of all Kanban properties
dataSource, keyField, columns configuration
cardSettings, swimlaneSettings, dialogSettings
Drag-and-drop properties (allowDragAndDrop, allowColumnDragAndDrop)
Dimension properties (height, width)
Sorting, stacked headers, constraints
Localization, persistence, virtualization
Property types, defaults, and examples
API Reference - Events
Complete list of all Kanban events
Action events (actionBegin, actionComplete, actionFailure)
Card interaction events (cardClick, cardDoubleClick, cardRendered)
Drag-and-drop events (dragStart, drag, dragStop)
Column drag events (columnDragStart, columnDrag, columnDrop)
Dialog events (dialogOpen, dialogClose)
Data events (dataBinding, dataBound)
Event arguments and use cases
API Reference - Methods
Complete list of all Kanban public methods
Card management (addCard, deleteCard, updateCard, getCardDetails)
Column management (addColumn, deleteColumn, showColumn, hideColumn)
Data query methods (getColumnData, getSwimlaneData, getSelectedCards)
Dialog methods (openDialog, closeDialog)
Utility methods (refresh, destroy, dataBind)
Method signatures, parameters, and return types
Troubleshooting and How-To
Dynamically changing columns
Filtering and searching cards
Header double-click customization
Common issues and solutions
Performance optimization tips
Quick Start Example
import { Kanban } from '@syncfusion/ej2-kanban' ;
const kanbanData = [
{
Id : 1 ,
Status : 'Open' ,
Summary : 'Analyze the new requirements' ,
Priority : 'Low' ,
Assignee : 'Nancy Davloio'
},
{
Id : 2 ,
Status : 'InProgress' ,
Summary : 'Improve application performance' ,
Priority : 'Normal' ,
Assignee : 'Andrew Fuller'
},
{
Id : 3 ,
Status : 'Testing' ,
Summary : 'Fix the issues reported' ,
Priority : 'High' ,
Assignee : 'Janet Leverling'
},
{
Id : 4 ,
Status : 'Close' ,
Summary : 'Validate new requirements' ,
Priority : 'Low' ,
Assignee : 'Nancy Davloio'
}
];
const kanbanObj : Kanban = new Kanban ({
dataSource : kanbanData,
keyField : 'Status' ,
columns : [
{ headerText : 'Backlog' , keyField : 'Open' },
{ headerText : 'In Progress' , keyField : 'InProgress' },
{ headerText : 'Testing' , keyField : 'Testing' },
{ headerText : 'Done' , keyField : 'Close' }
],
cardSettings : {
contentField : 'Summary' ,
headerField : 'Id'
}
});
kanbanObj.appendTo ('#Kanban' );
Common Patterns
Pattern 1: Kanban with Swimlanes const kanbanObj : Kanban = new Kanban ({
dataSource : kanbanData,
keyField : 'Status' ,
columns : [
{ headerText : 'To Do' , keyField : 'Open' },
{ headerText : 'In Progress' , keyField : 'InProgress' },
{ headerText : 'Testing' , keyField : 'Testing' },
{ headerText : 'Done' , keyField : 'Close' }
],
cardSettings : {
contentField : 'Summary' ,
headerField : 'Id'
},
swimlaneSettings : {
keyField : 'Assignee' ,
allowDragAndDrop : true
}
});
kanbanObj.appendTo ('#Kanban' );
Pattern 2: Kanban with Stacked Headers const kanbanObj : Kanban = new Kanban ({
dataSource : kanbanData,
keyField : 'Status' ,
columns : [
{ headerText : 'Backlog' , keyField : 'Open' },
{ headerText : 'In Progress' , keyField : 'InProgress' },
{ headerText : 'Review' , keyField : 'Review' },
{ headerText : 'Done' , keyField : 'Close' }
],
stackedHeaders : [
{ text : 'To Do' , keyFields : 'Open' },
{ text : 'Development Phase' , keyFields : 'InProgress, Review' },
{ text : 'Completed' , keyFields : 'Close' }
],
cardSettings : {
contentField : 'Summary' ,
headerField : 'Id'
}
});
kanbanObj.appendTo ('#Kanban' );
Pattern 3: Remote Data Binding with OData import { Kanban } from '@syncfusion/ej2-kanban' ;
import { DataManager , ODataAdaptor } from '@syncfusion/ej2-data' ;
const dataManager = new DataManager ({
url : 'https://services.syncfusion.com/js/production/api/Kanban' ,
adaptor : new ODataAdaptor
});
const kanbanObj : Kanban = new Kanban ({
dataSource : dataManager,
keyField : 'Status' ,
columns : [
{ headerText : 'Backlog' , keyField : 'Open' },
{ headerText : 'In Progress' , keyField : 'InProgress' },
{ headerText : 'Testing' , keyField : 'Testing' },
{ headerText : 'Done' , keyField : 'Close' }
],
cardSettings : {
contentField : 'Summary' ,
headerField : 'Id'
}
});
kanbanObj.appendTo ('#Kanban' );
Pattern 4: Custom Card Template const kanbanObj : Kanban = new Kanban ({
dataSource : kanbanData,
keyField : 'Status' ,
columns : [
{ headerText : 'To Do' , keyField : 'Open' },
{ headerText : 'In Progress' , keyField : 'InProgress' },
{ headerText : 'Done' , keyField : 'Close' }
],
cardSettings : {
contentField : 'Summary' ,
headerField : 'Id' ,
template : '#cardTemplate'
}
});
kanbanObj.appendTo ('#Kanban' );
Key Configuration Options
Essential Properties
dataSource : Array or DataManager - Card data sourcekeyField : string - Field name that maps to column keyField valuescolumns : Array - Column definitions with headerText and keyFieldcardSettings : Object - Card display configuration
headerField: string - Unique identifier field (mandatory)contentField: string - Main content display fieldtemplate: string - Custom card template
swimlaneSettings : Object - Swimlane configuration
keyField: string - Field for grouping cardstextField: string - Display text for swimlane headersallowDragAndDrop: boolean - Enable cross-swimlane dragging
Common Options
allowDragAndDrop : boolean - Enable card drag-and-drop (default: true)allowKeyboard : boolean - Enable keyboard interactionsheight : string/number - Board heightwidth : string/number - Board widthdialogSettings : Object - Dialog customizationsortSettings : Object - Card sorting configurationstackedHeaders : Array - Grouped column headers
Common Use Cases
Software Development Sprint Board
Columns: Backlog → In Progress → Code Review → Testing → Done
Swimlanes: By assignee or by feature
WIP limits per column
Customer Support Ticket Tracking
Columns: New → Assigned → In Progress → Waiting → Resolved
Swimlanes: By priority or support tier
Custom card templates with ticket details
Content Publishing Workflow
Columns: Ideas → Draft → Review → Approved → Published
Swimlanes: By author or content type
Dialogs for adding metadata
Manufacturing Process Flow
Columns: Order Received → In Production → Quality Check → Shipped
Swimlanes: By product line
Remote data binding to production system
Recruitment Pipeline
Columns: Applied → Phone Screen → Interview → Offer → Hired
Swimlanes: By position or recruiter
Card templates with candidate information
Related Skills
Next Steps: Read the getting-started reference to set up your first Kanban board, then explore specific features based on your requirements.
