Display html markup as string in telerik grid bound column

Question

I am using the telerik editor to store formatted strings and display messages. What i did was first bind the model to a grid. On clicking edit, i open a ajax telerik editor that stores the string as html decoded string in database.

My problem is that this message field is bound column in telerik grid. I'm trying to display the decoded html as a html rendered string and not display the markup.

Model:

    public class MessageViewModel
    {
        public string Id { get; set; }

        public string MessageType { get; set; }

        public string MessageTitle { get; set; }

        public string MessageText { get; set; }
}

Controller:

[GridAction]
public ActionResult MessageAdministration(GridCommand command)
{
    var msgList=MessageRepository.GetMessages();
    IEnumerable<MessageViewModel> messageVM = AutoMapper.Mapper.Map<IEnumerable<MessageViewModel>>(msgList);
    return View(new GridModel
    {
        Data = messageVM,
        Total = messageVM.Count()
    });

View:

@{Html.Telerik().Grid<.Web.Models.MessageViewModel>()
    .Name("MessageGrid")
    .Columns(columns =>
    {
        columns.Bound(m => m.Id).Hidden().HtmlAttributes(new { @class = "messageid" });
        columns.Bound(m => m.MessageType);
        columns.Bound(m => m.MessageTitle);
        columns.Bound(m => m.MessageText);
}

Grid column displays:

<p><span style="color:#ed1c24;">RED</span></p>

I want it to display RED with a red background.

Answer 1

I got it. I modified the view. Created a javascript function to get the data in the row and set the td html to the html that is stored in the db.

View:

**<script type="text/javascript">
    //@@mesagerowbound.js        

    function OnRowDataBound(e) {
        var grid = $(this).data('tGrid');
        var row = e.row;
        var dataItem = e.dataItem;
        var html = e.dataItem.MessageText;
        $(row).find(".messagetextcolumn").html(html);
    }
    </script>**

@{Html.Telerik().Grid<LARHC.Web.Models.MessageViewModel>()
    .Name("MessageGrid")
    .Columns(columns =>
    {
        columns.Bound(m => m.Id).Hidden().HtmlAttributes(new { @class = "messageid" });
        columns.Bound(m => m.MessageType);
        columns.Bound(m => m.MessageTitle);
        **columns.Bound(m => m.MessageText).Width(100).HtmlAttributes(new { @class = "messagetextcolumn" });**
        columns.Bound(m => m.ActivationDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(m => m.ExpirationDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(m => m.Status).Title("Status");
        columns.Bound(m => m.UserName);
                columns.Command(commands =>
        {
            commands.Edit()
                .ButtonType(GridButtonType.ImageAndText);
            commands.Delete()
            .ButtonType(GridButtonType.ImageAndText);
        })
                        .HtmlAttributes(new { @class = "namecmdcolumn" })
                        .Width(50)
                        .Title("Commands");
    })
    .DataBinding(dataBinding =>
    {
        dataBinding.Ajax()
            .Select("GetMessages", "Admin")
            .Insert("NewMessage", "Admin")
            .Update("SaveMessage", "Admin")
            .Delete("DeleteMessage", "Admin");
    })

        .ClientEvents(events => events
            .OnEdit("onMessageEdit")
            .OnRowDataBound("OnRowDataBound")
            )
    .Render();
}