This is a migrated thread and some comments may be shown as answers.

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

2 Answers 162 Views
Window
This is a migrated thread and some comments may be shown as answers.
Sugar
Top achievements
Rank 1
Sugar asked on 17 Dec 2009, 02:52 PM

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> 
 





2 Answers, 1 is accepted

Sort by
0
Sugar
Top achievements
Rank 1
answered on 17 Dec 2009, 06:31 PM
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(); 



0
Markus
Top achievements
Rank 1
answered on 08 Feb 2016, 06:23 PM

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" />   

Tags
Window
Asked by
Sugar
Top achievements
Rank 1
Answers by
Sugar
Top achievements
Rank 1
Markus
Top achievements
Rank 1
Share this question
or