[FlexGrid for ASP.NET MVC] ComboBoxをバインドしたセルでTabキーを押下するとアドレスバーにフォーカスが移動する

文書番号 : 82289     文書種別 : Bug
登録日 : 2017/08/08     最終更新日 : 2017/08/08

対象製品

Studio for ASP.NET MVC

ステータス

回避方法あり

詳細

ComboBoxをバインドしたセルを編集モードにし、Tabキーを押下すると、右側のセルに選択が移動せず、アドレスバーにフォーカスが移動します。

◎サンプルコード(cshtml)
<script id="edtCountry" type="text/template">
  @(Html.C1().ComboBox()
    .Id("countryEditor")
    .IsEditable(false)
    .CssStyle("width", "100%")
    .CssStyle("height", "100%")
    .Bind(countries)
    .TemplateBind("Text", "Country").ToTemplate()
  )
</script>
<div>
  @(Html.C1().FlexGrid()
    .Id("customGridEditorsGrid")
    .AutoGenerateColumns(false)
    .Columns(bl =>
    {
      bl.Add(cb => cb.Binding("ID"));
      bl.Add(cb => cb.Binding("Country").CellTemplate(ctb => ctb.EditTemplateId("edtCountry")));
      bl.Add(cb => cb.Binding("Product"));
      bl.Add(cb => cb.Binding("Amount").Format("n2"));
    })
    .Bind(bl => bl.Update(Url.Action("GridEditorsUpdate")).Bind(Model))
  )
</div>

【再現方法】
1. サンプルを実行します。
2. 1行2列目のセルを選択し、編集モードにします。
3. Tabキーを押下します。
結果:アドレスバーにフォーカスが移動します。

回避方法

下記コードのようにComboBoxのkeydownイベントを処理することで、回避することができます。

◎サンプルコード(cshtml)
function BeginEdit(grid, cellRangeEventArgs) {
  if (cellRangeEventArgs.col == 1) {
    var combo;
    setTimeout(function () {
      combo = getEditorControl('countryEditor', cellRangeEventArgs.row, cellRangeEventArgs.col);
      combo.hostElement.addEventListener("keydown", function (e) {
        if (e.key == "Tab") {
          var grid = wijmo.Control.getControl("#customGridEditorsGrid");
          var selection = grid.selection;
          grid.select(selection.row, selection.col + 1);
          grid.focus();
        }
      });
    }, 10);
  }
}