ajax editing in Telerik Grid, Display Templates are not rendered when update the row.

Question

I have a telerik grid, when I edit a row: but if i pressed the update button or even cancel(watch the mid column):

here is the declaration:

    <%= Html.Telerik().Grid<AlefTech.HumanResource.WebModule.ViewDto.MaritialStatusItemEditDto>(Model)
        .Name("Grid")
        .DataKeys(keys => { keys.Add(c => c.MaritialStatusItemID); keys.Add(k => k.Index); })
        .Columns(columns =>
        {
            //columns.Bound(m => m.MaritialStatusItemID).Visible(false);
            columns.Bound(m => m.Index).Title("").Sortable(false).Width(0);
            columns.Bound(m => m.Name);
            //columns.Bound(m => m.Brithdate).Width(130).Format("{0:d}");
            //columns.Bound(m => m.Gender);
            columns.Bound(m => m.MaritialStatusItemType);
            //columns.Bound(m => m.Notes);
            //columns.Bound(m => m.Status);
            //columns.Bound(m => m.CreationDate);
            //columns.Bound(m => m.ItemGuid);//.ClientTemplate("<input type='hidden' value='<#ItemGuid#>' name='ItemGuid' id='WorkerID'>");
            columns.Command(command => { command.Edit(); command.Delete(); });
        })
       //.ClientEvents(cfg => cfg.OnDataBound("onRowDataBound"))
        .ToolBar(t => t.Insert())
        .DataBinding(d => d.Ajax()
            .Select("MartialStatusGridSelect", "Worker")
            .Insert("MartialStatusGridInsert", "Worker")
            .Update("MartialStatusGridUpdate", "Worker")
            .Delete("MartialStatusGridDelete", "Worker"))
        .Scrollable()
       .Editable(editing => editing.Enabled(true))
        .Sortable()
        .HtmlAttributes(new { @class = "t-grid-rtl", @hegiht = "450px" })
        .Pageable()

%>

and the Model :

   public class MaritialStatusItem : BaseEntity
    {
        [StringLength(50)]
        [Required]
    public virtual string Name { get; set; }

        [UIHint("MaritialStatusEnum")]
        public virtual MilitaryStatusEnum MaritialStatusItemType { get; set; }
    }

the Display Template MaritialStatusEnum.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%=((MilitaryStatusEnum)Model == .MilitaryStatusEnum.Serving)? "Serving" : "Finished"
%>

the Editor Template

   <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AlefTech.HumanResource.Core.MartialStatusEnum>" %>
    <%=Html.DropDownList("MartialStatus", new SelectListItem[] { new SelectListItem { Text = "Serving", Value = "0" }, new SelectListItem { Text = "Finished", Value = "1" } }) %>

any Ideas why this happenning??

Answer 1

well, I solved the problem using the way mentioned in this topic as following :

columns.Bound(m => m.MaritialStatusItemType).ClientTemplate("<#= maritialStatusItemEnum[MaritialStatusItemType] #>");
.
.
.
<script type="text/javascript">
var maritialStatusItemEnum = ["Single person", "Married Person", "Divorced Person", "Widowed"];
</script>

and notice this is a solution for an Enum property, but if you have a complex object, you should consider another solution.