このトピックは、古い igGridUpdating から新しい igGridUpdating への移行のサポートを目的としています。
このトピックは、以下のセクションで構成されます。
グリッド内の列とセルの編集で igGridUpdating により使用される igEditors スイートの構造と機能が変更され、改善されました。そのため、サポートされる jQuery と jQuery UI の最も古いバージョンが変更されました。バージョン間の違いを、以下の表で説明します。
| Ignite UI for jQuery 15.1 | Ignite UI for jQuery 15.2 | |
|---|---|---|
| サポートされる最も古い jQuery バージョン | 1.4.4 | 1.9.1 |
| サポートされる最も古い jQuery UI バージョン | - | 1.9.0 |
ダイアログによる編集を可能にする編集モードには、「rowedittemplate」に代わって「dialog」という新しい名前が付けられました。 新しいダイアログでは異なるテンプレートを使用し、複雑なカスタム編集ダイアログの構築を可能にします。このモードの新機能の詳細は、主要トピック: 行編集ダイアログの概要 (igGrid) を参照してください。
宣言の例:
| 旧 | 新 | ||
|---|---|---|---|
| $("#grid ").igGrid({features : [{ name : "Updating", editMode: "rowedittemplate"}] }); | $("#grid ").igGrid({features : [{ name : "Updating", editMode : "dialog" }] }); |
下の表に、更新機能のユーザー操作機能を簡単に示します。
行編集ダイアログに関連するすべてのオプションを含む新しいオプション rowEditDialogOptions が追加されています。
複数行のテキスト エディターで列を編集する場合は、[ALT] + [ENTER] キーの組み合わせを使用して新しい行を挿入し、[ENTER] キーで変更内容を送信する必要があります。
エディターのアーキテクチャの変更、および変更がエディターと igGridUpdating の統合に与える影響の結果、エディターに対する valueChanged イベントは、エディターがぼかしを検出したときではなく、エンドユーザーが文字を入力するたびに発生します。
注: 行編集ダイアログのすべてのオプションは、更新機能の中の rowEditDialogOptions という名前の新しいオプションの下にあります。以下の表では、それらのオプションに * が付けられています。
| 古いオプション | 新しいオプション | 古い構文 | 新しい構文 | ||
|---|---|---|---|---|---|
| editMode: "rowedittemplate" | editMode: "dialog" | $("#grid").igGrid({ features: [{ name: "Updating", editMode:"rowedittemplate" } ]}); | $("#grid").igGrid({ features: [{ name: "Updating", editMode:"dialog"}] }); | ||
| rowEditDialogWidth | width* | $("#grid").igGrid({ features: [{ name: "Updating", editMode:"rowedittemplate", rowEditDialogWidth: "370px" } ]}); | $("#grid").igGrid({ features: [{ name: "Updating", editMode:"dialog", rowEditDialogOptions: {width: "370px" } ]}); | ||
| rowEditDialogHeight | height* | $("#grid").igGrid({ features: [ { name: "Updating", editMode:"rowedittemplate", rowEditDialogHeight: "350px"}] }); | $("#grid").igGrid({ features: [ { name: "Updating", editMode:"dialog", rowEditDialogOptions: { height: "350px" } } ]}); | ||
| rowEditDialogCaptionLabel | captionLabel* | $("#grid").igGrid({ features: [ { name: "Updating", editMode:"rowedittemplate", rowEditDialogCaptionLabel: "CaptionLabel"}] }); | $("#grid").igGrid({ features: [ { name: "Updating", editMode:"dialog", rowEditDialogOptions: { captionLabel: "CaptionLabel" } } ]}); | ||
| rowEditDialogContainment | containment* | $("#grid").igGrid({ features: [ { name: "Updating", editMode:"rowedittemplate", rowEditDialogContainment: "owner"}] }); | $("#grid").igGrid({ features: [ { name: "Updating", editMode:"dialog", rowEditDialogOptions: { containment: "owner" } } ]}); | ||
| rowEditDialogFieldWidth | editorsColumnWidth* | $("#grid").igGrid({ features: [ { name: "Updating", editMode:"rowedittemplate", rowEditDialogFieldWidth: 150}] }); | $("#grid").igGrid({ features: [ { name: "Updating", editMode:"dialog", rowEditDialogOptions: { editorsColumnWidth: 150 } } ]}); | ||
| showReadonlyEditors | showReadonlyEditors* | $("#grid").igGrid({ features: [ { name: "Updating", editMode:"rowedittemplate", showReadonlyEditors: false}] }); | $("#grid").igGrid({ features: [ { name: "Updating", editMode:"dialog", rowEditDialogOptions: { showReadonlyEditors: false } } ]}); |
| オプション | 追加情報 | ||
|---|---|---|---|
| animationDuration* | 開くおよび閉じる操作の間のアニメーションを指定します。 | ||
| dialogTemplate* | 現在編集したレコードに対して描画されるテンプレートを指定します。 | ||
| dialogTemplateSelector* | 現在編集されたレコードに対して描画されたテンプレートへのセレクターを指定します。 | ||
| editorsTemplate* | グリッド列のコレクションの各列で実行されるテンプレートを指定します(または showReadonlyEditors が false の場合 read-write 列のみ)。エディターとして使用される要素を 'data-editor-for-${key}' で装飾します。${key} テンプレート タグは、レンダリング値の選択されたテンプレート エンジンの構文で置き換えられます。 列のエディターがダイアログ マークアップに指定される場合、テンプレートが描画されるデータから除外されます。このプロパティは、ダイアログ テンプレートが "data-render-tmpl" 属性の要素を含まない場合、無視されます。editorsTemplate と editorsTemplateSelector の両方が指定される場合、editorsTemplateSelector が使用されます。 | ||
| editorsTemplateSelector* | グリッドの列コレクションの各列で実行されるテンプレートのセレクターを指定します。 'data-editor-for-${key}' でエディターとして使用される要素を装飾します。 ${key} テンプレート タグは、描画値の選択されたテンプレート エンジンのシンタックスで置き換えられます。列のエディターがダイアログ マークアップに指定される場合、テンプレートが描画されるデータから除外されます。このプロパティは、ダイアログ マークアップが 'data-render-tmpl' 属性の要素に含まれない場合無視されます。editorsTemplate と editorsTemplateSelector の両方が指定される場合、editorsTemplateSelector が使用されます。 | ||
| namesColumnWidth* | デフォルト行編集ダイアログで列名を含む列の幅を制御します。 | ||
| showEditorsForHiddenColumns* | エディターが非表示列に描画されるかどうかを制御します。 | ||
| wrapAround | キーボードを使用してナビゲーションする場合に、編集モードがグリッドをラップするかどうかを制御します。 |
| オプション | 追加情報 | ||
|---|---|---|---|
| rowEditDialogOkCancelButtonWidth | ボタンの幅が CSS で設定可能なため、このオプションは削除されます。例: .ui-igbutton{ width: 300px} | ||
| rowEditDialogRowTemplate | リファクタリングされたダイアログ編集モードのため、このオプションは削除されます。同様な機能を持つ新しいテンプレート化オプションは dialogTemplate および editorsTemplate です。設定の詳細については、「行編集ダイアログの構成 (igGrid)」トピックを参照してください。 | ||
| rowEditDialogRowTemplateID | リファクタリングされたダイアログ編集モードのため、このオプションは削除されます。同様な機能を持つ新しいテンプレート化オプションは dialogTemplateSelector および editorsTemplateSelector です。設定の詳細については、「行編集ダイアログの構成 (igGrid)」トピックを参照してください。 |
| 古い名前 | 新しい名前 | 追加情報 | ||
|---|---|---|---|---|
| rowEditDialogOpening | rowEditDialogBeforeOpen | このイベントはキャンセルできません。 行編集をキャンセルする必要がある場合、editRowStarting イベントを代わりに使用してください。 | ||
| rowEditDialogOpened | rowEditDialogAfterOpen | |||
| rowEditDialogClosing | rowEditDialogBeforeClose | このイベントはキャンセルできません。 | ||
| rowEditDialogClosed | rowEditDialogAfterClose |
| 引数 | 影響されるイベント | 追加情報 | 古い構文 | 新しい構文 | ||
|---|---|---|---|---|---|---|
| keepEditing | editCellEnding,editRowEnding | 属性は削除されます。既存ユーザーの編集を防止するために、false を返してイベントをキャンセルできます。 | $("#grid").bind("iggridupdatingeditrowending", function (evt, ui) { ui.keepEditing = true; }); |
$("#grid").bind("iggridupdatingeditrowending", function (evt, ui) { return false; }); |
findHiddenComboEditor メソッドは廃止され、削除されました。以下は、その他の役立つトピックです。
オンラインで表示: GitHub