Broken grid in IE8

[Kurt]

Hi guys, I'm using the MVC open-source grid, version 2011.1.315.340

As usual, works great in Chrome, FF, busted in IE. My grid is housed at the bottom of my page, below a form. Interestingly, if I move i to the top of the page, before the form, it works fine. Ha! However, down below it sucks. AND ... I can make it render properly by removing the "delete" button column. With the button column added I get the awful mess in the attached image.

I've wasted my morning trying to fix this problem, hoping you guys have / know of a fix.

Thanks!

Kurt Mang - Vancouver BC

[Kurt]

PS - here's my markup:

<div class="line">

        <% if (Model.Material.Synonyms == null || Model.Material.Synonyms.Count() == 0)

           { %>

            <span>No search term keywords have been defined yet.</span>

 

           <%}

           else

           { %>

 

            <%= Html.Telerik().Grid(Model.Material.Synonyms)

            .Name("grdSynonym")

            .DataKeys(k =>

                {

                    k.Add(s => s.ID).RouteKey("id");

                    k.Add(s => s.MaterialId).RouteKey("materialID");

                })

                .DataBinding(d => d.Ajax().Delete("DeleteMaterialSynonym", "AdminLookupList"))

                .Columns(c =>

                {

                    c.Bound(s => s.Name).Width(200).ReadOnly(true);

                    c.Command(commands =>

                        commands.Delete().ButtonType(GridButtonType.ImageAndText)).Width(200).Title("Delete");

                     

                })

            .Scrollable(scrolling => scrolling.Enabled(true).Height("300px"))

            .Footer(true)

            %>

         <% } %>

        </div>

Commenting out the 'c.Command([lambda ] ...) lines makes the grid render properly ... but I kinda need that :-)

Thanks again

[Dimo]

Hi Kurt,

Judging by your screenshots and provided information, I don't think the problem is caused by the Grid. I would say the specific HTML markup and CSS styles on the page are triggering a browser rendering bug. The fact that the issue occurs depending on the Grid's position with regard to the <form> suggests the same.

You can try validating the HTML markup of the page to make sure there are no unclosed tags or something.

If the problem is visible in IE's compatibility mode (i.e. IE7), you can try triggering hasLayout for some elements on the page to see if it will help.

http://www.satzansatz.de/cssd/onhavinglayout.html

Best wishes,
Dimo
the Telerik team

[Kurt]

Hi Dimo - thanks for your prompt reply. I'll try the hasLayout fix.

That said, I call BS on it being my problem / fault ... proof being that I can make the problem disappear by disabling the button column on the grid. That code is 100% Telerik, and it clearly causes the issue. FYI, I did run the page through an html validator - no busted tags or anything like that.

Consider that removing your code solves the problem ...

Anyways, back to square 1.

Kurt Mang

[Dimo]

Hello Kurt,

A rendering bug in IE can be triggered by a specific combination of HTML and CSS, including inside the Grid and/or outside it. My reason to think that the problem is hasLayout-related and not-only-Grid-related is the following statement:

"My grid is housed at the bottom of my page, below a form. Interestingly, if I move i to the top of the page, before the form, it works fine."

Anyway, discussing whether "our code" or "your code" is to blame does not resolve the issue. Please try fiddling with some zoom styles triggering hasLayout and if you need further assistance, send us a demo to test locally.

Best wishes,
Dimo
the Telerik team

[Kurt]

Dimo - agreed, no help pointing fingers eh? ;-)

Like I said, I'll look into the hasLayout nonsense. I'm a developer dammit, not some tight-jean wearing css jockey!

Kurt

[Kurt]

Solved this problem!

Cause was nested forms on the page. The 'delete' button injected by the grid creates a form in the table cell. Because my grid was wrapped in an outer form, this blew up the grid in IE - that's why moving the grid out of the form (to the top) and / or disablin gthe delete button solved the problem.

I was able to re-orchestrate my page to prevent the grid being wrapped in an outer form, and voila. Hope this helps somebody else.

Kurt

[Kevin]

Kurt,
Thanks for posting your findings / solution!

--Kdc