Blazor Kanban Documentation Overview

Introduction to Syncfusion Blazor Kanban

The Blazor Kanban is a powerful and feature-rich UI component designed for visualizing and managing work flows with high performance and flexibility. It provides powerful features including multi key column mapping, swimlane rows, drag and drop card transfers, work-in-progress (WIP) validation, and built-in card editing dialogs. Built for scalability, it enables developers to create responsive task boards for agile project management, issue tracking, and pipeline visualization with ease.

Common use cases

The Blazor Kanban is ideal for a wide range of business scenarios:

Use Case Description Key Features
Agile Project Management Visualize sprint backlogs and track progress through stages Columns, Swimlane, WIP Validation
Issue & Bug Tracking Track defects from reporting to resolution Drag and Drop, Card Editing
Recruitment Pipelines Move candidates through interview stages Swimlane, Workflow
Sales & CRM Funnels Track leads from contact to closing Columns, WIP Validation
Content Production Manage articles and media from idea to published Cards, Card Editing
IT Operations Handle tickets and requests through resolution queues Workflow, Sorting

Data connectivity

The Blazor Kanban enables multiple data binding approaches, offering flexibility in choosing the right strategy for different application architectures. The Kanban can work with in-memory collections, connect to remote services, or bind complex nested data structures.

Data Binding Approaches

  • Binding local data - Bind the Kanban to local collections for fast data access without external dependencies. Ideal for small to medium datasets and rapid prototyping.
  • Binding Remote Data - Connect to web services, REST APIs, and remote endpoints for scalable applications.
  • Complex data binding - Bind nested object structures with mapped fields.

Column Mapping

Feature Purpose Key Benefit
Single-key mapping Map one data field value to a column Simple status workflows
Multi-key mapping Map multiple field values to a single column Consolidated categories
Header template Render custom column headers with Blazor templates Branded column headers
Toggle columns Collapse and expand columns on demand Focused viewing

Cards

The card is the core unit of work in the Kanban board. The following features control how cards are built and displayed:

Feature Purpose Key Benefit
Header Show a heading with card identifiers Quick card identification
Content Display the primary card text Clear task descriptions
Tags Show categorical labels on cards Visual classification
Customizing left border color Color code cards by field values Status at a glance
Rendering custom footer elements Add custom markup to card footers Additional card actions
Customizing card layout with templates Replace the card layout with Blazor templates Fully custom card visuals

Workflow & interaction

The Blazor Kanban provides comprehensive interaction capabilities for moving work across the board:

Feature Purpose Key Benefit
Drag and Drop Move cards between columns and swimlanes Core kanban interaction
Internal drag and drop Reorder cards within their own column Flexible in column sorting
Prevent transition across columns Restrict which columns accept a card Enforced process rules
Prevent Drop actions Cancel drops conditionally Custom validation logic
Using the SortBy Property Sort cards by index or field values Ordered presentation
Sorting Order swimlane rows by drag or text Prioritized lanes

Swimlane

The swimlane feature groups cards into horizontal rows for parallel categories of work:

Feature Purpose Key Benefit
Render swimlane row Group the board by a data field Per-category tracking
Custom row text Customize the swimlane header text Meaningful lane names
Template Fully customize swimlane headers Branded lane headers

Card editing & dialogs

The Blazor Kanban provides built-in editing so users can create and update cards without leaving the board:

Feature Purpose Key Benefit
Editing Cards Using the Default Dialog Add, edit, and delete cards with the built-in dialog Out-of-the-box CRUD
Customizing Dialog Fields Choose which fields appear in the edit dialog Tailored forms
Creating a Custom Dialog Template Replace the dialog with a custom form Complete form control
Preventing the Dialog from Opening Cancel dialog opening conditionally Guarded workflows
Persisting data in server Save dialog changes to remote endpoints Enterprise data storage

Validation & limits

WIP (work-in-progress) validation prevents columns from exceeding their capacity:

Feature Purpose Key Benefit
Minimum card limit Enforce a lower bound on column cards Complete state enforcement
Maximum card limit Cap the cards allowed per column Capacity enforcement

Layout & appearance

The Blazor Kanban offers extensive layout and styling options for creating professional boards tailored to any workflow:

Feature Purpose Key Benefit
Tooltip Show card details on hover On-demand information
Available layouts Adapt the board for narrow and wide screens Optimal display across devices
Auto height and width Size the board to its container Fluid layout integration
Fixed dimensions using pixel values Set exact board dimensions Predictable layout
Customizing the fixed position of the Kanban header Keep headers visible while scrolling Persistent context
Customizing the Kanban with CSS Theme and style the entire board Complete visual control

Globalization & accessibility

The Blazor Kanban is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards:

  • Localization - Translate the UI into different languages
  • Enabling Right-to-Left (RTL) Layout - RTL rendering for RTL languages
  • WAI-ARIA attributes - Accessible roles and attributes for the board UI
  • Keyboard interaction - Complete board operation via keyboard
    • Arrow Keys - Move the card selection and between columns
    • Enter - Open the selected card
    • Delete - Remove the selected cards
    • Ctrl+Enter / Ctrl+Space - Select multiple cards
    • Shift+Up / Shift+Down - Select multiple cards up or down
    • Tab / Shift+Tab - Navigate and reverse navigate the columns
    • Home / End - Jump to the first or last card
  • Ensuring accessibility - axe-core validation guidance

Advanced features

The Blazor Kanban includes sophisticated capabilities designed for complex enterprise scenarios:

Feature Purpose Use Case Key Benefit
Events Handle load, card click, drag, and dialog events Custom workflows and integrations Deep integration points
Responsive Mode Scroll and select behaviors in responsive layouts Mobile board interaction Touch friendly experience

System requirements

The Blazor Kanban works with:

  • Blazor Version: .NET 8.0 or higher
  • Hosting Models: Blazor Server, Blazor WebAssembly, Blazor Web App
  • Browsers: Chrome, Firefox, Safari, Edge (latest versions)
  • Mobile: iOS Safari, Android Chrome

Getting Started:

Popular Features:

Support & Resources