Can't get inline editing to work with a Grid nested in a TabStrip

[Andrew]

I have a grid with a nested TabStrip and a Grid nested in the TabStrip. Everything works fine until I add in-line editing to the nested tabstrip grid then I get :
Uncaught ReferenceError: CONTACT_ID is not defined.    Any help would be appreciated Heres my code.

@using Kendo.Mvc.UI
@{
    ViewBag.Title = "ManageAlarms";
}
<h2>ManageAlarms</h2>
@section PageSpecificNavBarLinks
{
    @Html.Partial("~/Views/Shared/_PageSpecificNavBarLinks.cshtml")

}
   @(Html.Kendo().Grid<ALARM>()
           .Name("Grid")
           .Columns(columns =>
           {
               columns.Bound(p => p.ALARM_ID).Visible(false);
               columns.Bound(p => p.FIELD_NAME).Visible(true).Title("Alarm Name");
               columns.Bound(p => p.OBJECT_TYPE).Visible(true).Title("Type");
               columns.Bound(p => p.OBJECT_ID).Visible(true).Title("Object ID");
               columns.Bound(p => p.THRESHOLD_LOWER).Visible(true).Title("Threshold Lower");
               columns.Bound(p => p.THRESHOLD_UPPER).Visible(true).Title("Threshold Upper");
               columns.Bound(p => p.IS_ACTIVE).Visible(true).Title("ON/OFF");
               columns.Command(command => { command.Edit(); });
           })
           .Editable(editable => editable.Mode(GridEditMode.InLine))
           .Pageable()
           .Sortable()
           .Scrollable()
           .ClientDetailTemplateId("template")
           .HtmlAttributes(new {style = "height:800px;"})
           .DataSource(dataSource => dataSource
               .Ajax()
               .PageSize(20)
               .Events(events => events.Error("error_handler"))
               .Model(model => model.Id(p => p.ALARM_ID))
               .Model(model => model.Field(p => p.FIELD_NAME).Editable(false))
               .Model(model => model.Field(p => p.OBJECT_TYPE).Editable(false))
               .Model(model => model.Field(p => p.OBJECT_ID).Editable(false))
               .Model(model => model.Field(p => p.THRESHOLD_LOWER).Editable(true))
               .Model(model => model.Field(p => p.THRESHOLD_UPPER).Editable(true))
               .Model(model => model.Field(p => p.IS_ACTIVE).Editable(true))
               .Read(read => read.Action("GetAllAlarms", "Alarm"))
               .Update(update => update.Action("EditingInline_Update", "Alarm"))
           )
       
   )
  <script id="template" type="text/kendo-tmpl" >
        @(Html.Kendo().TabStrip()
              .Name("tabStrip_#=ALARM_ID#")
              .SelectedIndex(0)
              .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
              .HtmlAttributes((new {style = "width:1000px;"}))
              .Items(items =>
              {
                  items.Add().Text("Email List").Content(@<text>
                    @(Html.Kendo().Grid<AllworxCRAModel.CONTACT>()
                          .Name("grid_#=ALARM_ID#")
                          .Columns(columns =>
                          {
                              columns.Bound(o => o.CONTACT_ID).Visible(false);
                              columns.Bound(o => o.FIRST_NAME).Title("First Name");
                              columns.Bound(o => o.LAST_NAME).Title("Last Name");
                              columns.Bound(o => o.EMAIL).Title("Email");
                              columns.Command(command => { command.Edit(); command.Destroy(); });
                          })
                          .Editable(editable => editable.Mode(GridEditMode.InLine))
                          .Pageable()
                          .Sortable()
                          .Scrollable()
                          .HtmlAttributes((new {style = "width:950px;"}))
                          .DataSource(dataSource => dataSource
                              .Ajax()
                              .PageSize(20)
                              .Events(events => events.Error("error_handler"))
                              .Model(model => model.Id(p => p.CONTACT_ID))
                              .Model(model => model.Field(p => p.FIRST_NAME).Editable(true))
                              .Model(model => model.Field(p => p.LAST_NAME).Editable(true))
                              .Model(model => model.Field(p => p.EMAIL).Editable(true))
                              //.Create(update => update.Action("EditingInline_Create", "Alarm"))
                              .Read(read => read.Action("GetEmailList", "Alarm", new {alarmID = "#=ALARM_ID#"}))
                              .Update(update => update.Action("EditingInline_Update", "Alarm", new {alarmID = "#=ALARM_ID#"}))
                              .Destroy(update => update.Action("EditingInline_Destroy", "Alarm", new {contactId = "#=CONTACT_ID#", alarmID = "#=ALARM_ID#"}))
                          ).ToClientTemplate()
                          )
                </text>
                      );
      items.Add().Text("Add Contact").Content(
               @<text>
                   <fieldset>
                            <legend style="color:blue;font-weight:bold;">Add New Contact</legend>
                            <table>
                            <tr>
                            <td><span style="text-decoration:underline">F</span>irst Name:</td>
                            <td><input type="text" name='firstName#=ALARM_ID#' id='firstName#=ALARM_ID#' size="30" value="" class="text-input" /></td>
                            </tr>
                            <tr>
                            <td><span style="text-decoration:underline">L</span>ast Name:</td>
                            <td><input type="text" name='lastName#=ALARM_ID#' id='lastName#=ALARM_ID#' size="30" value="" class="text-input" /></td>
                            </tr>
                            <tr>
                            <td><span style="text-decoration:underline">E</span>mail Address:</td>
                            <td><input type="text" name='email#=ALARM_ID#' id='email#=ALARM_ID#' size="30" value="" class="text-input" /></td>
                            </tr>
                            </table> 
          </fieldset>
          <fieldset>
               <legend style="color:blue;font-weight:bold;">Select From Existing Contact</legend>
                         @(Html.Kendo().DropDownList()
                               .Name("email_#=ALARM_ID#")
                               .OptionLabel("Select a contact...")
                               .DataTextField("EmailName")
                               .DataValueField("EmailID")
                               .HtmlAttributes(new {style = "width:400px"})
                               .DataSource(source =>
                               {
                                   source.Read(read =>
                                   {
                                       read.Action("GetEmailAddress", "DropdownMenus", new {area = "Shared"});
                                   });
                               }).ToClientTemplate()
                               )                   
               </fieldset>
                      <button onclick="onSubmit('#=ALARM_ID#')">Add Contact</button>                                 
               </text>
               );
              }).ToClientTemplate()
              )
</script>

  <script>
    $(document).ready(function () {
       
   });
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
    
    function onSubmit(data) {
        var alarmid = data.toString();
        var firstname = $("input#firstName" + alarmid).val();
        var lastname = $("input#lastName" + alarmid).val();
        var email = $("input#email" + alarmid).val();
        var dropdownlist = $("#email_" + alarmid).data("kendoDropDownList");
        var emailDropdown = dropdownlist.text();

        $.ajax({
            type: 'POST',
            data: JSON.stringify({  fname: firstname, lname: lastname, email: email, alarmId: alarmid }),
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            url: '/Alarm/AddContact',
            complete: function (msg) {    
                if (msg.responseText == "Success") {
                    $("input#firstName" + alarmid).val("");
                    $("input#lastName" + alarmid).val("");
                    $("input#email" + alarmid).val("");
                    $("#email_" + alarmid).val("").data("kendoDropDownList").text("Select a contact...");
                }
            }
        });
    }
   
</script>

  <style scoped="scoped">
    .k-detail-cell .k-tabstrip .k-content {
        padding: 0.2em;
    }
    .contact-details ul
    {
        list-style:none;
        font-style:italic;
        margin: 15px;
        padding: 0;
    }
    .contact-details ul li
    {
        margin: 0;
        line-height: 1.7em;
    }

    .contact-details label
    {
        display:inline-block;
        width:90px;
        padding-right: 10px;
        text-align: right;
        font-style:normal;
        font-weight:bold;
    }
</style>

  <script type="text/javascript">
    function error_handler(e) {    
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function() {
                        message += this + "\n";
                    });
                }
            });        
            alert(message);
        }
    }
</script>

[Petur Subev]

Hello Andrew,

There are two issues with your code:

• The expression is evaluated by the outer Grid where such CONTACT_ID field does not exist, if you want it to be evaluated by the inner one you should escape the sharp symbols 
  e.g. #=foo  # should become \\#= foo \\#
• You have used the expression #= CONTACT_ID # within the dataSource configuration - this wont be evaluated by the inner Grid. However the whole dataItem is sent to the server so you will receive that CONTACT_ID field anyway, so I would suggest you to just remove it.

Kind Regards,
Petur Subev
Telerik

[Andrew]

Thanks,