title: Editable Detail Template Kendo UI Grid
body: <p><strong>Update</strong>
  I have managed to get the form rendering (see image) with values and editor templates.</p>
  
  <p><img src="https://i.stack.imgur.com/xHXHu.png" alt="Sorry for blacked out labels. NDA stuff.">
  Sorry for blacked out labels.  NDA requirements...</p>
  
  <p>This now works across multiple rows because I am using the uid of the row to give the detail template a unique name doing this:</p>
  
  <pre><code>@(Html.Kendo().TabStrip()
      .Name("Details_#=uid#")
  </code></pre>
  
  <p>I've updated the source below to the latest version and have included a list of issues that I'd still love help with.</p>
  
  <p>Outstanding issues:</p>
  
  <ul>
  <li>Serializing the detail template along with the grid when I save changes</li>
  <li>Assign labels and validation rules using Data Annotations on the View Model (This doesn't seem to work since I can't seem to get Html helpers working.  Advice would be great!</li>
  </ul>
  
  <p><strong>Orignal Post text (Source code has been updated)</strong></p>
  
  <p>I am trying to create a Batch Grid where each item contains a detail template.</p>
  
  <p>Each detail template contains a tabstrip that I want to hold extra form data within.</p>
  
  <p>Right now, I have the standard batch grid working, but I can't seem to get the information on screen for each item AND have it be editable. Also, the detail template breaks when more than one row is present.  The template still renders, but buttons are non-functional because both templates have the same id understandably breaking the user's ability to interact, but I'm unsure of how to ensure unique identifiers for each row template (maybe use the parent uid somehow?)</p>
  
  <p>I am also unsure of how to serialize this form data once I have completed this first step, but I can make a separate question for that should it prove necessary.</p>
  
  <p><strong>Grid</strong></p>
  
  <pre><code>@(Html.Kendo().Grid(Model.ItemModelList)
  .Name("ItemGrid")
  .Columns(columns =&gt;
  {
      //Other columns omitted for brevity
      columns.Bound(i =&gt; i.Description).Width(100);
      columns.Command(command =&gt;
      {
          command.Destroy();
      }).Width(60);
  })
  .ClientDetailTemplateId("ItemDetails")
  .ToolBar(toolbar =&gt;
  {
      toolbar.Create();
      toolbar.Save();
  })
  .Editable(editable =&gt; editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
  .Pageable()
  .Sortable()
  .Scrollable()
  .Resizable(resize =&gt; resize.Columns(true))
  .DataSource(dataSource =&gt; dataSource
      .Ajax()
      .Batch(true)
      .ServerOperation(false)
      .Events(events =&gt; 
      {
          events.Error("ItemGrid_ErrorHandler");
      })
      .Model(model =&gt;
      {
          model.Id(i =&gt; i.ItemModelID);
          model.Field(i =&gt; i.DimensionUOM).DefaultValue("in");
          model.Field(i =&gt; i.WeightUOM).DefaultValue("lbs");
      })
      .Create(create =&gt; create.Action("CreateProducts", "ItemGrid"))
      .Read(read =&gt; read.Action("GetProducts", "ItemGrid"))
      .Update(update =&gt; update.Action("UpdateProducts", "ItemGrid"))
      .Destroy(destroy =&gt; destroy.Action("DeleteProducts", "ItemGrid"))
  )
  </code></pre>
  
  <p>)</p>
  
  <p><strong>Detail Template</strong></p>
  
  <pre><code>&lt;script id="ItemDetails" type="text/kendo-tmpl"&gt;
  
  @(Html.Kendo().TabStrip()
      .Name("Details_#=uid#")
      .SelectedIndex(0)
      .Items(items =&gt;
      {
          items.Add().Text("test").Content(@&lt;div&gt;      
              &lt;table id="testForm"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;TEST&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                  &lt;/tr&gt; 
              &lt;/table&gt; 
          &lt;/div&gt;);
  
          items.Add().Text("test2").Content(@&lt;div&gt;      
              &lt;table id="test2Form"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;label&gt;A&lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;label&gt;B&lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;label&gt;C&lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;label&gt;D&lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;label&gt;E&lt;/label&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;input class="k-textbox" value="#=objectA#"&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          @(Html.Kendo().DropDownList()
                              .Name("objectB")
                              .Value("#=objectB#")
                              .DataTextField("Text")
                              .DataValueField("Value")
                              .BindTo(new SelectList((System.Collections.IEnumerable)ViewBag.objectBListing, "Value", "Value"))
                              .ToClientTemplate()
                          )
                      &lt;/td&gt;
                      &lt;td&gt;
                          @(Html.Kendo().DropDownList()
                              .Name("objectC")
                              .Value("#=objectC#")
                              .DataTextField("Text")
                              .DataValueField("Value")
                              .BindTo(new SelectList((System.Collections.IEnumerable)ViewBag.objectCListing, "Value", "Value"))
                              .ToClientTemplate()
                          )
                      &lt;/td&gt;
                      &lt;td&gt;&lt;input class="k-textbox" value="#=objectD#"&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input class="k-textbox" value="#=objectE#"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt; 
          &lt;/div&gt;);
      })
      .ToClientTemplate()
  )  
  </code></pre>
  
  <p></p>