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

3 posts, 0 answers
  1. Sugar
    Sugar avatar
    10 posts
    Member since:
    Jan 2009

    Posted 17 Dec 2009 Link to this post

    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. Sugar
    Sugar avatar
    10 posts
    Member since:
    Jan 2009

    Posted 17 Dec 2009 Link to this post

    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(); 



  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Markus
    Markus avatar
    1 posts
    Member since:
    Mar 2012

    Posted 08 Feb in reply to Sugar Link to this post

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

Back to Top