0

我查看了带有自定义编辑/插入弹出窗口的 Telerik MVC3 网格，它几乎就在那里。但是，我试图弄清楚如何显示控制器为网格中的每一行生成的一些 HTML 文本 - 但在弹出编辑器中！（只需将.Encoded(false)添加到我的列定义中，我就可以轻松地将其显示在网格列中。）

<%= Html.Telerik().Grid<ViewModelProcurementAction>(Model.ProcurementActions) // 
        .Name("ProcurementActionGrid")
        .Columns(c =>
            {
                c.Command(commands =>
                    {
                        commands.Edit().ButtonType(GridButtonType.ImageAndText);
                        commands.Delete().ButtonType(GridButtonType.ImageAndText);
                        commands.Custom("showHistory")
                                .ButtonType(GridButtonType.ImageAndText)
                                .Text("History")
                                .Action("Show", "ProcurementActions")
                                .DataRouteValues(route => { route.Add(o => o.Id).RouteKey("id"); });
                    }).Title("Actions").Width(100);
                c.Bound(e => e.Id).Visible(false);
                c.Bound(e => e.ActionId).Visible(false);
                c.Bound(e => e.ContractNumber).HtmlAttributes(new {style = "vertical-align: top"});
                c.Bound(e => e.ContractManager).Width(120).HtmlAttributes(new {style = "vertical-align: top"});
                c.Bound(e => e.ActualCAResponsible).Width(150).HtmlAttributes(new {style = "vertical-align: top"});
                c.Bound(e => e.TitleOfRequirement).HtmlAttributes(new {style = "vertical-align: top"});
                c.Bound(e => e.CipOrName).Title("Project Id").HtmlAttributes(new {style = "vertical-align: top"});
                c.Bound(e => e.RecordTypeName).Title("Record Type").HtmlAttributes(new {style = "vertical-align: top"});
                c.Bound(e => e.ContractTypeName).Title("Contract Type").HtmlAttributes(new { style = "vertical-align: top" });
                c.Bound(e => e.ProcurementActionYearDisplayName).Title("Plan FY").HtmlAttributes(new { style = "vertical-align: top" });
            })
        .DataKeys(keys => keys.Add(o => o.Id))
        .DataBinding(dataBinding =>
                     dataBinding.Ajax()
                       .OperationMode(GridOperationMode.Client)
                       .Select("AjaxGetAll", "ProcurementActions")
                       .Update("AjaxUpdate", "ProcurementActions")
                       .Delete("AjaxDelete", "ProcurementActions")
                       .Enabled(true)
        )
        .Editable(editing => 
            editing.Mode(GridEditMode.PopUp)
                   .TemplateName("EditProcurementAction")
            )
        .Pageable(paging => paging.PageSize(15))
        .Scrollable(scrolling => scrolling.Height(500))
        .Filterable()
        .Sortable()
%>

我有一个弹出编辑器的 ASCX 模板。
在此处输入图像描述

在填充网格之前，我必须扫描每一行的每个必填字段，并为每个需要注意的数据点嵌入一条消息。我在控制器中执行此操作，因为需要考虑几个条件逻辑。一旦我有一个 List<string> 消息，我会迭代 List<string> 并生成一个简单的 4 列 HTML 表，并将其作为我的 ViewModel 的一部分保存为行上的字符串。(Model.RowList[x].UpdateMessage) HTML 字符串如下所示：

Model.UpdateMessage = "
<table>
    <tr>
        <td colspan='4'>The following fields require additional data:</td>
    </tr>
    <tr>
        <td>Award Amount</td>
        <td>Comments</td>
        <td>Contract Number</td>
        <td>Number of Option Years</td>
    </tr>
    <tr>
        <td>Planned CA Responsible</td>
        <td>Actual CA Responsible</td>
        <td>Cost Price Analysis Date</td>
        <td>&nbsp;</td>
    </tr>
</table>";

我的弹出式模板基本上从以下内容开始：

<fieldset style="width: 1085px">
    <legend>Procurement Action</legend>
    <%= Html.HiddenFor(c => c.Id) %>    <=== WORKS ===
    <%= MvcHtmlString.Create(Model.UpdateMessage) %>    <=== DOES NOT WORK ===
    <%= Model.UpdateMessage.ToMvcHtmlString() %>    <=== DOES NOT WORK ===
    <%= Model.UpdateMessage %>    <=== DOES NOT WORK ===
    <%= Html.TextAreaFor(c => c.UpdateMessage) %>    <=== WORKS ===
  • 显然，在 TextAreaFor 框中显示 HTML 是丑陋的，根本不是我需要/想要的。
  • 尝试将字符串转换为 MvcHtmlString 的任何版本都不会呈现表格！<咕咕咕！/>
  • 这真的应该很简单！

有任何想法吗？？？

TIA

-kb

4

1 回答 1

1

Telerik 网格似乎只加载和呈现弹出编辑器模板一次，使用空/默认模型。对于每个后续弹出的“编辑”命令，网格似乎只对编辑器模板中的表单字段进行自己的绑定（客户端），这解释了为什么您的 TextArea 和隐藏字段有效，但包括内联 HTML 则无效。

我相信解决此问题的唯一方法是为 OnEdit 声明 Telerik 客户端 (JavaScript) 事件，并使用该 JavaScript 事件处理程序动态填充 DIV 或其他容器的内容。

在您视图中的网格声明中： 

.ClientEvents(e => e.OnEdit("ProcurementActionGrid_onEdit")

在<script>您的视图中的块或包含的 .js 文件中： 

function ProcurementActionGrid_onEdit(e) {
    var targetDiv = $(e.form).find('.injectUpdateMsgHtmlHere');
    targetDiv.html(e.dataItem.UpdateMessage);
}

（注意：上面显示的是使用 jQuery 快捷方式，但如果需要也可以不使用 jQuery）

最后，在您的 .ascx EditorTemplate 中： 

<div class="injectUpdateMsgHtmlHere"></div>
于 2013-06-19T14:50:01.320 回答