Question

使用弹出式编辑器进行更新时，Kendo网格客户端详细信息模板无法正确呈现。我正在使用“详细信息”模板显示更多的列，并使用编辑器模板进行弹出式编辑。首先，如果我打开详细信息模板，则可以正常工作，但是如果我打开用于添加/更新的弹出式编辑器，则客户端详细信息模板会混乱，并在编辑模式下显示列，并且布局也会受到干扰。当第二次弹出编辑器打开时，某些列样式被弄乱了（例如不显示numerictextbox）。

我在这里做错了什么？请告知。

首先，“客户详细信息”模板如下所示：

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

我的代码如下：

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

我在这里找到了问题。实际上，我给客户端详细信息模板中的表行赋予了与控件（NumericTextboxes等）相同的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>

希望这对其他人有帮助。

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

1 个答案: