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

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

対象製品

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が表示されません(編集モードになりません)。

回避方法

4.0.20172.129以降のバージョンでは、下記コードのように実装することで、回避することができます。

◎サンプルコード(cshtml)
<script type="text/javascript">
  var original = c1.mvc.grid._ItemTemplateProvider.prototype._applyCellEditTemplate;
  c1.mvc.grid._ItemTemplateProvider.prototype._applyCellEditTemplate = function (grid, args) {
    original.call(this, grid, args);
    if (this._activeEdt) {
      var activeEdt = this._activeEdt;
      this._activeEdt.style.zIndex = 200;
    }
  }
  $(function () {
    var gridInDialog = wijmo.Control.getControl("#GridSample");

    $('#dialog-sample').dialog({
      modal: true,
      close: function (s, e) {
        var tempalteProvider = c1._getExtension(gridInDialog, c1.mvc.grid._ItemTemplateProvider);
        tempalteProvider._closeEditor(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>


4.0.20171.116のバージョンでは、下記コードのようにエディタの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>