[Solved] RadGrid Create spacer between columns (only IE8)

[Patric Forsgard]

Hi.

When implementing RadGrid and set the following properties from c# it will almost work correct.

grid.ClientSettings.Scrolling.AllowScroll = true;

grid.ClientSettings.Scrolling.UseStaticHeaders = true;

IE8 (Withoud compability mode) will render a blank spacer between 2 columns. See attached file and the spacer between columns is in the red rectangle. FF, Safari and Chrome will all render the grid correct.

Can I recalculate the column width, with javascript, to avoid the spacer or any other suggestions?

// Patric

[Dimo]

Hi Patric,

The observed behavior is caused by a browser bug. IE8 has a problem with fixed-layout tables in the case when they are initially displayed in a very small area and then expanded - gaps between the column headers appear. This is usually reproduced when RadGrid is placed inside a RadSplitter with a percentage dimensions. Possible (but not always applicable) workarounds include setting pixel widths for all columns, using an auto layout for the MasterTableView, setting a pixel width to the parent splitter pane, removing RadGrid cell paddings.

Untill we find a better way to resolve the problem, here is a workaround:

 

 

1. Set a CSS class to the RadGrid, which will remove all cell paddings and borders:

 

<telerik:RadGrid  ID="RadGrid1"  CssClass="NoPaddingGrid" />

 

.NoPaddingGrid td,
.NoPaddingGrid th
{
    padding:0 !important;
    border:0 !important;
}

 

 

2. Subscribe to the splitter's ClientLoaded event and restore the RadGrid paddings and borders by removing the additional CSS class. If you are not using a RadSplitter around the RadGrid, then you have to subscribe to some other event, which is fired after the page has loaded.

 

<telerik:RadSplitter OnClientLoaded="MyClientLoaded" />

 

 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">

function MyClientLoaded(sender, args)
{
     var gridElement = $get("<%= RadGrid1.ClientID %>");
     gridElement.className = gridElement.className.replace("NoPaddingGrid", "");
}

</script>
</telerik:RadCodeBlock>

Let us know if you need further assistance. You may have to send a runnable demo, so that we can see what your scenario is and how to address the issue.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.