时间戳

首页 > 解决方案 > 与弹出编辑器一起使用以进行更新时，剑道网格客户端详细信息模板呈现问题

asp.net-mvc - 与弹出编辑器一起使用以进行更新时，剑道网格客户端详细信息模板呈现问题

问题描述

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

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

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

在此处输入图像描述

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

在此处输入图像描述

我的代码如下：

客户详情模板：

<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>

标签： asp.net-mvctelerikkendo-gridkendo-asp.net-mvc

解决方案

我在这里找到了问题。实际上，我给客户详细信息模板中的表格行提供了与控件（NumericTextboxes 和其他）ID 相同的 ID。我已经更改了行的 ID，并且一切似乎都工作正常。

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

<tr id='Maturity1'>

这与在 Popup 编辑器中自动分配给 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>

希望这对其他人有帮助。

推荐阅读