Grid Group Collapse CSS Issue in IE6?

[Carlos Oliveira]

Hi,

I have been looking at this issue for the best part of 2 days now and have scoured through these forums looking for a pointer or two but to no avail.

Basically I have a programatically created Grid, that has 3 levels of grouping on the page load. I have set the grid to use  GroupLoadMode=Client. When the page first comes up the grid looks great, however as soon as I collapse any of the groups the page styling goes totally AWOL.

For nested groups, the collapse command correctly hides all of the rows within all of the groups however it doesn't hide the nested group headers. It also leaves some of the borders of the original rows still visible on the screen. This is occuring in IE6 (tested in FireFox the page looks fine).

From what I can make out in tools like Firebug and IE Dev Toolbar the display:none and display:table-row commands are being correctly applied on the rows, however the internal DIV's (the other group headers) are not inheriting this value and are remaining present. If I switch the Group Load Mode to Server the issue dissapears, but I want the grid to be responsive for users when they show and hide groups.

These are the main settings I have on my Grid currently:

            reportGrid.Skin = "WebBlue";
            reportGrid.BackColor = Color.White;
            reportGrid.GridLines = GridLines.Vertical;
            reportGrid.PageSize = 50;
            reportGrid.AllowPaging = true;
            reportGrid.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric;
            reportGrid.PagerStyle.Position = GridPagerPosition.Top;

            reportGrid.AutoGenerateColumns = false;
            reportGrid.AllowSorting = true;
            reportGrid.ClientSettings.Resizing.AllowColumnResize = true;
            reportGrid.ClientSettings.Scrolling.AllowScroll = true;
            reportGrid.ClientSettings.Resizing.ResizeGridOnColumnResize = true;
            reportGrid.ClientSettings.ClientEvents.OnGroupCollapsed = "TestHide";
            reportGrid.ClientSettings.ClientEvents.OnGroupExpanded = "TestShow";

            reportGrid.ClientSettings.Scrolling.UseStaticHeaders = true;

            reportGrid.Width = Unit.Percentage(100);
            reportGrid.Height = Unit.Percentage(100);

            reportGrid.MasterTableView.TableLayout = GridTableLayout.Auto;
            reportGrid.MasterTableView.GroupLoadMode = GridGroupLoadMode.Client;

Any help would be massively appreciated.

Thanks,

Carlos

[Dimo]

Hi Carlos,

The problem is exhibited in the following scenarios:

+ there are nested groups and GroupLoadMode="Client"
+ scrolling is enabled and UseStaticHeaders="True"

The issue is caused by a rendering bug in Internet Explorer - the browser continues to display relatively positioned elements inside hidden table rows. We will fix this for one of our next service packs. In the meantime, please use a server group load or disable static headers. When static headers are disabled, the rendering of the group headers is different (more simple) and the issue does not occur.

Greetings,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Carlos Oliveira]

Hi Dimo,

Thanks for the response, at least I know I wasn't going mad!

I have fixed the issue by using some jQuery that fires during the client OnGroupCollapsed and OnGroupLoaded that manually hides the divs. I have attached the 2 functions for anyone else who might encounter this issue:

      function TestHide(sender, args) {
          $(sender.get_masterTableView().get_element()).find('tbody tr:hidden').filter(function() {
              $(this).find('div div div').each(function() {
                  $(this).attr("style", "display:none");
              });
          });


      }
      function TestShow(sender, args) {
          $(sender.get_masterTableView().get_element()).find('tbody tr:visible').filter(function() {
              $(this).find('div div div').each(function() {
                  $(this).attr("style", "position:relative;display:block");
              });
          });
      }

I'm not a jQuery expert so it might be there is a more elegant way of doing this (any suggestions appreciated) but it seems to be doing the trick in all the browsers I have tested.

Thanks,

Carlos

[Dimo]

Hello Carlos,

Possibly a better way to do this workaround is to assign a custom CSS class to all hidden group headers and use the following CSS rule:

.MyCustomCssClass  div
{
       position: static !important ;
       /*   OR   */
      display: none ;
}

This solution will work faster, because it uses a lot fewer DOM element operations - IE is rather slow with these.

Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.