[Solved] Appearance of wide grid

[hacheyj]

Under a variety of the skins (specifically tested was the Office2007), when the grid has many columns and extends past the browser width, the overall outer grid line stops at the browsers natural width (and does not extend to the content past it). Furthermore, the group-by row stops a couple of pixels from the browser's natural border and does not extends the full length of the grid. 

Aside from scrolling, is there any way to dealing with this? 

Part of the issue is solved by wrapping the grid in a <div style="float:left"> tag - though that does not fix the repeat on the group background...

[Dimo]

Hello Jonathan,

I suppose you are talking about the issue shown on the attached screenshot. If yes, this is a normal browser behavior, related to the concept of overflowing.

The group panel does not expand as much as the data grid, because it is not located in the data grid's <table> element.

In addition to placing the RadGrid inside a floated container or using scrolling, another workaround is to set explicit width to RadGrid in pixels.

I would recommend using scrolling.

I did not understand the last part of your post - the one about the repeating background. Could you describe the issue in more details, so that we can reproduce it and give advice? Please open a new support ticket to attach screenshots and/or sample code, if necessary. Thank you.

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[hacheyj]

The last part actually refers to what you have indicated in the screenshot (repeating of the blue background in the group panel)

[Dimo]

Hello Jonathan,

I understand now. Actually the problem is not in the background, but in the fact that the group panel does not expand more than the browser's visible area. As I said, this is an IE behavior (for example the group panel expands correctly in Firefox).

You can try the following workaround:

<script type="text/javascript">
function RadGrid1_Created(sender, eventargs)
{
    var grid = document.getElementById("<%= RadGrid1.ClientID %>");
    var groupPanel = document.getElementById("<%= RadGrid1.ClientID %>_GroupPanel");
    groupPanel.style.width = grid.clientWidth;
}
</script>

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    style="float:left"
    >
    <ClientSettings>
        <ClientEvents OnGridCreated="RadGrid1_Created" />
    </ClientSettings>
</telerik:RadGrid>
<div style="clear:both"></div>

Note the clearing <div> below the grid, which clears the float.

Regards,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center