Local Data Configuration Issue Or IE Bug

[Brian]

I recently switched my grid from using the .Read() method to binding to local data.  My grid works fine when there are no items in my IEnumerable to start with.  When I have an item in my IEnumerable, I see two grid areas in IE9, and the submit buttons on my form don't work.  I don't see this behavior in Firefox 27.0.1 or in Chrome.  If I switch back to using the .Read() method the grid displays fine, but I would like to use the local option.  Do I have a configuration issue in my grid that only affects IE with local data, or is this an IE bug?  I have attached an image of how the grid is rendered in IE 9.

Here is my grid configuration:

@(Html.Kendo().Grid<AccountManagement.Business.ViewModels.Areas.DM.RehireDocumentSettingViewModel>(Model.RehireDocuments)
                    .Name("DocumentSettings")
                    .Columns(columns =>
                    {
                        columns.Bound(ds => ds.Form)
                            .ClientTemplate("#= data.Form.Description #" +
                                "<input type='hidden' name='DocumentSettings[#= index(data)#].Form.FormID' value='#= data.Form.FormID #' />"
                            );
                        columns.Bound(ds => ds.DocumentDateType)
                            .ClientTemplate("#= DocumentDateType.Description #" +
                                "<input type='hidden' name='DocumentSettings[#= index(data)#].DocumentDateType.RehireDocumentDateType' value='#= DocumentDateType.RehireDocumentDateType #' />"
                            );
                        columns.Bound(ds => ds.RemoveIfOlderThanDays)
                            .ClientTemplate("#= RemoveIfOlderThanDays #" +
                                "<input type='hidden' name='DocumentSettings[#= index(data)#].RemoveIfOlderThanDays' value='#= RemoveIfOlderThanDays #' />"
                            );
                        columns.Command(command => command.Destroy());
                    }
                    )
                    .ToolBar(toolbar =>
                    {
                        toolbar.Create().Text(AccountManagement.Resources.AccountManagementResources.AddRehireDocumentSettingButtonText);
                    })
                    .Navigatable()
                    .Sortable()
                    .Scrollable()
                    .Editable(editable => editable.Mode(GridEditMode.InCell))
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Batch(true)
                        .ServerOperation(false)
                        .Events(events => events.Error("error_handler"))
                        .Model(model =>
                            {
                                model.Id(ds => ds.Form.FormID);
                                model.Field(ds => ds.Form).DefaultValue(
                                    ViewData["defaultForm"] as AccountManagement.Business.ViewModels.Areas.DM.FormViewModel);
                                model.Field(ds => ds.DocumentDateType).DefaultValue(
                                    new AccountManagement.Business.ViewModels.Areas.DM.RehireDocumentDateTypeViewModel() {
                                        RehireDocumentDateType = AccountManagement.Models.RehireDocumentDateType.DateTypeNotSpecified
                                    }
                                );
                            }
                        )
                    )
                )

Thanks,
Brian

[Daniel]

Hello Brian,

The problem will occur because when the data is bound on the server, a form is rendered for each delete button(so that the record can be posted when using server editing) and nested forms are not supported by the browsers. In older versions of IE, the main form outside of the grid will be closed when the first nested form for the delete button is reached. If the data should be bound initially on the server then the simplest option to avoid this behavior is to use a template column instead of a destroy command and render just a link instead of a form with a submit button e.g.

.Columns(columns =>
{
    ...
    columns.Template(p => { }).ClientTemplate("<a class='k-button k-button-icontext k-grid-delete' href='\\#'><span class='k-icon k-delete'></span>Delete</a>");
}
)

Regards,
Daniel
Telerik

[Brian]

Daniel,

Thanks for the explanation and excellent solution.  This works and looks great in IE 9, Firefox, and Chrome.

-Brian