[FlexGrid for ASP.NET MVC] ComboBoxをバインドしたFlexGridをモーダルダイアログに配置した場合、セル編集時にComboBoxが表示されない

文書番号 : 82160     文書種別 : Bug
登録日 : 2017/05/17     最終更新日 : 2017/05/17

対象製品

Studio for ASP.NET MVC

ステータス

回避方法あり

詳細

ComboBoxをバインドしたFlexGridをモーダルダイアログに配置した場合、ComboBoxがバインドされたセルを編集しようとしても、ComboBoxが表示されません(編集モードになりません)。

◎サンプルコード(cshtml)
<script type="text/javascript">
  $(function () {
    $('#dialog-sample').dialog({
      modal: true
    });
  });
</script>

<script id="Kubun" type="text/template">
  @(Html.C1().ComboBox()
  .TemplateBind("Value", "Kubun")
  .Bind(KubunList)
  .SelectedValuePath("Value")
  .DisplayMemberPath("Text")
  .CssClass("c1template-parts")
  .ToTemplate()
  )
</script>

<div id="dialog-sample">
  @(Html.C1().FlexGrid()
    .Id("GridSample")
    .AutoGenerateColumns(false)
    .AllowAddNew(true)
    .Columns(bl =>
    {
      bl.Add(cb => cb.Name("Kubun").Header("区分").CellTemplate(x => x.EditTemplateId("Kubun")));
    })
  )
</div>

【再現方法】
1. サンプルを実行します。
2. モーダルダイアログ上のFlexGridの区分列のセルをダブルクリックし、行を追加します。
3. 追加されたセルをダブルクリックします。
結果:ComboBoxが表示されません(編集モードになりません)。

回避方法

下記コードのようにエディタのzIndexを大きくします。

◎サンプルコード(cshtml)
<script type="text/javascript">
  $(function () {
    var original = c1.mvc.grid._ItemTemplateProvider.prototype._applyCellEditTemplate;
    c1.mvc.grid._ItemTemplateProvider.prototype._applyCellEditTemplate = function (grid, args) {
      original.call(this, grid, args);
      this._activeEdt.style.zIndex = 200;
    }
    $('#dialog-sample').dialog({
      modal: true
    });
  });
</script>

<script id="Kubun" type="text/template">
  @(Html.C1().ComboBox().CssStyle("z-index", "300")
  .TemplateBind("Value", "Kubun")
  .Bind(KubunList)
  .SelectedValuePath("Value")
  .DisplayMemberPath("Text")
  .CssClass("c1template-parts")
  .ToTemplate()
  )
</script>

<div id="dialog-sample">
  @(Html.C1().FlexGrid()
    .Id("GridSample")
    .AutoGenerateColumns(false)
    .AllowAddNew(true)
    .Columns(bl =>
    {
      bl.Add(cb => cb.Name("Kubun").Header("区分").CellTemplate(x => x.EditTemplateId("Kubun")));
    })
  )
</div>