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

3 posts, 1 answers
  1. Andrew
    Andrew avatar
    15 posts
    Member since:
    Feb 2013

    Posted 24 Dec 2013 Link to this post

    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>
  2. Answer
    Andrew
    Andrew avatar
    15 posts
    Member since:
    Feb 2013

    Posted 26 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Andrew
    Andrew avatar
    15 posts
    Member since:
    Feb 2013

    Posted 26 Dec 2013 Link to this post

    Thanks, 
Back to Top