syncfusion-aspnetcore-kanban

Implementing Syncfusion ASP.NET Core Kanban

Table of Contents

• Quick Start
• When to Use This Skill
• Documentation and Navigation Guide
  • Setup and First Board
  • Data Binding
  • Cards
  • Columns
  • Swimlanes
  • Drag and Drop
  • Card Edit Dialog
  • Sorting, Priority, and Validation
  • Tooltip, Style, and Dimensions
  • Persistence, Localization, and Responsive
  • Virtual Scrolling and Accessibility
  • Events
  • Methods
  • All Properties Reference
  • How-To Recipes
• Common Patterns
• Key Properties Reference
• Data Model

Quick Start

// HomeController.cs
public IActionResult Index()
{
    ViewBag.data = new KanbanDataModels().KanbanTasks();
    return View();
}

<!-- Index.cshtml -->
<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>

Prerequisites:

• 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>

→ For full setup details, see references/getting-started.md

When to Use This Skill

Use this skill when you need to:

• Build a Kanban board — multi-column workflow visualization
• Configure columns — single/multi-key columns, stacked headers, toggle, drag
• Add swimlanes — group cards by team, user, or category with frozen rows
• Enable drag-and-drop — between columns, swimlanes, or external components
• Implement card dialogs — edit dialog with custom fields, templates, CRUD persistence
• Bind remote data — OData, WebAPI, UrlAdaptor with CRUD operations
• Apply sorting — by index, data source order, or custom field
• Set card priorities — exact-position drop ordering via numeric rank field
• Add column constraints — min/max card count validation per column
• Show tooltips — default or template-based hover tooltips
• Enable virtual scrolling — handle large datasets (100k+ cards) efficiently
• Configure accessibility — WCAG 2.2 AA, keyboard navigation, screen reader support
• Localize or RTL — multi-language support and right-to-left layout
• Filter or search cards — using the query property
• Change columns dynamically — update column configuration at runtime
• Handle events — react to card clicks, drags, dialog open/close, data binding, and more
• Call methods programmatically — add/update/delete cards, open dialogs, show/hide columns, refresh the board
• Reference all properties — full list of component and sub-model properties with types and defaults

Documentation and Navigation Guide

Setup and First Board

📄 Read: references/getting-started.md

• 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

📄 Read: references/data-binding.md

• Local data binding via @ViewBag.data
• Remote data: OData, ODataV4, WebAPI, UrlAdaptor
• <e-data-manager> configuration
• CRUD operations with insertUrl, updateUrl, removeUrl, crudUrl
• Custom adaptor pattern
• actionFailure event handling
• Ajax loading indicator behavior

Cards

📄 Read: references/cards.md

• headerField (mandatory unique card ID)
• showHeader — show/hide card header
• contentField — card body text field
• Card template with jsrender syntax
• selectionType — None, Single, Multiple
• Card color customization via colorField

Columns

📄 Read: references/columns.md

• Single-key and multi-key keyField mapping
• headerText — column display name
• Column header template
• allowToggle — collapsible columns
• isExpanded — initial expand/collapse state
• Stacked headers (<e-kanban-stackedheaders>)
• Column-level drag (allowColumnDragAndDrop)
• showItemCount — display card count in header

Swimlanes

📄 Read: references/swimlane.md

• keyField — data field to group by
• textField — display label field
• Swimlane header template
• sortBy — sort swimlane rows
• allowDragAndDrop — enable cross-swimlane card drag
• showEmptyRow — display empty swimlane rows
• showItemCount — card count per swimlane
• enableFrozenRows — sticky swimlane headers on scroll

Drag and Drop

📄 Read: references/drag-and-drop.md

• Internal column drag (default enabled)
• allowDragAndDrop="false" — disable all drag
• Per-column allowDrag/allowDrop flags
• transitionColumns — restrict allowed column transitions
• Cross-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

📄 Read: references/dialog.md

• 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

📄 Read: references/sorting-priority-validation.md

• <e-kanban-sortsettings> with sortBy, field, direction
• sortBy values: Index, DataSourceOrder, Custom
• Priority 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

📄 Read: references/tooltip-style-dimensions.md

• enableTooltip="true" — hover tooltip on cards
• tooltipTemplate — custom HTML tooltip template
• CSS class reference for all Kanban elements
• Sticky header pattern
• width and height — auto, pixel, percentage values

Persistence, Localization, and Responsive

📄 Read: references/persistence-localization-responsive.md

• enablePersistence="true" — localStorage state saving
• locale property + ej.base.L10n.load() script
• All locale key names for Kanban strings
• enableRtl="true" — right-to-left layout
• Mobile responsive behavior (swipe, tap-hold, swimlane menu)

Virtual Scrolling and Accessibility

📄 Read: references/virtual-scrolling-accessibility.md

• enableVirtualization="true" — on-demand card rendering
• cardHeight — fixed height required for virtualization
• Server-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

📄 Read: references/events.md

• ActionBegin / ActionComplete / ActionFailure — lifecycle and error handling
• CardClick / CardDoubleClick / CardRendered — card interaction hooks
• ColumnDrag / ColumnDragStart / ColumnDrop — column reorder events
• Created / DataBinding / DataBound / DataSourceChanged — initialization and data events
• DialogOpen / 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

📄 Read: references/methods.md

• AddCard / UpdateCard / DeleteCard — CRUD card operations
• AddColumn / DeleteColumn — dynamic column management
• OpenDialog / CloseDialog — programmatic dialog control
• ShowColumn / HideColumn — toggle column visibility
• GetCardDetails / GetColumnData / GetSelectedCards / GetSwimlaneData — data retrieval
• ShowSpinner / HideSpinner — loading indicator control
• Refresh / RefreshHeader / RefreshUI — board re-render helpers
• DataBind / Destroy / AppendTo / Inject — component lifecycle utilities

All Properties Reference

📄 Read: references/properties.md

• 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

📄 Read: references/how-to.md

• 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.data	Local 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; }      // Maps to keyField
    public string Summary { get; set; }     // Card body content
    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; }    // Used for swimlane grouping
    public int RankId { get; set; }         // Numeric rank for priority ordering
    public string Color { get; set; }       // Optional card color field
}