Problem using Grid-Buttons inside Html.BeginForm()

[Christoph]

Dear Telerik Support,

I have a problem using the Telerik Grid inside of a Html.BeginForm(). My Grid is bound to a IList<Object> collection of my ViewModel.
I have a HTML form that contains several grids (which are bound to collections of the ViewModel) and several TextBoxes to edit the model data. To update the model completely, all grids and textboxes are covered in a using Html.BeginForm("Edit", "Project") tag.
I would like to edit and update the values of the objects of each grid inline in the grids. For that, I have added the Update, Edit commands and bound them serverside. This worked perfectly with the following grid before I inserted the Html.BeginForm() tag.

My grid looks like this:

Html.Telerik().Grid(Model.PartnersAfghanistan)
  .Name("grdPartnerAfghanistan")
  .DataKeys(keys => keys.Add(c => c.Id))
  .Editable(editing =>   editing.DisplayDeleteConfirmation(false).Mode(GridEditMode.InLine).Enabled(true))
  .Localizable("DE-de")
  .DataBinding(dataBinding => dataBinding.Server()
     .Select("EditGridObject", "Projects", new { id = Model.ProjectData.Id })
     .Update("UpdateGridObject", "Projects", new { projectDataId = Model.ProjectData.Id, gridObjectType = "PartnerAfghanistan" }))
    
      columns.Bound(o => o.Name).Width(400) //Name of partner in Afghanistan
      columns.Command(commands =>
      {
             commands.Edit().ButtonType(GridButtonType.Text);
      }).Width(100).Title("Commands");

When I click on update, the ActionResult "UpdateGridObject" of my controller is called and I can read out the objects name by using Request.Form["Name"] and I update the name of the object by using its id (but do not save this to database to be able to rollback all actions). The ViewModel collection is now updated.

But after inserting the Html.BeginForm("Edit", "Project") tag, that is used to control the global form submit button the update button of the grid now has the route of the Html.BeginForm Tag ("Edit", "Project") and does not acces the route <"UpdateGridObject", "Projects"> anymore. The problem is, that there can only be one submit button inside a HTML form I think. How can I manipulate the grid buttons, that they access the route <"UpdateGridObject", "Projects"> like they did before?

Do I have to change from grid buttons to ActionLinks? If yes, how can I pass the current data of the column to my controller?
Do you have any solution to solve my problem?

Currenty I try to use custom templates instead of the buttons like this:

 columns.Template(o =>
    { %>
             <%: Html.TextBox("grdPartnerAfghanistan" + o.Id.ToString(), o.Name, new { style = String.Format("Width{0}px", 300) })%>
             <%= Html.ActionLink("Save", "UpdateGridObject", new { id = o.Id, projectDataId = Model.ProjectData.Id, gridObjectType =  "PartnerAfghanistan",  value = o.Name })%>
             <%= Html.ActionLink("Delete", "DeleteGridObject", new { id = Model.ProjectData.Id, gridObjectId = o.Id, gridObjectType = "PartnerAfghanistan" })%>   
    <%
  }).Width(400).Title("Edit");

But the problem is, how can I get the current value of the TextBox to pass it to my controller? The textbox has an unique id and name ("grdPartnerAfghanistan" + o.Id.ToString())? The value I give to my controller (o.Name) is not the changed value, but the old value of the object and this does not help me out. Is there a possibility to read out the textbox value and pass it to my controller?

I would be very glad, if you can give me an answer, because I'm totally stucked with this problem and I am time-pressed.

Thanks
Christoph

[Atanas Korchev]

Hello Christoph,

 Command buttons render form tags during server binding. Nested forms are not supported by the HTML standard. You can either try with ajax binding or move the grid out of the form tag.

Regards,
Atanas Korchev
the Telerik team