Kendo grid client detail template rendering issue when using along with popup editor for update

Question

Kendo grid client detail template not rendering properly when using pop up editor for update. I am using Detail template for displaying more columns and editor template for pop up edit. At first, if I open detail template it works fine but if I open popup editor for Add/Update, client detail template messed up and displays columns as in editing mode and layout disturbed as well. When second time popup editor opens, some of the columns styles messed up (such as not displaying numerictextbox).

What am I doing wrong here? Please advise.

At first Client detail template looks like this:

After clicking on edit button, the grid and pop up looks like as below:

My code is as below:

ClientDetailTemplate:

<script id="DisplayTemplate_Bonds" type="text/kendo-tmpl">
<div>
    <table style="width:auto;">
        <tr>
            <td style="vertical-align:top;">
                <table>
                    <tr id='Currency'>
                        <td>Currency</td>
                        <td>Equal To</td>
                        <td>#=CurrencyViewModel.ID#</td>
                    </tr>
                    <tr id='Classification'>
                        <td>Classification</td>
                        <td>Equal To</td>
                        <td>#=ClassificationBoardViewModel.Name#</td>
                    </tr>
                    <tr id='Maturity1'>
                        <td>Maturity</td>
                        <td>Equal To</td>
                        <td>#=kendo.toString(Maturity1, 'n2')#</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

Grid:

@(Html.Kendo().Grid<Models.Bonds_ViewModel>
            ()
            .Name("Bonds_Grid")
            .Columns(c =>
            {
                c.Bound(m => m.ID).Hidden();
                c.Bound(m => m.FilterName)
                    .HtmlAttributes(new { @class = "gridDataColumns" })
                    .Title("Filter Name").HeaderHtmlAttributes(new { @title = "Filter Name" })
                ;
                c.Command(p =>
                {
                    p.Edit().Text(" ").UpdateText(" ").CancelText(" ").HtmlAttributes(new { @title = "Edit this filter" });
                    p.Destroy().Text(" ").HtmlAttributes(new { @title = "Delete this filter" });
                });
            })
            .ToolBar(toolbar =>{toolbar.Create().Text("Add Filter").HtmlAttributes(new { @title = "Add" });})
            .Editable(editable => editable
                .Mode(Kendo.Mvc.UI.GridEditMode.PopUp)
                .TemplateName("Editors/Bonds_Editor")
            )
                .DataSource(dataSource => dataSource
                .Ajax()
                .Model(m =>
                {
                    m.Id(p => p.ID);
                    m.Field(p => p.CurrencyViewModel).DefaultValue(ViewData["DefaultCurrencyViewModel"] as Models.CurrencyViewModel);
                    m.Field(p => p.ClassificationBoardViewModel).DefaultValue(ViewData["DefaultClassificationBoardViewModel"] as Models.ClassificationBoardViewModel);
                })
                .Read(read => read.Action("Bonds_Read", "Phase1"))
                .Create(create => create.Action("Bonds_Create", "Phase1"))
                .Update(update => update.Action("Bonds_Update", "Phase1"))
                .Destroy(destroy => destroy.Action("Bonds_Destroy", "Phase1"))
                )
                .ClientDetailTemplateId("DisplayTemplate_Bonds")
        )

Popup editor:

@model Models.Bonds_ViewModel
@Html.HiddenFor(m => m.ID)
<table id="mainTable">
    <tr>
        <td>@Html.Label("Filter Name")</td>
        <td>@Html.EditorFor(m => m.FilterName)</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
        <td>@Html.Label("Currency")</td>
        <td>@Html.EditorFor(m => m.CurrencyViewModel)</td>
    <td>&nbsp;</td> 
    </tr>
    <tr>
        <td>@Html.Label("Classification")</td>
        <td>@Html.EditorFor(m => m.ClassificationBoardViewModel)</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
        <td>@Html.Label("Maturity")</td>
        <td>@Html.Label("Equal To")</td>
        <td>@(Html.Kendo().NumericTextBoxFor(m => m.Maturity1)
              .HtmlAttributes(new { @class = "textboxFor_Styles", style = "width:90px;" })
              .Format(GAM.BLL.GlobalVaribleDeclarations.DisplayFormatForDecimal)
              .Spinners(true)
            )
        </td>
     </tr>                    
</table>

Answer 1

I have found the issue here. Actually, I had given the same id to the table rows in client detail template as the Controls (NumericTextboxes and others) id. I have changed the ids of the rows and all seems to be working fine.

e.g. in client detail template the row id for the Maturity is

<tr id='Maturity1'> 

which was conflicting with the id assigned automatically to the Maturity NumerictextBox in Popup editor as

<td>@(Html.Kendo().NumericTextBoxFor(m => m.Maturity1)
              .HtmlAttributes(new { @class = "textboxFor_Styles", style = "width:90px;" })
              .Format(GAM.BLL.GlobalVaribleDeclarations.DisplayFormatForDecimal)
              .Spinners(true)
            )
        </td>

Hope this will be helpful to others.