syncfusion-aspnetcore-kanban

Syncfusion ASP.NET Core Kanban の実装

目次

• クイックスタート
• このスキルを使用する場面
• ドキュメントとナビゲーションガイド
  • セットアップと最初のボード
  • データバインディング
  • カード
  • 列
  • スイムレーン
  • ドラッグ＆ドロップ
  • カード編集ダイアログ
  • 並べ替え、優先度、検証
  • ツールチップ、スタイル、寸法
  • 永続化、ローカライズ、レスポンシブ対応
  • 仮想スクロールとアクセシビリティ
  • イベント
  • メソッド
  • すべてのプロパティのリファレンス
  • 実装レシピ
• 一般的なパターン
• 主要プロパティのリファレンス
• データモデル

クイックスタート

// HomeController.cs
public IActionResult Index()
{
    ViewBag.data = 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 リンク、および <ejs-scripts></ejs-scripts>

→ セットアップの詳細については、references/getting-started.md を参照してください。

このスキルを使用する場面

次のような場合にこのスキルを使用します。

• Kanban ボードを構築する — 複数列のワークフローを可視化します
• 列を設定する — 単一キー／複数キーの列、積み重ねヘッダー、切り替え、ドラッグを設定します
• スイムレーンを追加する — 固定行を使用して、チーム、ユーザー、カテゴリごとにカードをグループ化します
• ドラッグ＆ドロップを有効にする — 列間、スイムレーン間、または外部コンポーネントとの間でカードを移動します
• カードダイアログを実装する — カスタムフィールド、テンプレート、CRUD の永続化に対応した編集ダイアログを実装します
• リモートデータをバインドする — CRUD 操作を含む OData、WebAPI、UrlAdaptor を使用します
• 並べ替えを適用する — インデックス、データソースの順序、またはカスタムフィールドで並べ替えます
• カードの優先度を設定する — 数値ランクフィールドを使用して、正確な位置にドロップしたときの順序を設定します
• 列の制約を追加する — 列ごとにカード数の最小値／最大値を検証します
• ツールチップを表示する — デフォルトまたはテンプレートベースのホバーツールチップを表示します
• 仮想スクロールを有効にする — 大規模なデータセット（カード 10 万件以上）を効率的に処理します
• アクセシビリティを設定する — WCAG 2.2 AA、キーボードナビゲーション、スクリーンリーダーのサポートを設定します
• ローカライズまたは RTL を設定する — 多言語サポートと右から左へのレイアウトに対応します
• カードをフィルタリングまたは検索する — query プロパティを使用します
• 列を動的に変更する — 実行時に列の設定を更新します
• イベントを処理する — カードのクリック、ドラッグ、ダイアログの開閉、データバインドなどに応じて処理します
• メソッドをプログラムから呼び出す — カードの追加／更新／削除、ダイアログの表示、列の表示／非表示、ボードの更新を行います
• すべてのプロパティを参照する — コンポーネントとサブモデルのプロパティ、型、デフォルト値をすべて確認します

ドキュメントとナビゲーションガイド

セットアップと最初のボード

📄 参照： references/getting-started.md

• NuGet のインストールとパッケージのセットアップ
• _ViewImports.cshtml での Tag Helper の登録
• _Layout.cshtml での CDN 設定（CSS + JS）
• 4 列の最小構成の Kanban ボード
• スイムレーンの基本的なクイックスタート
• ライセンスキーの登録

データバインディング

📄 参照： references/data-binding.md

• @ViewBag.data を使用したローカルデータバインディング
• リモートデータ：OData、ODataV4、WebAPI、UrlAdaptor
• <e-data-manager> の設定
• insertUrl、updateUrl、removeUrl、crudUrl を使用した CRUD 操作
• カスタムアダプターパターン
• actionFailure イベントの処理
• Ajax 読み込みインジケーターの動作

カード

📄 参照： references/cards.md

• headerField（必須の一意なカード ID）
• showHeader — カードヘッダーの表示／非表示
• contentField — カード本文のテキストフィールド
• jsrender 構文を使用したカードテンプレート
• selectionType — None、Single、Multiple
• colorField を使用したカードの色のカスタマイズ

列

📄 参照: references/columns.md

• 単一キーおよび複数キーの keyField マッピング
• headerText — 列の表示名
• 列ヘッダーのテンプレート
• allowToggle — 折りたたみ可能な列
• isExpanded — 初期の展開／折りたたみ状態
• スタックヘッダー（<e-kanban-stackedheaders>）
• 列単位のドラッグ（allowColumnDragAndDrop）
• showItemCount — ヘッダーにカード数を表示

スイムレーン

📄 参照: references/swimlane.md

• keyField — グループ化に使うデータフィールド
• textField — 表示ラベルのフィールド
• スイムレーンヘッダーのテンプレート
• sortBy — スイムレーンの行を並べ替え
• allowDragAndDrop — スイムレーン間のカードドラッグを有効化
• showEmptyRow — 空のスイムレーン行を表示
• showItemCount — スイムレーンごとのカード数
• enableFrozenRows — スクロール時にスイムレーンヘッダーを固定

ドラッグ＆ドロップ

📄 参照: references/drag-and-drop.md

• 列内のドラッグ（デフォルトで有効）
• allowDragAndDrop="false" — すべてのドラッグを無効化
• 列ごとの allowDrag／allowDrop フラグ
• transitionColumns — 許可する列間の移動を制限
• swimlaneSettings.allowDragAndDrop によるスイムレーン間のドラッグ
• 外部からのドラッグ：externalDropId プロパティ
• Kanban 間のドラッグ（dragStop イベントと deleteCard／addCard）
• Kanban と Treeview、Schedule の連携

カード編集ダイアログ

📄 参照: references/dialog.md

• デフォルトのダイアログ（カードをダブルクリック）
• <e-kanban-dialogsettings fields="..."> によるカスタムダイアログフィールド
• フィールド型：String、Numeric、TextArea、DropDown、TextBox、Input
• EJ2 コンポーネントの初期化を伴うカスタムダイアログテンプレート
• dialogOpen イベントと args.cancel = true によるダイアログ表示の防止
• プログラムによる追加：kanbanObj.openDialog('Add', data)
• サーバー側の EditParams クラスを使用した UrlAdaptor による CRUD の永続化

並べ替え、優先度、検証

📄 参照: references/sorting-priority-validation.md

• sortBy、field、direction を指定する <e-kanban-sortsettings>
• sortBy の値：Index、DataSourceOrder、Custom
• 優先度フィールド：指定位置へのドロップには <e-kanban-cardsettings priority="RankId"> を使用
• 列のカード数の最小値／最大値：<e-kanban-column> の minCount、maxCount
• 制約の種類：Column（デフォルト）または Swimlane
• 制約違反時の視覚的な色表示

ツールチップ、スタイル、寸法

📄 参照: references/tooltip-style-dimensions.md

• enableTooltip="true" — カードにホバーしたときのツールチップ
• tooltipTemplate — カスタム HTML ツールチップテンプレート
• すべての Kanban 要素の CSS クラス一覧
• ヘッダー固定のパターン
• width と height — auto、ピクセル、パーセント値

永続化、ローカライズ、レスポンシブ対応

📄 参照: references/persistence-localization-responsive.md

• enablePersistence="true" — localStorage への状態保存
• locale プロパティと ej.base.L10n.load() スクリプト
• Kanban の文字列に使用するすべてのロケールキー名
• enableRtl="true" — 右から左へのレイアウト
• モバイルでのレスポンシブ動作（スワイプ、タップ＆ホールド、スイムレーンメニュー）

仮想スクロールとアクセシビリティ

📄 参照: references/virtual-scrolling-accessibility.md

• enableVirtualization="true" — 必要に応じたカードの描画
• cardHeight — 仮想化には固定の高さが必要
• サーバー側での KanbanVirtualization パラメーター処理
• WCAG 2.2 AA 準拠表
• WAI-ARIA 属性（aria-label、aria-expanded、aria-selected など）
• キーボードショートカット一覧
• AllowKeyboard="false" — キーボード操作を無効化

イベント

📄 参照: references/events.md

• ActionBegin / ActionComplete / ActionFailure — ライフサイクルとエラー処理
• CardClick / CardDoubleClick / CardRendered — カード操作フック
• ColumnDrag / ColumnDragStart / ColumnDrop — 列の並べ替えイベント
• Created / DataBinding / DataBound / DataSourceChanged — 初期化およびデータイベント
• DialogOpen / DialogClose — ダイアログをインターセプトまたはキャンセルします（args.cancel = true を使用）
• Drag / DragStart / DragStop — カードのドラッグのライフサイクル（Kanban 間のシナリオでは DragStop を使用）
• QueryCellInfo — 描画前に列のセル要素をカスタマイズします

メソッド

📄 参照: references/methods.md

• AddCard / UpdateCard / DeleteCard — カードの CRUD 操作
• AddColumn / DeleteColumn — 列の動的な管理
• OpenDialog / CloseDialog — ダイアログのプログラムによる制御
• ShowColumn / HideColumn — 列の表示を切り替えます
• GetCardDetails / GetColumnData / GetSelectedCards / GetSwimlaneData — データの取得
• ShowSpinner / HideSpinner — 読み込みインジケーターの制御
• Refresh / RefreshHeader / RefreshUI — ボードの再描画ヘルパー
• DataBind / Destroy / AppendTo / Inject — コンポーネントのライフサイクルユーティリティ

すべてのプロパティのリファレンス

📄 参照: references/properties.md

• <ejs-kanban> のルートプロパティすべての一覧（型、デフォルト値、例を含む）
• サブモデルのプロパティ：CardSettings、Columns、SwimlaneSettings、SortSettings、DialogSettings、StackedHeaders
• Enum 値：ConstraintType、SelectionType、SortOrderBy、SortDirection

手順別レシピ

📄 参照: references/how-to.md

• 実行時に列を動的に変更する
• ドロップダウンを使って query プロパティでカードをフィルタリングする
• テキスト入力でフィールド値からカードを検索する
• ヘッダーのダブルクリックイベントハンドラーを追加する

よく使われるパターン

リモートデータを使用するスイムレーンボード

使用する場面： カードをユーザー／チーム別にグループ化し、ローカルコレクションではなく API エンドポイント（OData、WebAPI など）からデータを読み込む必要がある場合。

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

列の制約を設定したボード

使用する場面： WIP（Work-In-Progress）制限を適用し、列に積み重ねられるカードが少なすぎたり多すぎたりするのを防ぐ必要がある場合。

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

カード編集ダイアログと CRUD を備えたボード

使用する場面： ユーザーがダイアログフォームでカードを作成、編集、削除し、変更を 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>

仮想スクロールボード

使用する場面： データセットが大きく（数百から数千枚のカード）、すべてのカードを一度に描画するとパフォーマンスの問題が発生する場合。

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

主要プロパティのリファレンス

プロパティ	タグ	値	目的
keyField	<ejs-kanban>	フィールド名の文字列	ステータス値によってカードを列に割り当てます
dataSource	<ejs-kanban>	@ViewBag.data	ローカルデータコレクション
enableVirtualization	<ejs-kanban>	true/false	大量のデータ向けの仮想スクロール
enableTooltip	<ejs-kanban>	true/false	カードにカーソルを合わせたときのツールチップ
tooltipTemplate	<ejs-kanban>	テンプレート ID の文字列	カスタムツールチップの HTML テンプレート
allowDragAndDrop	<ejs-kanban>	true/false	ドラッグ＆ドロップの全体設定
externalDropId	<ejs-kanban>	要素 ID の配列	外部からのドロップ先 ID
enablePersistence	<ejs-kanban>	true/false	状態を localStorage に保存します
locale	<ejs-kanban>	ロケール文字列（例："de"）	UI 文字列のローカライズ
enableRtl	<ejs-kanban>	true/false	右から左へのレイアウト
width	<ejs-kanban>	auto/px/%	ボードの幅
height	<ejs-kanban>	auto/px/%	ボードの高さ
AllowKeyboard	<ejs-kanban>	true/false	キーボード操作の切り替え
headerField	<e-kanban-cardsettings>	フィールド名の文字列	カードの一意の ID フィールド（必須）
contentField	<e-kanban-cardsettings>	フィールド名の文字列	カード本文のテキストフィールド
template	<e-kanban-cardsettings>	テンプレート ID の文字列	カスタムカードの HTML テンプレート
selectionType	<e-kanban-cardsettings>	None/Single/Multiple	カードの選択モード
priority	<e-kanban-cardsettings>	フィールド名の文字列	並べ替えに使う数値の順位フィールド
showHeader	<e-kanban-cardsettings>	true/false	カードヘッダーの表示／非表示
keyField	<e-kanban-column>	ステータス値（単数または複数）	列のカードフィルター（単一値またはカンマ区切り）
headerText	<e-kanban-column>	表示文字列	列のタイトル
allowToggle	<e-kanban-column>	true/false	列の折りたたみを許可します
isExpanded	<e-kanban-column>	true/false	初期状態で展開するかどうか
minCount	<e-kanban-column>	整数	カードの最小数の制約
maxCount	<e-kanban-column>	整数	カードの最大数の制約
showItemCount	<e-kanban-column>	true/false	カード数のバッジを表示します
allowDrag	<e-kanban-column>	true/false	列からのカードのドラッグを許可します
allowDrop	<e-kanban-column>	true/false	列へのカードのドロップを許可します
keyField	<e-kanban-swimlanesettings>	フィールド名の文字列	スイムレーンのグループ化フィールド
textField	<e-kanban-swimlanesettings>	フィールド名の文字列	スイムレーンの表示ラベルフィールド
sortBy	<e-kanban-sortsettings>	Index/DataSourceOrder/Custom	カードの並べ替え方法
field	<e-kanban-sortsettings>	フィールド名の文字列	並べ替え対象のフィールド
direction	<e-kanban-sortsettings>	Ascending/Descending	並べ替えの方向

データモデル

すべての例で使用する標準の KanbanDataModels クラス：

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
}