このトピックでは、igTreeGrid™ コントロールの更新機能の使用方法を説明します。
このトピックは、以下のセクションで構成されます。
以下の表は、このトピックを理解するための前提条件として必要な概念、トピック、および記事の一覧です。
igGrid™ コントロールの更新機能の使用方法を説明します。その他の機能と同様に、更新はフラット データ コントロールを拡張し、単一のグリッドで階層のサポートを追加します。igTreeHierarchicalDataSource の基本インスタンスにより可能になります。インライン編集または行編集ダイアログ機能のサポートについての追加があります。更に 16.1 バージョンから [新規行の追加] ユーザー インターフェイスが有効になり、TreeGrid の更新はルート レベルに新しいレコードの追加だけでなく、子レコードを指定したレベルへの追加を UI および API によりサポートします。
更新 UI の更新には、埋め込みの igTreeGrid の追加、更新、および削除機能が含まれます。これには [新規行の追加] ボタン、[子行の追加] ボタン、エディター、および [削除] ボタンなどがあります。
更新機能は igGrid と同様に動作します。また、ユーザーがホバーされている行の子として行を追加できます。ユーザーがグリッド レコードの上にある [新規行の追加] ボタンを使用して新しいルート レベル ノードを追加できます。新しい子ノードを追加するには、行をホバーし、[行の削除] ボタンの隣に表示される [子行の追加] ボタンをクリックします。新しい行 (編集モード) がターゲットの親行の下に表示されます。 [キャンセル] をクリックすると、行が削除され、データ変更が破棄されます。 [完了] をクリックすると、新規行がターゲットの親行の最後の子として追加されます。
注: ページングが有効で、ターゲットの親行の子が複数のページをスパンする場合、autoCommit オプションを使用してください。autoCommit が false の場合、新しい子行が現在のページで最後のレコードとして追加されます。autoCommit が true の場合、新しい子行が最後の子として追加され、新しい行を表示するためにグリッドのページが変更されます。
タッチ環境ではホバー操作は利用できません。つまり、[子行の追加] ボタンを表示するには、行をスワイプまたはタップする必要があります。
更新機能が構成された新しい igTreeGrid を簡単にアプリケーションに追加するには、Ignite UI CLI を使用します。
Ignite UI CLI のインストール:
npm install -g igniteui-cli
Ignite UI CLI インストール後、Ignite UI for jQuery プロジェクトを生成し、更新機能が構成された新しい igTreeGrid を追加してプロジェクトをビルドおよび公開するには、以下のコマンドを使用します。
ig new <project name>
cd <project name>
ig add tree-grid-editing newTreeGridEditing
ig start
すべての利用可能なコマンドおよび詳細な情報については、「Ignite UI CLI の使用」のトピックを参照してください。
更新機能を有効にすることで、グリッド内のデータを追加、削除、および更新することができます。
以下に、igTreeGrid を構成して更新をサポートする方法が示されています。
JavaScript の場合:
$("#treegrid").igTreeGrid({
dataSource: data,
height: 400,
autoCommit: true,
primaryKey: "employeeId",
foreignKey: "supervisorId",
initialExpandDepth: -1,
autoGenerateColumns: false,
columns: [
{ headerText: "ID", key: "employeeId", dataType: "number" },
{ headerText: "First Name", key: "firstName", dataType: "string" },
{ headerText: "Last Name", key: "lastName", dataType: "string" },
],
features: [
{
name: "Updating"
}
]
});
注: 更新するには、プライマリ キー列の primaryKey オプションおよび dataType プロパティを設定する必要があります。設定されない場合、基本のデータ ソースは正しく操作しない可能性があります。
ASPX (MVC) の場合:
@(Html.Infragistics().TreeGrid(Model)
.ID("treegrid")
.PrimaryKey("employeeId")
.ForeignKey("supervisorId")
.UpdateUrl(Url.Action("UpdatingSaveChanges"))
.Columns(column =>
{
column.For(x => x.employeeId).HeaderText("ID").Width("100px");
column.For(x => x.firstName).HeaderText("First Name").Width("200px");
column.For(x => x.lastName).HeaderText("Last Name").Width("200px");
})
.Features(features => {
features.Updating();
})
.Height("500")
.DataSourceUrl(Url.Action("UpdatingGetData"))
.DataBind()
.Render()
)
行の追加、更新、削除の継承オプションがあり、子の追加機能の構成のために新しいオプションがあります。
| オプション | 説明 |
|---|---|
| enableAddChild (true) | 行に子の追加を有効または無効にするかどうかを指定します。 |
| addChildTooltip (null) | 子の追加の ツールチップ テキストを指定します。 |
| addChildButtonLabel (null) | タッチ環境で [子の追加] ボタンのラベルを指定します。 |
igGrid 更新の継承メソッドがあり、子の追加機能に関連する新しいメソッドが追加されました。
| メソッド | 説明 |
|---|---|
| addChild | 新しい子を特定の行に追加します。また、トランザクションを作成し、UI を更新します。 |
| startAddChildFor | 新しい子を特定の行に追加するために編集を開始します。 |
| showAddChildButtonFor | 特定の行に [子行の追加] ボタンを表示します。 |
| hideAddChildButton | [子行の追加] ボタンを非表示します。 |
ツリー グリッドのルート レベルに新規行をコードで追加するには、igGrid から継承された addRow API メソッドを使用します。以下の形式で値のペアを指定します: { column1Key: value1, column2Key: value2, ...} 。
以下は、上記のツリー グリッドの構成を使用し、新規行をルート レベルに追加する方法です。
$("#treegrid").igTreeGridUpdating("addRow", {employeeId: 3, firstName: "John", lastName: "Miller"});
子行を特定のレベルに追加するには、ツリー グリッドの更新 UI を使用するか、コードで addChild API メソッドを使用できます。このメソッドのパラメーターは、親キーおよび挿入する新しいレコード オブジェクトの指定を許可します。
以下は、上のツリー グリッド構成を使用して、API により子行を特定のレベルに追加する方法です。
$("#treegrid").igTreeGridUpdating("addChild", {employeeId: 8, firstName: "John", lastName: "Miller"}, 5);
注: 子行は親行の最後の子として追加されます。
deleteRow API メソッドを使用して行を削除できます。単一の引数はプライマリ キー値です。
注: 親行の削除はすべての子も削除します。
$("#treegrid").igTreeGridUpdating("deleteRow", 1)
updateRow API メソッドを使用して行を更新できます。
$("#treegrid").igTreeGridUpdating("updateRow", 5, {lastName: "Fuller"});
注: このセクションは、デフォルト プロパティ設定でのキーボード操作について説明します。 これらの動作を変更する関連オプション:
excelNavigationMode - デフォルト値: false
セル/行が選択されている場合 (選択機能が有効):
editMode が行で行が編集モードの場合、以下のキー操作が有効です。
editMode がセルでセルが編集モードの場合、以下のキー操作が利用できます。
editMode が rowEditTemplate でセルが編集モードの場合、以下のキー操作が利用できます。 行編集テンプレート ダイアログが開いている場合:
行の追加が編集モードの場合:
行が選択されている場合 (選択機能が有効でモードが行の場合):
igTreeGrid のロードオンデマンド機能の利点を説明し、実装方法を説明します。オンラインで表示: GitHub