syncfusion-aspnetcore-gantt-chart

Syncfusion ASP.NET Core ガントチャート

Syncfusion EJ2 Gantt Chart for ASP.NET Core は、タグヘルパーを使用してプロジェクトのスケジュール、タスクの依存関係、リソースの割り当て、タイムラインを視覚化する、強力なプロジェクト管理コンポーネントです。

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

次のような場合に、このスキルを使用してください。

• ASP.NET Core アプリケーションでガントチャートを設定して表示する
• ローカルまたはリモートのデータをガントコントロールにバインドする
• タスクのフィールド、列、チャートのタイムラインを設定する
• 編集（セル、ダイアログ、タスクバー）を有効にし、タスクを管理する（追加／削除／更新）
• タスクの依存関係（FS、SS、FF、SF）と先行タスクを定義する
• タスクにリソースを割り当てて表示する
• 行やセルをフィルタリング、並べ替え、検索、選択する
• Excel または PDF にエクスポートする
• タイムライン、タスクバー、ラベル、休日、イベントマーカーをカスタマイズする
• タスクのスケジュールモード（自動／手動／カスタム）を設定する
• 元に戻す／やり直し、状態の永続化、仮想スクロール、クリティカルパスを有効にする
• コンポーネントをスクロールし、行の高さを設定する、または行をドラッグ＆ドロップする
• タイムゾーンを設定する、または異なるカルチャや RTL 言語向けに UI をローカライズする
• イベント（actionBegin、actionComplete、cellEdit）を処理する、またはパブリックメソッドをプログラムから呼び出す

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

はじめに

📄 参照: references/getting-started.md

• NuGet パッケージのインストール
• タグヘルパーのインポートと CDN の設定
• スクリプトマネージャーの登録
• 最初のガントコントロール（Index.cshtml + Controller）
• タスクフィールドのマッピングと列の定義
• 編集、フィルタリング、並べ替えの有効化

データバインディング

📄 参照: references/data-binding.md

• ローカルの階層データバインディング
• ローカルのフラット／自己参照データバインディング
• リモートデータ（URL アダプター、OData、Web API）
• オンデマンド読み込み（子レコードの遅延読み込み）
• DynamicObject と ExpandoObject のバインディング

列

📄 参照: references/columns.md

• 列の定義とフィールドのマッピング
• カスタム列ヘッダーとヘッダーテンプレート
• 列テンプレートと値アクセサー
• チェックボックス列、固定列
• 列の並べ替え、サイズ変更、結合
• レスポンシブ列、WBS 列、列メニュー

タスクの管理（編集）

📄 参照: references/managing-tasks.md

• CRUD に必要な IsPrimaryKey
• セル編集、ダイアログ編集、タスクバー編集
• タスクの追加と削除
• タスクのインデント／インデント解除
• タスクの分割と統合
• サーバー側での CRUD の永続化
• 編集の検証とエラー処理

タスクの依存関係

📄 参照: references/task-dependency.md

• SS、SF、FS、FF の関係タイプ
• 依存関係フィールドのマッピング
• 先行タスクのオフセット値
• マウスドラッグによる依存関係の編集
• 検証、エラー処理、親タスクの依存関係

リソース

📄 参照: references/resources.md

• リソースコレクションとフィールドのマッピング
• タスクへのリソースの割り当て
• リソースビューのモード
• 複数タスクバーの表示
• リソースのカスタマイズ

フィルタリング

📄 参照: references/filtering.md

• メニューフィルタリング（列単位）
• Excel のようなフィルタリング
• ツールバー検索／検索
• フィルター設定とプログラムによるフィルタリング

並べ替え

📄 参照: references/sorting.md

• 並べ替えの有効化、複数列の並べ替え
• 初期の並べ替え設定
• プログラムによる並べ替え／並べ替えの解除

タイムライン

📄 参照: references/timeline.md

• 上位階層と下位階層の設定
• タイムラインの表示モード（Hour、Day、Week、Month、Year）
• カスタムのタイムライン単位と書式
• タイムラインテンプレート
• 無限タイムラインスクロール
• ズームインとズームアウト

タスクのスケジュール設定

📄 参照: references/task-scheduling.md

• 自動、手動、カスタムのスケジュールモード
• 期間の単位（日、時間、分、週、月）
• 未スケジュールのタスク
• タスクの制約（ALAP、ASAP、FNLT、SNLT、MSO、MFO）

ベースライン

📄 参照： references/baseline.md

• ベースライン機能の概要とユースケース
• ベースラインの日付フィールド（baselineStartDate、baselineEndDate、baselineDuration）のマッピング
• renderBaseline でベースライン表示を有効にし、baselineColor をカスタマイズ
• 明示的な期間ゼロでベースラインのマイルストーンを描画
• ベースラインバーの CSS スタイル設定
• ベースラインテンプレートと動的なカスタマイズ
• 複数の計画フェーズを比較するための複数ベースラインの描画

選択

📄 参照： references/selection.md

• 行選択とセル選択
• 単一選択／複数選択モード
• プログラムによる選択

スクロール

📄 参照： references/scrolling.md

• スクロールバーを有効にするには、コンポーネントの height と width を設定します
• 100% によるレスポンシブなサイズ設定と、親コンテナーの高さに関する要件
• scrollToDate() によるタイムラインのプログラムスクロール
• ganttObj.ganttChartModule.scrollObject.setScrollTop() で垂直スクロールを設定します

行

📄 参照： references/rows.md

• グローバルな rowHeight と、taskFields.expandState による行ごとの展開状態を設定します
• collapseAllParentTasks を使って、読み込み時にすべての親タスクを折りたたみます
• rowDataBound と queryTaskbarInfo で行の外観をカスタマイズします
• queryCellInfo.rowSpan による行の結合と、はみ出した内容に対するクリップモード

行のドラッグ＆ドロップ

📄 参照： references/row-drag-and-drop.md

• allowRowDragAndDrop で行の並べ替えを有効にし、複数行のドラッグには selectionSettings.type = "Multiple" を設定します
• allowTaskbarDragAndDrop と編集モード Auto で、タスクバーを使ったドラッグを許可します
• ライフサイクルイベント：rowDragStartHelper、rowDragStart、rowDrag、rowDrop
• reorderRows(fromIndexes, toIndex, position) によるプログラムでの並べ替え

タイムゾーン

📄 参照： references/timezone.md

• timezone（例：UTC、America/New_York）を設定し、クライアント間で表示される日付を正規化します
• CRUD 操作では、設定されたタイムゾーンが適用され、サーバーへの保存時に変換されます
• ユーティリティメソッド：プログラムによる変換に使用する ej.schedule.Timezone().offset()、convert()、remove()

グローバリゼーション

📄 参照： references/globalization.md

• locale と ej.base.L10n.load() の翻訳オブジェクトで UI テキストをローカライズします
• 国際化：CLDR ファイルを読み込み、カルチャーに応じた日付と数値の書式を設定します
• 右から左に記述する言語では、enableRtl="true" で RTL レイアウトを有効にします

エクスポート（Excel および PDF）

📄 参照： references/export.md

• 列とデータをカスタマイズした Excel エクスポート
• テーマとカスタム列に対応した PDF エクスポート
• 複数のガントチャートを 1 つの PDF にエクスポート

ツールバー

📄 参照： references/toolbar.md

• 組み込みのツールバー項目（Add、Edit、Delete、Search、ExpandAll、CollapseAll、ExcelExport、PdfExport、ZoomIn、ZoomOut、ZoomToFit、UndoRedo）
• カスタムツールバー項目とクリック処理
• ツールバー項目のプログラムによる有効化／無効化

コンテキストメニュー

📄 参照： references/context-menu.md

• enableContextMenu="true" でコンテキストメニューを有効にします
• CRUD 操作用の組み込みコンテキストメニュー項目
• カスタムコンテキストメニュー項目とクリックイベント処理

タスクバー

📄 参照： references/taskbar.md

• text/x-jsrender を使用したタスクバーテンプレート（taskbarTemplate、parentTaskbarTemplate、milestoneTemplate）
• taskbarHeight でタスクバーのサイズを制御します（rowHeight 未満にする必要があります）
• queryTaskbarInfo によるタスクバー／進捗状況の動的なスタイル設定（例：taskbarBgColor、progressBarBgColor、isCritical）
• CSS オーバーライドによるドラッググリッパーアイコンの変更
• connectorLineWidth と connectorLineBackground による依存関係コネクター線のカスタマイズ
• enableMultiTaskbar="true" でプロジェクトビューに複数のタスクバーを表示

ラベルとツールチップ

📄 読む: references/labels-and-tooltips.md

• タスクバー上の左側／右側／内部ラベルのテンプレート
• tooltipSettings によるタスクバーのツールチップのカスタマイズ
• コネクター線とベースラインのツールチップ

イベントマーカー

📄 読む: references/event-markers.md

• <e-gantt-eventmarkers> を使ったストリップライン／イベントマーカーの追加
• マーカーごとのカスタムラベルと CSS クラス
• 動的イベントマーカー

クリティカルパス

📄 読む: references/critical-path.md

• enableCriticalPath="true" によるクリティカルパスの強調表示の有効化
• クリティカルパスの描画とカスタマイズ
• クリティカルスラック値の設定

スプリッター

📄 読む: references/splitter.md

• splitterSettings によるグリッド／チャートペインの比率の設定
• 列インデックス、パーセンテージ、ピクセルによるスプリッター位置の指定
• setSplitterPosition() によるスプリッター位置のプログラムからの更新

元に戻す／やり直し

📄 読む: references/undo-redo.md

• ツールバー項目または Ctrl+Z／Ctrl+Y による元に戻す／やり直しの有効化
• 元に戻す／やり直しの履歴サイズ（undoRedoStepsCount）の設定
• 対応する操作とプログラムからの undo()／redo() の呼び出し

状態の永続化

📄 読む: references/state-persistence.md

• enablePersistence="true" による永続化の有効化（localStorage に保存）
• 永続化されるプロパティ：フィルター、並べ替え、列幅、スクロール位置、ズームレベル
• 永続化された状態をプログラムからクリア

イミュータブルモード

📄 読む: references/immutable-mode.md

• enableImmutableMode="true" による変更されていない行の再描画の防止
• 頻繁に更新される大規模データセットでのパフォーマンス向上
• 制限事項と使用パターン

仮想スクロール

📄 読む: references/virtual-scroll.md

• enableVirtualization="true" による行の仮想化の有効化
• enableTimelineVirtualization="true" によるタイムラインの仮想化の有効化
• パフォーマンス特性と既知の制限事項

読み込みアニメーション

📄 読む: references/loading-animation.md

• データ読み込み中に表示される組み込みのスピナー
• showSpinner()／hideSpinner() による読み込みインジケーターのプログラムからの表示／非表示
• カスタム読み込みテンプレート

スタイルと外観

📄 読む: references/style-and-appearance.md

• Syncfusion テーマ（Bootstrap、Material、Fabric、High Contrast）の適用
• タスクバー、グリッド行、ヘッダーの CSS クラスの上書き
• タスクごとのスタイル設定に使用する queryTaskbarInfo イベント

イベント

📄 読む: references/events.md

• camelCase の Tag Helper 属性（actionBegin、actionComplete、actionFailure）によるイベントの登録
• actionBegin — すべての CRUD、フィルター、並べ替え、ズーム、依存関係の操作前に実行されるキャンセル可能なフック
• actionComplete — アクション後のコールバックと requestType の参照表
• cellEdit — 特定のセルまたは行が編集モードになるのを防止
• beforeTooltipRender — ツールチップを動的にカスタマイズまたは非表示にする
• 行／セルの選択イベント：rowSelecting、rowSelected、rowDeselecting、rowDeselected、cellSelecting、cellSelected
• エクスポートイベント：beforeExcelExport、beforePdfExport、excelExportComplete、pdfExportComplete

パブリックメソッド

📄 参照： references/methods.md

• データアクセス：getCurrentViewData()、getRecordByID()、getTaskByUniqueID()、getRowByID()
• 行の展開／折りたたみ：expandAll()、collapseAll()、expandByID()、collapseByID()、expandByIndex()
• タスクユーティリティ：changeTaskMode()、convertToMilestone()、updateTaskId()、updateDataSource()
• スクロール：scrollToDate()、scrollToTask()、setScrollTop()、updateChartScrollOffset()
• 検索：search(keyword) — 表示されている列を対象としたプログラムによる検索
• ライフサイクル：refresh()、dataBind()、getRootElement()、addEventListener()、removeEventListener()
• モジュールインジェクションの参照表（ej.gantt.Filter、Edit、RowDD、CriticalPathなど）

クイックスタートの例

@* ~/Pages/Index.cshtml *@
<ejs-gantt id='Gantt' dataSource="Model.GanttDataSourceCollection" height="450px">
    <e-gantt-taskfields id="TaskId"
                        name="TaskName"
                        startDate="StartDate"
                        endDate="EndDate"
                        duration="Duration"
                        progress="Progress"
                        parentID="ParentID">
    </e-gantt-taskfields>
</ejs-gantt>

// ~/Pages/Index.cshtml.cs
public class IndexModel : PageModel
{
    public List<GanttDataSource> GanttDataSourceCollection { get; set; }

    public void OnGet()
    {
        GanttDataSourceCollection = GetTaskCollection();
    }

    private List<GanttDataSource> GetTaskCollection()
    {
        return new List<GanttDataSource>()
        {
            new GanttDataSource() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 02), EndDate = new DateTime(2019, 04, 21) },
            new GanttDataSource() { TaskId = 2, TaskName = "Identify site location", StartDate = new DateTime(2019, 04, 02), Duration = 4, Progress = 50, ParentID = 1 },
            new GanttDataSource() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 02), Duration = 4, Progress = 50, ParentID = 1 },
            new GanttDataSource() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 02), Duration = 4, Progress = 50, ParentID = 1 },
            new GanttDataSource() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 02), EndDate = new DateTime(2019, 04, 21) },
            new GanttDataSource() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 04), Duration = 3, Progress = 50, ParentID = 5 },
            new GanttDataSource() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 04), Duration = 3, Progress = 50, ParentID = 5 }
        };
    }
}

public class GanttDataSource
{
    public int TaskId { get; set; }
    public string TaskName { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public int? Duration { get; set; }
    public int Progress { get; set; }
    public int? ParentID { get; set; }

よくあるパターン

編集を有効にする

<ejs-gantt id="Gantt" dataSource="Model.GanttDataSourceCollection" height="450px">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                        endDate="EndDate" duration="Duration" progress="Progress"
                        parentID="ParentID">
    </e-gantt-taskfields>
    <e-gantt-editsettings allowEditing="true" allowAdding="true"
                          allowDeleting="true" allowTaskbarEditing="true"
                          mode="Auto">
    </e-gantt-editsettings>
    <e-gantt-columns>
        <e-gantt-column field="TaskId" isPrimaryKey="true"></e-gantt-column>
        <e-gantt-column field="TaskName"></e-gantt-column>
    </e-gantt-columns>
</ejs-gantt>

フィルタリングと並べ替えを有効にする

<ejs-gantt id="Gantt" dataSource="Model.GanttDataSourceCollection"
           allowFiltering="true" allowSorting="true" height="450px">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                        endDate="EndDate" duration="Duration" progress="Progress"
                        parentID="ParentID">
    </e-gantt-taskfields>
</ejs-gantt>

エクスポート機能付きツールバー

<ejs-gantt id="Gantt" dataSource="Model.GanttDataSourceCollection"
           toolbar="@(new List<string>() { "Add","Edit","Delete","Cancel","Update","ExpandAll","CollapseAll","ExcelExport","PdfExport" })"
           allowExcelExport="true" allowPdfExport="true" height="450px">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                        endDate="EndDate" duration="Duration" parentID="ParentID">
    </e-gantt-taskfields>
</ejs-gantt>