title: Submit form with Kendo MVC Grid and other elements
body: <p>I am trying to get a form containing a Kendo MVC grid and other elements to submit.  </p>
  
  <ul>
  <li>The View model contains contains three string fields and an <code>IEnumerable</code> collection.  </li>
  <li>The grid is server bound.  I am not adding any elements or deleting any elements from the list using the grid but the grid contains a check box mapped to a boolean column in the list items.  </li>
  </ul>
  
  <p>Whenever I submit this form the three string elements return in the post method but the list is always null.  </p>
  
  <p><strong>Here is the data model:</strong></p>
  
  <pre><code>public class Parent
  {
      public string Field1 { get; set; }
      public string Field2 { get; set; }
      public string Comments { get; set; }
      public IEnumerable&lt;ChildItems&gt; Children { get; set; }
  }
  
  public class ChildItems
  {
      public string ChildField1 { get; set; }
      public string ChildField2 { get; set; }
      public boolean Include { get; set; }
  }
  </code></pre>
  
  <p><strong>Here is my View:</strong></p>
  
  <pre><code>@{
      ViewBag.Title = "Index";
  }
  @model GridInForm.Models.Parent
  
  @using(Html.BeginForm("Save", "Home"))
  {
      &lt;fieldset&gt;
          &lt;legend&gt;Editing Parent&lt;/legend&gt;
  
          @Html.LabelFor(parent =&gt; parent.Field1)
          @Html.EditorFor(parent =&gt; parent.Field1)
  
          @Html.LabelFor(parent =&gt; parent.Field2)
          @Html.EditorFor(parent =&gt; parent.Field2)
          @Html.LabelFor(parent =&gt; parent.Comments)
          @Html.EditorFor(parent =&gt; parent.Comments)
          @(Html.Kendo().Grid(Model.Children)
              .Name("Children")
              .ToolBar(tools =&gt; tools.Create().Text("Add new Children"))
              .Editable(editable =&gt; editable.Mode(GridEditMode.PopUp).CreateAt(GridInsertRowPosition.Bottom))
              .Columns(columns =&gt;
              {
                  columns.Bound(p =&gt; p.ChildField1).ClientTemplate("#= ChildField1 #" + 
                      "&lt;input type='hidden' name='ChildField1[#= index(data)#].ChildField1' value='#= Name #' /&gt;"
                  );
  
                  columns.Bound(p =&gt; p.ChildField2).Hidden().ClientTemplate("#= ChildField1 #" +
                      "&lt;input type='hidden' name='ChildField1[#= index(data)#].ChildField1' value='#= ChildField1 #' /&gt;"
                  );
  
                  columns.Command(command =&gt; 
                  {
                      // command.Destroy();
                      command.Edit();
                  }).Width(100);
              })
              .DataSource(dataSource =&gt; dataSource
                  .Server()
                  .Create("Create", "Home")
                  .Read("Index", "Home")
                  .Update("Update", "Home")
                  .Model(model =&gt; 
                  {
                      model.Id(p =&gt; p.ChildField1);
                      model.Field(p =&gt; p.ChildField1).Editable(false);
                  })
                  //.ServerOperation(true)
              )
          )
      &lt;/fieldset&gt;
  
      &lt;input type="submit" value="Save" /&gt;
  }
  
  &lt;script&gt;
      function index(dataItem) {
          alert("bindind");
          var data = $("#Products").data("kendoGrid").dataSource.data();
          return data.indexOf(dataItem);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>When I submit the form, I get the parent items back in the view model but the <code>IEnumerable</code> fields from the grid are always null.</p>
  
  <p>Is this just not the way to do this, and if so what is the way to accomplish something like this?  I have had this issue on previous Telerik versions and I see it is the same on Kendo UI.  Any direction would be greatly appreciated.  This has been a long going on issue.</p>