[Solved] Problem with Detele command in MVC grid

[Andres]

I'm having some trouble with the rendering of an MVC Telerik grid. The grid seems to work fine, but if I include the Delete() command in the Commands column, I get the very first delete command from the first record of the grid showing above the footer, while the rest of the row (and all following rows) show below the footer.

My Telerik grid invocation is:

    <%= Html.Telerik().Grid<VideoProjectMemberModel>(Model.Members)
            .Name("MembersGrid")
            .PrefixUrlParameters(false)
            .DataBinding(dataBinding => dataBinding
                .Ajax()
                .Select("_AjaxBindingMembers", "VideoProjectManager", new { projectId = Model.Id })
                .Insert("_AjaxInsertMembers", "VideoProjectManager", new { projectId = Model.Id })
                .Delete("_AjaxDeleteMembers", "VideoProjectManager")
                .Update("_AjaxDeleteMembers", "VideoProjectManager"))
            .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText))
            .DataKeys(keys => keys.Add(p => p.Id))
            .Editable(editing => editing.Mode(GridEditMode.InLine))
            .Columns(columns =>
            {
                columns.Command(commands =>
                {
                    commands.Delete().ButtonType(GridButtonType.ImageAndText);
                    commands.Edit().ButtonType(GridButtonType.ImageAndText).HtmlAttributes(new { @style = "display:none;" });
                }).Width(185).Title("Commands");
                columns.Bound(p => p.MemberType).Width(70);
                columns.Bound(p => p.UserEmail).Width(345);
                columns.Bound(p => p.UserName).Width(200);
                columns.Bound(p => p.UserId).HeaderHtmlAttributes(new { @style = "display:none;" }).HtmlAttributes(new { @style = "display:none;" });
                columns.Bound(p => p.VideoProjectId).HeaderHtmlAttributes(new { @style = "display:none;" }).HtmlAttributes(new { @style = "display:none;" });
            })
            .Groupable()
            .Pageable(paging => paging.PageSize(50))
            .Sortable(sort => sort.OrderBy(sorting => sorting.Add(p => p.UserName).Ascending()))
            .Filterable()
            .ClientEvents(events=> {
                events.OnEdit("onMembersAdd");
            })
    %>

And what I finally get is what shows in the attached file.

I've already tried these approaches:

1. I've removed the HtmlAttrobutes hiding the Edit command (I hide it because I need the grid to be able to insert new records and delete records, but not edit them; I had to include the column because the Insert and Cancel buttons I use in the Insert operation are rendered in the Edit column). The grid displays with the same error.
2. If I remove the Delete command after what I did in step 1, the grid shows fine (so the problem is just with the Delete command, not with any command).
3. If I remove all commands, the grid also displays fine.

Any ideas?

[Eric]

We are having exactly the same problem as described in the previous post.
Is there a chance of a hotfix available right now?
Appreciate any feedback.
Thanks.

[Atanas Korchev]

Hi,

 This problem occurs if the grid is nested in a form tag. The server side delete command generates a form tag itself which causes invalid markup as nested forms are not supported. You should either move the grid out of the form tag or avoid using server binding with delete commands.

Regards,

Atanas Korchev
the Telerik team

[Eric]

It seems that this does not follow the design of the rest of the buttons (Select/Edit), as it is only when Delete is present that this extra nested form tag is rendered?  From a needs perspective, we have a large need to have the grids within forms many times more than not.  I'm curious as to why delete is the only one who creates an inline form?  I'm also equally curious as to if only the server bound command has this behavior...

Thanks for your attention to this matter!

[Atanas Korchev]

Hi Eric,

 The server side delete command renders a form because it needs to be able to do an HTTP post even when JavaScript is disabled. The only way to issue HTTP post is by using a FORM element. If ajax binding is enabled then JavaScript would be enabled too. There is no need to generate a form in that case because we can make an ajax post request with JavaScript.

All the best,
Atanas Korchev
the Telerik team

[benoit]

Hello,

I understand your explanations but they are somehow misleading because Andres has the problem but he uses Ajax binding. By the way, I also have the same problem, and I also use the ajax binding.

Is there something I don't understand? To enable ajax binding, we only need to do that:
.DataBinding(dataBinding => dataBinding.Ajax().Delete("_AjaxDeleteMembers", "VideoProjectManager")
?

Thank you

[Atanas Korchev]

Hello Benoit,

 The grid is initially bound server side:

<%= Html.Telerik().Grid<VideoProjectMemberModel>(Model.Members)

If you change it to this

<%= Html.Telerik().Grid<VideoProjectMemberModel>()

a <form> element will no longer be rendered.

Regards,
Atanas Korchev
the Telerik team

[benoit]

You are right. My mistake.

Thank you.