Kendo 与弹出式编辑器一起使用进行更新时，网格客户端详细信息模板呈现问题

Question

Kendo 使用弹出式编辑器进行更新时，网格客户端详细信息模板无法正确呈现。我正在使用 Detail 模板显示更多列，使用编辑器模板进行弹出式编辑。起初，如果我打开详细信息模板，它工作正常，但如果我打开 Add/Update 的弹出式编辑器，客户详细信息模板就会混乱，并显示列，就像在编辑模式下一样，布局也会受到干扰。第二次打开弹出式编辑器时，某些列样式混乱（例如不显示数字文本框）。

我在这里做错了什么？请指教

起初客户详细信息模板如下所示：

点击编辑按钮后，网格和弹出窗口如下所示：

我的代码如下：

ClientDetailTemplate:

<script id="DisplayTemplate_Bonds" type="text/kendo-tmpl">
<div>
    <table style="width:auto;">
        <tr>
            <td style="vertical-align:top;">
                <table>
                    <tr id='Currency'>
                        <td>Currency</td>
                        <td>Equal To</td>
                        <td>#=CurrencyViewModel.ID#</td>
                    </tr>
                    <tr id='Classification'>
                        <td>Classification</td>
                        <td>Equal To</td>
                        <td>#=ClassificationBoardViewModel.Name#</td>
                    </tr>
                    <tr id='Maturity1'>
                        <td>Maturity</td>
                        <td>Equal To</td>
                        <td>#=kendo.toString(Maturity1, 'n2')#</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

网格：

@(Html.Kendo().Grid<Models.Bonds_ViewModel>
            ()
            .Name("Bonds_Grid")
            .Columns(c =>
            {
                c.Bound(m => m.ID).Hidden();
                c.Bound(m => m.FilterName)
                    .HtmlAttributes(new { @class = "gridDataColumns" })
                    .Title("Filter Name").HeaderHtmlAttributes(new { @title = "Filter Name" })
                ;
                c.Command(p =>
                {
                    p.Edit().Text(" ").UpdateText(" ").CancelText(" ").HtmlAttributes(new { @title = "Edit this filter" });
                    p.Destroy().Text(" ").HtmlAttributes(new { @title = "Delete this filter" });
                });
            })
            .ToolBar(toolbar =>{toolbar.Create().Text("Add Filter").HtmlAttributes(new { @title = "Add" });})
            .Editable(editable => editable
                .Mode(Kendo.Mvc.UI.GridEditMode.PopUp)
                .TemplateName("Editors/Bonds_Editor")
            )
                .DataSource(dataSource => dataSource
                .Ajax()
                .Model(m =>
                {
                    m.Id(p => p.ID);
                    m.Field(p => p.CurrencyViewModel).DefaultValue(ViewData["DefaultCurrencyViewModel"] as Models.CurrencyViewModel);
                    m.Field(p => p.ClassificationBoardViewModel).DefaultValue(ViewData["DefaultClassificationBoardViewModel"] as Models.ClassificationBoardViewModel);
                })
                .Read(read => read.Action("Bonds_Read", "Phase1"))
                .Create(create => create.Action("Bonds_Create", "Phase1"))
                .Update(update => update.Action("Bonds_Update", "Phase1"))
                .Destroy(destroy => destroy.Action("Bonds_Destroy", "Phase1"))
                )
                .ClientDetailTemplateId("DisplayTemplate_Bonds")
        )

弹出式编辑器：

@model Models.Bonds_ViewModel
@Html.HiddenFor(m => m.ID)
<table id="mainTable">
    <tr>
        <td>@Html.Label("Filter Name")</td>
        <td>@Html.EditorFor(m => m.FilterName)</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
        <td>@Html.Label("Currency")</td>
        <td>@Html.EditorFor(m => m.CurrencyViewModel)</td>
    <td>&nbsp;</td> 
    </tr>
    <tr>
        <td>@Html.Label("Classification")</td>
        <td>@Html.EditorFor(m => m.ClassificationBoardViewModel)</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
        <td>@Html.Label("Maturity")</td>
        <td>@Html.Label("Equal To")</td>
        <td>@(Html.Kendo().NumericTextBoxFor(m => m.Maturity1)
              .HtmlAttributes(new { @class = "textboxFor_Styles", style = "width:90px;" })
              .Format(GAM.BLL.GlobalVaribleDeclarations.DisplayFormatForDecimal)
              .Spinners(true)
            )
        </td>
     </tr>                    
</table>

Answer 1

我在这里发现了问题。 实际上，我已经为客户端详细信息模板中的 table 行提供了与控件（NumericTextboxes 和其他）id 相同的 id。我已经更改了行的 ID，一切似乎都运行良好。

例如在客户详细信息模板中，成熟度的行 ID 为

<tr id='Maturity1'> 

这与弹出编辑器中自动分配给 Maturity NumerictextBox 的 ID 冲突

<td>@(Html.Kendo().NumericTextBoxFor(m => m.Maturity1)
              .HtmlAttributes(new { @class = "textboxFor_Styles", style = "width:90px;" })
              .Format(GAM.BLL.GlobalVaribleDeclarations.DisplayFormatForDecimal)
              .Spinners(true)
            )
        </td>

希望这对其他人有所帮助。