RadGrid inside RadWindow - How to resize grid in IE and Firefox correctly?

[Sugar]

I have a problem in that when I have a RadGrid inside a RadWindow with Firefox. With FireFox I can't seem to resize the radgrid properly. The resizing works fine in IE.

 

For example, have a RadWindow that I open ("ClientSearch") Width=600 Height=450. In my example I am (for testing purposes) setting the RadGrid to Width=100 Height=100.

This screencap shows how it renders in IE.

This screencap shows how it renders in FireFox.

(I also attached files)

 Could anyone tell me what I'm doing wrong? Is there another way to resize the radGrid?

Cutting to it, here is the Javascript I use to resize, the main page that defines the Window, and the code snipplet in the window that defines the grid. On the page that I define the grid I do <ClientEvents OnMasterTableViewCreated="SetGridSizeLocator"> .. this is what calls the Javascript.

function setGridSizeLocator()
{
document.getElementById('ctl00_PrimaryContent_EntityGrid_GridData').style.width = 100;
document.getElementById('ctl00_PrimaryContent_EntityGrid_GridData').style.height = 100;

};

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" ShowContentDuringLoad="false" VisibleStatusbar="false" ReloadOnShow="true" EnableEmbeddedSkins="false" Skin="Locator2009" Modal="true">
   <Windows>
      <telerik:RadWindow runat="server" IconUrl="images/lookup.gif" Title="Client Search" ID="Window1" Width="600" Height="450" Behaviors="Close"></telerik:RadWindow>
      <telerik:RadWindow runat="server" IconUrl="images/toolbar/Tasksmall.gif" Title="Tasks" ID="WindowClientInbox" Width="635" Height="375" BackColor="White"  Behaviors="Close,Move,Resize"></telerik:RadWindow>
      </Windows>

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                <table width="100%">
                    <tr>
                        <td align="left">
                            <telerik:RadGrid ID="EntityGrid" EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" runat="server" EnableLinqExpressions="true" GridLines="None" AllowSorting="True" AllowPaging="True" PageSize="13" Skin="Vista2009" ClientSettings-EnableRowHoverStyle="true" >
                                <ClientSettings >
                                    <ClientEvents OnMasterTableViewCreated="setGridSizeLocator" />
                                    <Selecting AllowRowSelect="True" />
                                    <Scrolling AllowScroll="True" />
                                    <ClientEvents OnRowDblClick="LocatorGridEntitySelect" OnRowSelected="LocatorGridEntityContext" />
                                    </ClientSettings>
                                 <PagerStyle Mode="NumericPages" />
                                <MasterTableView ClientDataKeyNames="RecordID,DisplayText,UIDisplay,UIKey">
                                <EditFormSettings>
                                <EditColumn InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif" EditImageUrl="Edit.gif" CancelImageUrl="Cancel.gif"></EditColumn>
                                 </EditFormSettings>
                                </MasterTableView>
                            </telerik:RadGrid>
                        </td>
                    </tr>
                </table>
                </ContentTemplate>
                </asp:UpdatePanel>

[Sugar]

Well, after keeping at it I found a solution that worked for me. I edited the javascript to do this:

function ResizeLocatorGrid() {
   var grid;
   grid = $find("ctl00_PrimaryContent_EntityGrid");
   grid.get_element().style.height = "100px";
   grid.repaint();
}

[Markus]

This really helped me with my RadWindow implementation. Thank you!

For me, the key was to ensure the outermost DIVs didn't have any style formatting, and I used my grid's ClientEvents to trigger the autosize, as you demonstrated in your example.

<ClientEvents OnMasterTableViewCreated="setGridSizeLocator" />