[Solved] IE7 header column widths when grouping

[Dan Russotto]

Hello,

I've come across a bug where the header columns stop lining up with the rows. This only seems to happen in IE7 and when I use grouping. I've attached a screenshot and created a test project to demonstrate the issue. I reached my CSS sleuth capacity so I'm hoping one of ya'll can figure out what is causing the 1pixel shifts in each column.

Here is a snippet of the grid configuration:

@(Html.Telerik().Grid<Model1>()
                    .DataBinding(i => i.Ajax().Select<HomeController>(controller => controller.SearchLeads()))
                    .Name("Leads")
                    .Groupable()
                    .Pageable(settings => settings.Enabled(true).Style(GridPagerStyles.NextPreviousAndDropDown | GridPagerStyles.PageInput).PageSize(50, new int[] { 10, 50, 100, 250}))
                    .Columns(columns =>
                    {
                        columns.Bound(i => i.Id).Width("5em").Title("Id");
                        columns.Bound(i => i.LastChanged).Title("Last Reviewed").Width("9em");
                        columns.Bound(i => i.LastChangedBy).Title("Last Reviewed By").Width("9em");


                        columns.Bound(i => i.Status).Width("15em");

                        columns.Bound(i => i.CreatedDate).Title("Last Revised").Width("9em");
                        columns.Bound(i => i.CreatedBy).Title("Last Revised By").Width("10em");

                        columns.Bound(i => i.AssignedTo).Title("Assigned To").Width("10em");

                        columns.Bound(i => i.TotalRooms).Width("10em");
                        columns.Bound(i => i.IsMultiProperty).Title("Multi Property?").Width("11em");
                        columns.Bound(i => i.BookingCount).Title(" # of Bookings").Width("11em");
                        columns.Template(m => "").Width("auto");
                        columns.Bound(i => i.Id).Hidden();
                    })

                    .DataKeys(i => i.Add(j => j.Id))
                    .Reorderable(config => config.Columns(true))
                    .Footer(true)
                    .Sortable(config => config.SortMode(GridSortMode.MultipleColumn).OrderBy(config2 => config2.Add(lead=> lead.LastChanged).Descending()))
                    .Filterable(config => config.Enabled(true))
                    .Selectable()
                    .Scrollable(config => config.Enabled(true).Height("30em"))
                   )

[Dimo]

Hello Dan,

Thanks for sending a runnable demo.

Unfortunately, this bug is caused by incorrect browser behavior and is difficult to avoid. The problem is caused by the presence of a first table row, which has all its cells spanned to one. In such cases IE7 does not apply column widths correctly. The widths are rendered correctly in the HTML, but the browser does not obey them.

The layout can be improved by removing or changing column widths. For example I recommend you to remove the column widths from the first several columns. This approach, alas, does not guarantee success and some trial-and-error is required. Generally, the fewer the columns, the less the problem is visible. For example, if you add scrolling to the following demo, the columns will be almost aligned:

http://demos.telerik.com/aspnet-mvc/grid/aggregatesajax

A better option than fiddling with the widths, is to serve different Grid configuration for IE7. If you remove all column widths and set some large-enough table width, the columns will align perfectly (and be equally wide). Below is an example.

You can see how server-side browser detection is implemented in the following demo:

http://demos.telerik.com/aspnet-mvc/grid/columnresizing

.TableHtmlAttributes(new { style = "width:" + (Request.Browser.Browser == "IE" &&
            Request.Browser.MajorVersion < 8 ? "1200px" : "100%") })

@(Html.Telerik().Grid<Model1>()
    .DataBinding(i => i.Ajax().Select<HomeController>(controller => controller.SearchLeads()))
    .Name("Leads")
    .Groupable()
    .TableHtmlAttributes(new { style = "width:1400px" })
    .Pageable(settings => settings.Enabled(true).Style(GridPagerStyles.NextPreviousAndDropDown | GridPagerStyles.PageInput).PageSize(50, new int[] { 10, 50, 100, 250}))
    .Columns(columns =>
    {
        columns.Bound(i => i.Id).Title("Id");
        columns.Bound(i => i.LastChanged).Title("Last Reviewed");
        columns.Bound(i => i.LastChangedBy).Title("Last Reviewed By");


        columns.Bound(i => i.Status);

        columns.Bound(i => i.CreatedDate).Title("Last Revised");
        columns.Bound(i => i.CreatedBy).Title("Last Revised By");

        columns.Bound(i => i.AssignedTo).Title("Assigned To").Width("100px");

        columns.Bound(i => i.TotalRooms).Width("100px");
        columns.Bound(i => i.IsMultiProperty).Title("Multi Property?").Width("110px");
        columns.Bound(i => i.BookingCount).Title(" # of Bookings").Width("110px");
        columns.Template(m => "");
    })
    .ClientEvents(ev => ev.OnDataBound("addNbsp"))
    .DataKeys(i => i.Add(j => j.Id))
    .Reorderable(config => config.Columns(true))
    .Footer(true)
    .Sortable(config => config.SortMode(GridSortMode.MultipleColumn).OrderBy(config2 => config2.Add(lead=> lead.LastChanged).Descending()))
    .Filterable(config => config.Enabled(true))
    .Selectable()
    .Scrollable(config => config.Enabled(true).Height("300px"))
)

You may notice the client OnLoad handler above. Since you have empty table cells, you also need to following workaround to tackle with another IE7 problem, namely, missing borders of empty cells.

function addNbsp(e)
{
    $("td,th", this).filter(":empty").html(" ");
}

Regards,
Dimo
the Telerik team