作成日: 2018/01/11 最終更新日: 2018/01/11
文書種別
制限事項
詳細
Angularアプリケーションでセルテンプレートに複数のラジオボタンを配置して、（複数のラジオボタンがチェックされないように）name属性を設定すると、グリッドをスクロールした際にラジオボタンがチェック解除されてしまいます。
この現象は制限事項です。FlexGridが描画高速化のためにセルをリサイクルしていることに起因して発生しています。
各セルのname属性が設定されている場合、
- row0
- row1
- row2
- row3
row2が先頭に表示されるようにグリッドをスクロールすると、row0のセルのname属性がrow2に更新されます。
- row0→row2
- row1
- row2
- row3
このとき、一時的にname = row2のラジオボタンが複数存在し、その結果一方のラジオボタンがチェック解除されてしまいます。
この現象は制限事項です。FlexGridが描画高速化のためにセルをリサイクルしていることに起因して発生しています。
各セルのname属性が設定されている場合、
- row0
- row1
- row2
- row3
row2が先頭に表示されるようにグリッドをスクロールすると、row0のセルのname属性がrow2に更新されます。
- row0→row2
- row1
- row2
- row3
このとき、一時的にname = row2のラジオボタンが複数存在し、その結果一方のラジオボタンがチェック解除されてしまいます。
回避方法
次のように、input要素のname属性を使用せずに、changeイベントでチェック状態を指定するための値を設定することで、同じセルで複数のラジオボタンがチェックされることを防ぎつつ、スクロール時にチェック解除されるのを防ぐことができます。
<label><input type="radio" [name]="'row' + cell.row.index" [checked]="item.radio == 0" />0</label>
<label><input type="radio" [name]="'row' + cell.row.index" [checked]="item.radio == 1" />1</label>
<label><input type="radio" [name]="'row' + cell.row.index" [checked]="item.radio == 2" />2</label>
↓
<label><input type="radio" [checked]="item.radio == 0" (change)="item.radio = 0"/>0</label>
<label><input type="radio" [checked]="item.radio == 1" (change)="item.radio = 1"/>1</label>
<label><input type="radio" [checked]="item.radio == 2" (change)="item.radio = 2"/>2</label>
<label><input type="radio" [name]="'row' + cell.row.index" [checked]="item.radio == 0" />0</label>
<label><input type="radio" [name]="'row' + cell.row.index" [checked]="item.radio == 1" />1</label>
<label><input type="radio" [name]="'row' + cell.row.index" [checked]="item.radio == 2" />2</label>
↓
<label><input type="radio" [checked]="item.radio == 0" (change)="item.radio = 0"/>0</label>
<label><input type="radio" [checked]="item.radio == 1" (change)="item.radio = 1"/>1</label>
<label><input type="radio" [checked]="item.radio == 2" (change)="item.radio = 2"/>2</label>
旧文書番号
82501