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

"Strange" duplicate grid when adding .Destroy() command button.

2 Answers 54 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Bob asked on 26 Nov 2012, 04:52 PM
Here is my code:
    @(Html.Kendo().Grid(Model.Select(hp => new HCS.Web.Models._HealthPlan()
            ID = hp.ID,
            LegalName = hp.LegalName,
            FriendlyName = hp.FriendlyName,
            HasAdditionalTerms = hp.HasAdditionalTerms,
            AdditionalTermsFilename = hp.TermsFile,
            CommunicationFolder = hp.CommunicationFolder,
            ContactEmail = hp.ContactEmail,
            ContactName = hp.ContactName,
            ContactPhone = hp.ContactPhone,
            HHSHealthPlanID = hp.HHSHealthPlanID
        .Columns(columns =>
            columns.Bound(p => p.ID).Visible(false);
            columns.Command(c => {
                                    c.Edit().Text(" ").HtmlAttributes(new { style = "width:30px; min-width:12px", title = "Click to Edit" });
                                    //c.Destroy().Text(" ").HtmlAttributes(new { style = "width:30px; min-width:12px", title = "Click to Delete" });
            columns.Bound(p => p.LegalName).Title("Legal Name").Width(300);
            columns.Bound(p => p.FriendlyName).Title("Friendly Name").Width(120);
            columns.Bound(p => p.HasAdditionalTerms).Title("Additional Terms").Width(140);
            columns.Bound(p => p.AdditionalTermsFilename).Title("Additional Terms File").Width(200);
            columns.Bound(p => p.ContactName).Title("Contact Name").Width(120);
            columns.Bound(p => p.ContactPhone).Title("Contact Phone").Width(120);
            columns.Bound(p => p.ContactEmail).Title("Contact Email").Width(150);
            columns.Bound(p => p.HHSHealthPlanID).Title("HHS Health Plan ID").Width(150);
    .ToolBar(tb => tb.Create().Text("Add New Health Plan"))
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Scrollable(scrollable => scrollable.Virtual(true).Height(280))
    .DataSource(dataSource => dataSource
                .Model(model => model.Id(p => p.ID))
                .Create(update => update.Action("EditingInline_Create", "Grid"))
                .Read(read => read.Action("EditingInline_Read", "Grid"))
                .Update(update => update.Action("EditingInline_Update", "Grid"))
                .Destroy(update => update.Action("EditingInline_Destroy", "Grid")))
With the c.Destroy() command commented out, the page looks like ss1.png, with the c.destroy() included the page looks like ss2.png.


Only happens in IE9. Firefox, Chrome, Opera, and Safari all display correctly.

2 Answers, 1 is accepted

Sort by
Telerik team
answered on 29 Nov 2012, 08:52 AM
Hi Bob,

Could you please verify that the Grid is not placed within a form element. The delete command button, when rendered from the server, will be wrapped inside a form element. As you may know having nested form elements is not valid html and is not supported by the browsers. In order to correct this you should either place the Grid  widget outside of the form element, or consider using only ajax binding (remove the Data passed via the Grid declaration).

All the best,
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Top achievements
Rank 2
answered on 06 Nov 2013, 01:50 PM
bit by this as well... only seems to render strange in IE9 ..  Chrome / IE10 seem to handle this scenario better.

Is there any way to switch off the injection of the form, in the scenario where we only support JavaScript enabled grids?
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Top achievements
Rank 2
Share this question