This is a migrated thread and some comments may be shown as answers.

Local Data Configuration Issue Or IE Bug

2 Answers 17 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 24 Feb 2014, 06:44 PM
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

2 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 26 Feb 2014, 03:33 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian
Top achievements
Rank 1
answered on 26 Feb 2014, 03:47 PM
Daniel,

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

-Brian
Tags
Grid
Asked by
Brian
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Brian
Top achievements
Rank 1
Share this question
or