Question

我看着Telerik MVC3 grid with custom Edit/Insert popup，几乎就在那里。但是，我试图找出如何显示由Controller为网格中的每一行生成的一些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模板 enter image description here

在填充网格之前，我必须扫描每个所需字段的每一行，并为每个需要注意的数据点嵌入一条消息。我在控制器中执行此操作，因为有几个条件逻辑需要考虑。我有一个List＆lt; string＆gt;消息迭代List＆lt; string＆gt;并生成一个简单的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的任何版本都不会呈现表格！＆LT;！Grrrrr /＆GT;
这真的应该很简单！

任何想法???

TIA

-kb

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

无法使用ASCX模板在Telerik Grid的弹出编辑器中显示Raw Html

1 个答案: