ナレッジベース

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

作成日: 2017/05/17 最終更新日: 2017/07/25

文書種別

制限事項

詳細

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>

旧文書番号

82160