Cannot display Raw Html in Telerik Grid's Popup Editor using an ASCX template

Question

I looked at Telerik MVC3 grid with custom Edit/Insert popup and it was almost there. However, I am trying to figure out how to display some HTML Text that is generated by the Controller for each row in the Grid - but in the Popup-Editor! (I can easily display it in a grid column simply by adding .Encoded(false) to my column definition.)

<%= 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()
%>

I have an ASCX template for the Popup Editor.
enter image description here

Before I populate the Grid, I have to scan each row for each required field and embed a message for every data point that needs attention. I do this in the controller as there are several conditional logics to be taken into account. Once I have a List<string> of messages I iterate the List<string> and produce a simple 4 column HTML table and save that as a string on the row as part of my ViewModel. (Model.RowList[x].UpdateMessage) The HTML string looks like this:

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

My Popup Template basically starts off with:

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

Obviously, displaying HTML in a TextAreaFor box is ugly and not at all what I need/want.
Any version of trying to convert the string to MvcHtmlString does not render the table! <Grrrrr!/>
This really should be simple!

Any ideas???

TIA

-kb

Dusty · Accepted Answer · 2013-06-19 14:50:01Z

1

It seems that the Telerik grid only loads and renders the popup editor template one time, with an empty/default model. For each subsequent popup "edit" command, the grid appears to do its own binding (client side) to only the form fields in the editor template, which explains why your TextArea and hidden fields work, but including inline HTML does not.

I believe the only way around this is to declare a Telerik client (JavaScript) event for OnEdit and dynamically populate the contents of a DIV or other container using that JavaScript event handler.

On your grid declaration in your view:

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

In a <script> block or included .js file from your view:

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

(Note: the above is shown using jQuery shortcuts, but could be done without jQuery if desired)

And finally, in your .ascx EditorTemplate:

<div class="injectUpdateMsgHtmlHere"></div>

answered Jun 19, 2013 at 14:50

Dusty

4,0012 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Keith Barrows Over a year ago

This is exactly how I ended up doing it in the end. Thanks for the clear answer and for matching what I ended up coding last week.

Collectives™ on Stack Overflow

Cannot display Raw Html in Telerik Grid's Popup Editor using an ASCX template

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related