Skip to main content Home Creators syncfusion aspnetcore-ui-components-skills syncfusion-aspnetcore-kanban
syncfusion-aspnetcore-kanban Guide for implementing the Syncfusion ASP.NET Core Kanban component using Tag Helper syntax. Use this skill when building task boards, configuring columns and swimlanes, or enabling drag-and-drop. Covers card settings, dialogs, and binding remote data for ASP.NET Core MVC and Razor Pages.
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/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-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-aspnetcore-grid Implements Syncfusion ASP.NET Core 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 or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
syncfusion-aspnetcore-pivot-table Use this skill when users ask how to build Syncfusion PivotView/pivot tables in ASP.NET Core apps. Trigger for server integration, data binding (API/DB/remote), OLAP, aggregation, drill-down, grouping, filtering, conditional formatting, exporting (Excel/PDF/CSV), or pivot charts in ASP.NET Core. Not for MVC/Blazor/JS.
syncfusion-aspnetcore-ai-assistview Implement the Syncfusion ASP.NET Core AI AssistView control for interactive AI-powered assistance interfaces. Use this skill when implementing AI assistants, prompt suggestions, custom views, file attachments, markdown responses, customizable templates, regenerable responses, thinking capabilities (chain-of-thoughts), generative UI blocks, Text-to-Speech conversion, Speech-to-Text voice input, or customizing advanced AI conversation UI in ASP.NET Core applications.
Related occupations SOC
Based on SOC occupation classification
name syncfusion-aspnetcore-kanban description Guide for implementing the Syncfusion ASP.NET Core Kanban component using Tag Helper syntax. Use this skill when building task boards, configuring columns and swimlanes, or enabling drag-and-drop. Covers card settings, dialogs, and binding remote data for ASP.NET Core MVC and Razor Pages. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Data Visualization"}
Implementing Syncfusion ASP.NET Core Kanban
Table of Contents
Quick Start
public IActionResult Index ()new KanbanDataModels().KanbanTasks();
return View();
}
<ejs-kanban id ="Kanban" keyField ="Status" dataSource ="@ViewBag.data" >
<e-kanban-columns >
<e-kanban-column headerText ="To Do" keyField ="Open" > </e-kanban-column >
<e-kanban-column headerText ="In Progress" keyField ="InProgress" > </e-kanban-column >
<e-kanban-column headerText ="Testing" keyField ="Testing" > </e-kanban-column >
<e-kanban-column headerText ="Done" keyField ="Close" > </e-kanban-column >
</e-kanban-columns >
<e-kanban-cardsettings headerField ="Title" contentField ="Summary" > </e-kanban-cardsettings >
</ejs-kanban >
NuGet: Install-Package Syncfusion.EJ2.AspNet.Core
_ViewImports.cshtml: @addTagHelper *, Syncfusion.EJ2_Layout.cshtml: Fluent CSS + ej2.min.js CDN links + <ejs-scripts></ejs-scripts>
When to Use This Skill Use this skill when you need to:
Build a Kanban board — multi-column workflow visualizationConfigure columns — single/multi-key columns, stacked headers, toggle, dragAdd swimlanes — group cards by team, user, or category with frozen rowsEnable drag-and-drop — between columns, swimlanes, or external componentsImplement card dialogs — edit dialog with custom fields, templates, CRUD persistenceBind remote data — OData, WebAPI, UrlAdaptor with CRUD operationsApply sorting — by index, data source order, or custom fieldSet card priorities — exact-position drop ordering via numeric rank fieldAdd column constraints — min/max card count validation per columnShow tooltips — default or template-based hover tooltipsEnable virtual scrolling — handle large datasets (100k+ cards) efficientlyConfigure accessibility — WCAG 2.2 AA, keyboard navigation, screen reader supportLocalize or RTL — multi-language support and right-to-left layoutFilter or search cards — using the query propertyChange columns dynamically — update column configuration at runtimeHandle events — react to card clicks, drags, dialog open/close, data binding, and moreCall methods programmatically — add/update/delete cards, open dialogs, show/hide columns, refresh the boardReference all properties — full list of component and sub-model properties with types and defaults
Documentation and Navigation Guide
Setup and First Board
NuGet installation and package setup
Tag Helper registration in _ViewImports.cshtml
CDN configuration (CSS + JS) in _Layout.cshtml
Minimal Kanban board with 4 columns
Basic swimlane quickstart
License key registration
Data Binding
Local data binding via @ViewBag.data
Remote data: OData, ODataV4, WebAPI, UrlAdaptor
<e-data-manager> configurationCRUD operations with insertUrl, updateUrl, removeUrl, crudUrl
Custom adaptor pattern
actionFailure event handlingAjax loading indicator behavior
Cards
headerField (mandatory unique card ID)showHeader — show/hide card headercontentField — card body text fieldCard template with jsrender syntax
selectionType — None, Single, MultipleCard color customization via colorField
Columns
Single-key and multi-key keyField mapping
headerText — column display nameColumn header template
allowToggle — collapsible columnsisExpanded — initial expand/collapse stateStacked headers (<e-kanban-stackedheaders>)
Column-level drag (allowColumnDragAndDrop)
showItemCount — display card count in header
Swimlanes
keyField — data field to group bytextField — display label fieldSwimlane header template
sortBy — sort swimlane rowsallowDragAndDrop — enable cross-swimlane card dragshowEmptyRow — display empty swimlane rowsshowItemCount — card count per swimlaneenableFrozenRows — sticky swimlane headers on scroll
Drag and Drop
Internal column drag (default enabled)
allowDragAndDrop="false" — disable all dragPer-column allowDrag/allowDrop flags
transitionColumns — restrict allowed column transitionsCross-swimlane drag via swimlaneSettings.allowDragAndDrop
External drag: externalDropId property
Kanban-to-Kanban drag (dragStop event + deleteCard/addCard)
Kanban-to-Treeview and Kanban-to-Schedule integration
Card Edit Dialog
Default dialog (double-click card)
Custom dialog fields via <e-kanban-dialogsettings fields="...">
Field types: String, Numeric, TextArea, DropDown, TextBox, Input
Custom dialog template with EJ2 component initialization
Preventing dialog open with dialogOpen event + args.cancel = true
Programmatic add: kanbanObj.openDialog('Add', data)
CRUD persistence via UrlAdaptor with server-side EditParams class
Sorting, Priority, and Validation
<e-kanban-sortsettings> with sortBy, field, directionsortBy values: Index, DataSourceOrder, CustomPriority field: <e-kanban-cardsettings priority="RankId"> for exact-position drops
Column min/max card count: minCount, maxCount on <e-kanban-column>
Constraint type: Column (default) or Swimlane
Visual color indication on constraint violation
Tooltip, Style, and Dimensions
enableTooltip="true" — hover tooltip on cardstooltipTemplate — custom HTML tooltip templateCSS class reference for all Kanban elements
Sticky header pattern
width and height — auto, pixel, percentage values
Persistence, Localization, and Responsive
enablePersistence="true" — localStorage state savinglocale property + ej.base.L10n.load() scriptAll locale key names for Kanban strings
enableRtl="true" — right-to-left layoutMobile responsive behavior (swipe, tap-hold, swimlane menu)
Virtual Scrolling and Accessibility
enableVirtualization="true" — on-demand card renderingcardHeight — fixed height required for virtualizationServer-side KanbanVirtualization parameter handling
WCAG 2.2 AA compliance table
WAI-ARIA attributes (aria-label, aria-expanded, aria-selected, etc.)
Keyboard shortcuts reference
AllowKeyboard="false" — disable keyboard interaction
Events
ActionBegin / ActionComplete / ActionFailure — lifecycle and error handlingCardClick / CardDoubleClick / CardRendered — card interaction hooksColumnDrag / ColumnDragStart / ColumnDrop — column reorder eventsCreated / DataBinding / DataBound / DataSourceChanged — initialization and data eventsDialogOpen / DialogClose — intercept or cancel dialog (use args.cancel = true)Drag / DragStart / DragStop — card drag lifecycle (cross-Kanban scenarios use DragStop)QueryCellInfo — customize column cell elements before render
Methods
AddCard / UpdateCard / DeleteCard — CRUD card operationsAddColumn / DeleteColumn — dynamic column managementOpenDialog / CloseDialog — programmatic dialog controlShowColumn / HideColumn — toggle column visibilityGetCardDetails / GetColumnData / GetSelectedCards / GetSwimlaneData — data retrievalShowSpinner / HideSpinner — loading indicator controlRefresh / RefreshHeader / RefreshUI — board re-render helpersDataBind / Destroy / AppendTo / Inject — component lifecycle utilities
All Properties Reference
Complete list of all <ejs-kanban> root properties with types, defaults, and examples
Sub-model properties: CardSettings, Columns, SwimlaneSettings, SortSettings, DialogSettings, StackedHeaders
Enum values: ConstraintType, SelectionType, SortOrderBy, SortDirection
How-To Recipes
Dynamically change columns at runtime
Filter cards using the query property with dropdown
Search cards by field values with text input
Add header double-click event handler
Common Patterns
Swimlane Board with Remote Data
Use when: You need to group cards by user/team and load data from an API endpoint (OData, WebAPI, etc.) instead of a local collection.
<ejs-kanban id ="Kanban" keyField ="Status" >
<e-data-manager url ="/api/tasks" adaptor ="ODataV4Adaptor" > </e-data-manager >
<e-kanban-columns >
<e-kanban-column headerText ="To Do" keyField ="Open" > </e-kanban-column >
<e-kanban-column headerText ="In Progress" keyField ="InProgress" > </e-kanban-column >
<e-kanban-column headerText ="Done" keyField ="Close" > </e-kanban-column >
</e-kanban-columns >
<e-kanban-cardsettings headerField ="Title" contentField ="Summary" > </e-kanban-cardsettings >
<e-kanban-swimlanesettings keyField ="Assignee" textField ="Assignee" > </e-kanban-swimlanesettings >
</ejs-kanban >
Board with Column Constraints
Use when: You need to enforce WIP (Work-In-Progress) limits — preventing too few or too many cards from stacking in a column.
<ejs-kanban id ="Kanban" keyField ="Status" dataSource ="@ViewBag.data" >
<e-kanban-columns >
<e-kanban-column headerText ="To Do" keyField ="Open" > </e-kanban-column >
<e-kanban-column headerText ="In Progress" keyField ="InProgress"
minCount ="3" maxCount ="5" showItemCount ="true" > </e-kanban-column >
<e-kanban-column headerText ="Done" keyField ="Close" > </e-kanban-column >
</e-kanban-columns >
<e-kanban-cardsettings headerField ="Title" contentField ="Summary" > </e-kanban-cardsettings >
</ejs-kanban >
Board with Card Edit Dialog + CRUD
Use when: Users need to create, edit, or delete cards through a dialog form, with changes persisted to the server via UrlAdaptor.
<ejs-kanban id ="Kanban" keyField ="Status" >
<e-data-manager url ="/Home/UpdateData" adaptor ="UrlAdaptor"
crudUrl ="/Home/UpdateData" > </e-data-manager >
<e-kanban-columns >
<e-kanban-column headerText ="To Do" keyField ="Open" > </e-kanban-column >
<e-kanban-column headerText ="Done" keyField ="Close" > </e-kanban-column >
</e-kanban-columns >
<e-kanban-cardsettings headerField ="Title" contentField ="Summary" > </e-kanban-cardsettings >
<e-kanban-dialogsettings fields ="@ViewBag.dialogFields" > </e-kanban-dialogsettings >
</ejs-kanban >
Virtual Scrolling Board
Use when: The dataset is large (hundreds to thousands of cards) and rendering all cards at once would cause performance issues.
<ejs-kanban id ="Kanban" keyField ="Status" dataSource ="@ViewBag.data"
enableVirtualization ="true" >
<e-kanban-columns >
<e-kanban-column headerText ="To Do" keyField ="Open" > </e-kanban-column >
<e-kanban-column headerText ="In Progress" keyField ="InProgress" > </e-kanban-column >
<e-kanban-column headerText ="Done" keyField ="Close" > </e-kanban-column >
</e-kanban-columns >
<e-kanban-cardsettings headerField ="Title" contentField ="Summary"
selectionType ="Multiple" > </e-kanban-cardsettings >
</ejs-kanban >
Key Properties Reference Property Tag Values Purpose keyField<ejs-kanban>Field name string Maps cards to columns by status value dataSource<ejs-kanban>@ViewBag.dataLocal data collection enableVirtualization<ejs-kanban>true/false Virtual scrolling for large data enableTooltip<ejs-kanban>true/false Hover tooltip on cards tooltipTemplate<ejs-kanban>Template ID string Custom tooltip HTML template allowDragAndDrop<ejs-kanban>true/false Global drag-and-drop toggle externalDropId<ejs-kanban>Element ID array Target IDs for external drop enablePersistence<ejs-kanban>true/false Save state to localStorage locale<ejs-kanban>Locale string (e.g. "de") UI string localization enableRtl<ejs-kanban>true/false Right-to-left layout width<ejs-kanban>auto/px/% Board width height<ejs-kanban>auto/px/% Board height AllowKeyboard<ejs-kanban>true/false Keyboard navigation toggle headerField<e-kanban-cardsettings>Field name string Unique card ID field (mandatory) contentField<e-kanban-cardsettings>Field name string Card body text field template<e-kanban-cardsettings>Template ID string Custom card HTML template selectionType<e-kanban-cardsettings>None/Single/Multiple Card selection mode priority<e-kanban-cardsettings>Field name string Numeric rank field for ordering showHeader<e-kanban-cardsettings>true/false Show/hide card header keyField<e-kanban-column>Status value(s) Column card filter (single or comma-separated) headerText<e-kanban-column>Display string Column title allowToggle<e-kanban-column>true/false Collapsible column isExpanded<e-kanban-column>true/false Initial expand state minCount<e-kanban-column>Integer Minimum cards constraint maxCount<e-kanban-column>Integer Maximum cards constraint showItemCount<e-kanban-column>true/false Show card count badge allowDrag<e-kanban-column>true/false Allow cards to be dragged from column allowDrop<e-kanban-column>true/false Allow cards to be dropped into column keyField<e-kanban-swimlanesettings>Field name string Swimlane grouping field textField<e-kanban-swimlanesettings>Field name string Swimlane display label field sortBy<e-kanban-sortsettings>Index/DataSourceOrder/Custom Card sort strategy field<e-kanban-sortsettings>Field name string Field to sort by direction<e-kanban-sortsettings>Ascending/Descending Sort direction
Data Model The standard KanbanDataModels class for all examples:
public class KanbanDataModels
{
public string Id { get ; set ; }
public string Title { get ; set ; }
public string Status { get ; set ; }
public string Summary { get ; set ; }
public string Type { get ; set ; }
public string Priority { get ; set ; }
public string Tags { get ; set ; }
public double Estimate { get ; set ; }
public string Assignee { get ; set ; }
public int RankId { get ; set ; }
public string Color { get ; set ; }
}
