作成日: 2019/09/06 最終更新日: 2019/09/06
文書種別
技術情報
詳細
FlexGridでは、サイズを設定すると、現在表示されている領域のセルのDOM要素のみ作成され、グリッドをスクロールしてセルの表示範囲が変更されるとセルのDOM要素を再作成する処理となっております。
そのため、itemFormatterプロパティやformatItemイベントでセルにHTML要素を追加する実装としている場合、HTML要素を追加する処理のみでは、セルに表示されたHTML要素を変更してもその変更内容は保持されず、スクロールなどでセルが再描画されると、セルのDOM要素を再作成する処理でHTML要素を追加する処理のみが行われることになりますので、変更した内容は消えることになります。
サンプルでは、itemFormatterで行ヘッダにチェックボックスを追加する処理を実装しています。
「FlexGrid1」では、チェックボックスのHTML要素のみを追加しているため、チェックボックスをチェックし、スクロールして非表示にしたあと、スクロールを戻して再表示すると、チェックボックスはチェックされていない状態となります。
再表示後もチェックされた状態とするには、「FlexGrid2」のように各行のチェック状態を保持し、HTML要素追加後にチェック状態を反映する処理を実装する必要があります。
そのため、itemFormatterプロパティやformatItemイベントでセルにHTML要素を追加する実装としている場合、HTML要素を追加する処理のみでは、セルに表示されたHTML要素を変更してもその変更内容は保持されず、スクロールなどでセルが再描画されると、セルのDOM要素を再作成する処理でHTML要素を追加する処理のみが行われることになりますので、変更した内容は消えることになります。
サンプルでは、itemFormatterで行ヘッダにチェックボックスを追加する処理を実装しています。
「FlexGrid1」では、チェックボックスのHTML要素のみを追加しているため、チェックボックスをチェックし、スクロールして非表示にしたあと、スクロールを戻して再表示すると、チェックボックスはチェックされていない状態となります。
再表示後もチェックされた状態とするには、「FlexGrid2」のように各行のチェック状態を保持し、HTML要素追加後にチェック状態を反映する処理を実装する必要があります。
サンプル
旧文書番号
84446