[Solved] Grid inside BeginForm posts to the wrong action when deleting a row

[Uwe]

Having the following code (stripped down version):

@using (Html.BeginForm(@"Store", @"Admin", FormMethod.Post))

{

    @(Html.Kendo().Grid((IEnumerable<MyModel>) ViewBag.MyItems)

         .Name(@"grid")

         .Columns(columns =>

         {

             columns.Bound(pg => pg.Id).Visible(false);

             columns.Bound(pg => pg.Name).Template(
                      c => Html.ActionLink(c.Name, @"Details", new {id = c.Id}));

             columns.Command(
                      commands => commands.Destroy().Text("Delete")).Title("Delete");

         })

         .Pageable()

         .Sortable()

         .DataSource(

              dataSource => dataSource

               .Server()

               .Model(model => model.Id(p => p.Id))

               .Destroy(d => d.Action(@"Item_Destroy", @"Admin")))

         )

}

I do experience the following (wrong) behavior:

1. User clicks the "Delete" button.
2. The "Store" action of the "BeginForm" is being called, instead of the "Item_Destroy" action.

My question:

What have I done wrong in my view?

[Daniel]

Hello,

When binding the data on the server the Grid uses a form for the delete button and nested forms are not supported by the browsers. You should either use Ajax editing and bind the data entirely with Ajax so that a form is not used or move the Grid out of the form.

Regards,
Daniel
Telerik

[Uwe]

Somewhat related in my case and just as a references for others, one can have the form's submit button outside the BeginForm area.