syncfusion-aspnetcore-dashboard-layout

ダッシュボードレイアウトの実装

Syncfusion Dashboard Layout コントロールは、グリッドベースの強力なレイアウトシステムです。柔軟なパネル管理機能を備えたインタラクティブなダッシュボードを開発できます。パネルはカスタマイズ可能なグリッドに配置でき、サイズ変更、ドラッグ、並べ替えを行えるほか、動的なダッシュボードの要件に合わせて追加や削除もできます。

このスキルを使う場面

次のような場合に Dashboard Layout コントロールを使用します。

• 柔軟なパネル構造を備えたグリッドベースのダッシュボードを作成する
• ドラッグ＆ドロップ機能を有効にして、ユーザーがパネルを並べ替えられるようにする
• さまざまな画面サイズに適応するレスポンシブレイアウトを実装する
• 最小／最大サイズの制約があるサイズ変更可能なパネルを追加する
• フローティングパネルを有効にして、空のグリッドセルを自動的に埋める
• パネルの状態を管理し、セッションをまたいでレイアウトを保持する
• パネルの動的な操作（パネルの追加、削除、移動、更新）に対応する
• HTML またはテンプレートを使ってパネルのヘッダーとコンテンツをカスタマイズする
• 右から左に記述する言語に対応する RTL レイアウトをサポートする

コンポーネントの概要

Dashboard Layout は次の要素で構成されます。

1. メインコンテナー - パネルを格納するグリッドベースのレイアウト
2. パネル - コンテンツを格納する個々のグリッドセル
3. グリッドシステム - 設定可能な列とセル間隔
4. インタラクション機能 - ドラッグ、サイズ変更、動的な操作
5. 状態管理 - 永続化とシリアル化の機能

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

はじめに

📄 参照: references/getting-started.md

• インストールと NuGet パッケージのセットアップ
• ASP.NET Core プロジェクトの構成
• TagHelper の登録とセットアップ
• リソースの参照（スタイルとスクリプト）
• Dashboard Layout の基本的な初期化
• 2 つの初期化方法（コンテンツテンプレートとタグヘルパー）

基本的な構成

📄 参照: references/configuring-layouts.md

• columns プロパティを使ったグリッドシステムのセットアップ
• セル間隔とアスペクト比の構成
• row プロパティと column プロパティを使ったパネルの配置
• レイアウト構造とグリッドセルの管理
• コードを含む完全な実用例

パネルの管理

📄 参照: references/panel-operations.md

• addPanel メソッドを使ったパネルの動的な追加
• パネルの削除とレイアウトのクリア（removePanel、removeAll）
• パネルを別の位置に移動（movePanel）
• 既存のパネルを更新（updatePanel）
• sizeX、sizeY プロパティを使ったパネルのサイズ変更
• パネルへの最小／最大サイズ制約の適用

インタラクション機能

📄 参照: references/dragging-and-dropping.md

• allowDragging プロパティを使ったドラッグ＆ドロップの有効化
• ドラッグイベントのライフサイクル（dragStart、drag、dragStop）の理解
• draggableHandle セレクターを使ったドラッグハンドラーのカスタマイズ
• パネルの衝突検出と適応的な再配置
• 適切なイベントバインドによるドラッグイベントの処理

パネルのサイズ変更

📄 参照: references/resizing-panels.md

• allowResizing プロパティを使ったサイズ変更機能の有効化
• resizableHandles プロパティを使ったサイズ変更ハンドルの構成
• サイズ変更イベントのライフサイクル（resizeStart、resize、resizeStop）の理解
• パネルの最小サイズと最大サイズの制約の設定
• アプリケーションでのサイズ変更イベントの処理

レスポンシブ動作

📄 参照: references/responsive-layouts.md

• allowFloating プロパティを使ったフローティングパネルの実装
• mediaQuery を使ったレスポンシブブレークポイントの構成
• モバイルデバイス向けのパネルの自動積み重ね
• enableRtl プロパティを使った RTL サポート
• さまざまな画面解像度に合わせたレイアウトの調整

状態と永続化

📄 読む： references/state-and-persistence.md

• enablePersistence プロパティで状態の永続化を有効にする
• ダッシュボード設定をシリアル化する（serialize メソッド）
• コンポーネントのライフサイクルイベント（created、destroyed）
• ページの再読み込み後も状態を維持する
• セキュリティのための HTML サニタイズ

API リファレンス全体

📄 読む： references/api-reference.md

• 説明とデフォルト値を含む、すべての Dashboard Layout プロパティ
• メソッドシグネチャと使用例の詳細
• イベントの定義とイベント引数の型
• パネルモデルのプロパティと制約
• 詳細な機能ドキュメントへの相互参照

クイックスタートの例

適切なキャメルケースの API プロパティを使用して、2 つのパネルを備えた Dashboard Layout を作成する最小限の例を示します。

@{
    var cellSpacing = new double[] { 10, 10 };
}

<ejs-dashboardlayout id="dashboard" allowDragging="true" allowResizing="true" 
                      allowFloating="true" columns="6" cellSpacing="@cellSpacing">
    <e-dashboardlayout-panels>
        <e-dashboardlayout-panel id="panel1" sizeX="3" sizeY="2" row="0" col="0" 
                                 header="<div>Sales Report</div>" 
                                 content="<div class='content'>Sales data content goes here</div>">
        </e-dashboardlayout-panel>
        <e-dashboardlayout-panel id="panel2" sizeX="3" sizeY="2" row="0" col="3" 
                                 header="<div>Revenue Chart</div>" 
                                 content="<div class='content'>Revenue chart content goes here</div>">
        </e-dashboardlayout-panel>
    </e-dashboardlayout-panels>
</ejs-dashboardlayout>

よく使われるパターン

パターン 1：すべてのインタラクションを有効にする

ドラッグ、サイズ変更、フローティングを有効にして、操作性を最大限に高めます。

<ejs-dashboardlayout id="dashboard" allowDragging="true" allowResizing="true" 
                      allowFloating="true" columns="4">
    <e-dashboardlayout-panels>
        <e-dashboardlayout-panel id="panel1" sizeX="2" sizeY="1" row="0" col="0" 
                                 header="<div>Panel 1</div>" 
                                 content="<div class='content'>Content</div>">
        </e-dashboardlayout-panel>
    </e-dashboardlayout-panels>
</ejs-dashboardlayout>

パターン 2：レスポンシブブレークポイント

モバイルデバイスでパネルが縦に並ぶようにレイアウトを設定します。

<ejs-dashboardlayout id="responsive-dashboard" mediaQuery="(max-width: 768px)" 
                      columns="6" allowFloating="true">
    <e-dashboardlayout-panels>
        <e-dashboardlayout-panel id="panel1" sizeX="3" sizeY="2" row="0" col="0" 
                                 content="<div>Panel 1</div>">
        </e-dashboardlayout-panel>
        <e-dashboardlayout-panel id="panel2" sizeX="3" sizeY="2" row="0" col="3" 
                                 content="<div>Panel 2</div>">
        </e-dashboardlayout-panel>
    </e-dashboardlayout-panels>
</ejs-dashboardlayout>

パターン 3：動的なパネル操作

ユーザー操作に応じてプログラムからパネルを追加します。詳細はパネル管理のリファレンスをご覧ください。

パターン 4：ユーザーレイアウトを永続化する

セッションをまたいでダッシュボード設定を保存および復元します。詳細は状態と永続化のリファレンスをご覧ください。

主なプロパティの概要

プロパティ	型	目的	デフォルト
columns	number	グリッド列数	1
cellSpacing	number[]	パネル間の間隔［水平、垂直］	[5, 5]
allowDragging	boolean	ドラッグ＆ドロップを有効にする	true
allowResizing	boolean	パネルのサイズ変更を有効にする	false
allowFloating	boolean	空のセルを自動的に埋める	true
draggableHandle	string	ドラッグハンドルの CSS セレクター	null
resizableHandles	string[]	サイズ変更ハンドルの方向	['e-south-east']
mediaQuery	string	レスポンシブブレークポイント	'max-width:600px'
enablePersistence	boolean	状態をストレージに保存する	false
enableRtl	boolean	右から左へのレイアウトを有効にする	false
showGridLines	boolean	グリッド構造を視覚化する	false

よくある使用例

1. 分析ダッシュボード - サイズ変更やドラッグが可能なチャートパネルを配置する
2. 営業ダッシュボード - サイズ変更可能な指標パネルで KPI を監視する
3. プロジェクト管理 - 動的なパネル操作でタスクボードを整理する
4. ビジネスインテリジェンス - 状態の永続化を利用してレポートを表示する
5. 管理ポータル - ユーザーがレイアウトを定義できるカスタマイズ可能なダッシュボード

---

次のステップ： はじめにのリファレンスから、Dashboard Layout プロジェクトをセットアップしてください。その後、必要な機能の詳細をご確認ください。