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

[Bob]

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

        }))

        .Name("Grid")

        .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" });

                                    }).Width(85);

            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))

    .Pageable()

    .Scrollable(scrollable => scrollable.Virtual(true).Height(280))

    .Sortable()

    .Filterable()

    .DataSource(dataSource => dataSource

                .Ajax()

                .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.

Help?!

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

[Rosen]

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,
Rosen
the Telerik team

[Felickz]

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?