help with showing and hiding grid

5 posts, 1 answers
  1. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 04 Feb 2009 Link to this post

    Hey all.
    As you may have inferred from the title, I'm having some problems showing and hiding the grid.

    I have three grids each tied to its own tab page. They are not contained in any tab page but are visible based on which tab is active.

    The tabs are at the top of the page.
    Below the tab control I have a table. The table has three rows; two have a grid and the third row has some other UI controls.

    When my page loads, tab 1 is active and so I hide table rows 2 and 3 (to avoid some UI quirks in the markup I set the display style of rows 2 and 3 to none).

    As I tab through, I show and hide these table rows accordingly.
    So after the page loads, I tab to the second tab, I hide rows 1 and 3 and toggle the visibility on row 2 at which point grid 2 is visible but the sizing is all messed up. Everything is squished up at the top of the grid div; the size of the master table view is very small. If I tab to another tab and tab back it corrects itself in IE but not Firefox.
    If I open the dev toolbar in IE or Firebug in FF, it corrects itself.

    I'm wondering if I can force it to correct itself.


    Is there anything I can do?

  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 04 Feb 2009 Link to this post

    Hello Matt,

    Your problem is caused by the fact that RadGrid cannot adjust its layout properly when it is placed inside an invisible container on the page (this is needed when using static headers). That's why you need to obtain a reference to the RadGrid client object once its container is visible (e.g. subscribe to RadTabStrip's OnClientTabSelected) and call the repaint() method.

    Javascript

    var grid = $find("<%= ....... %>");
    grid.repaint();


    Sincerely yours,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 04 Feb 2009 Link to this post

    Thanks for the reply.
    Right you are on the cause.
    I'm not seeing the repaint working for me in Firefox.
    Currently I'm only seeing the problem in Firefox.
    I've reworked my UI so I only need to reply on one grid. When the page loads its parent Div is not visible.
    I am calling repaint and not seeing a difference in Firefox.
  5. Answer
    Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 09 Feb 2009 Link to this post

    Hello Matt,

    Here is a working example. Please note that the PageViews have heights. In addition, if the RadGrids are ajaxified, you will need to set heights to the update panels like this:

    http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx


    <%@ Page Language="C#" %> 
    <%@ Import Namespace="System.Data" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <script runat="server"
     
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
        DataTable dt = new DataTable(); 
        DataRow dr; 
        int colsNum = 4
        int rowsNum = 20
        string colName = "Column"
     
        for (int j = 1; j <= colsNum; j++) 
        { 
            dt.Columns.Add(String.Format("{0}{1}", colName, j)); 
        } 
     
        for (int i = 1; i <= rowsNum; i++) 
        { 
            dr = dt.NewRow(); 
     
            for (int k = 1; k <= colsNum; k++) 
            { 
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i); 
            } 
            dt.Rows.Add(dr); 
        } 
     
        (sender as RadGrid).DataSource = dt
     
    </script> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>RadControls for ASP.NET AJAX</title> 
    </head> 
    <body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
    <script type="text/javascript"
     
    function ClientTabSelected(sender, args) 
        if (sender.get_selectedIndex() == 1) 
        { 
            var grid = $find("<%= RadGrid2.ClientID %>"); 
            grid.repaint(); 
             
            //firefox 
            window.setTimeout(function(){ 
                    grid.MasterTableViewHeader.get_element().parentNode.style.width = "auto"
                },1);        
        } 
     
    </script> 
    </telerik:RadCodeBlock> 
     
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" 
        SelectedIndex="0" OnClientTabSelected="ClientTabSelected"
        <Tabs> 
            <telerik:RadTab Text="Tab 1" /> 
            <telerik:RadTab Text="Tab 2" /> 
        </Tabs> 
    </telerik:RadTabStrip> 
     
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Width="600px"
        <telerik:RadPageView ID="RadPageView1" runat="server" Height="300px"
            <telerik:RadGrid 
                ID="RadGrid1" 
                runat="server" 
                Height="100%" 
                OnNeedDataSource="RadGrid_NeedDataSource"
                <ClientSettings> 
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
                </ClientSettings> 
                <MasterTableView TableLayout="Fixed" /> 
            </telerik:RadGrid> 
        </telerik:RadPageView> 
        <telerik:RadPageView ID="RadPageView2" runat="server" Height="300px"
            <telerik:RadGrid 
                ID="RadGrid2" 
                runat="server" 
                Height="100%" 
                OnNeedDataSource="RadGrid_NeedDataSource"
                <ClientSettings> 
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
                </ClientSettings> 
                <MasterTableView TableLayout="Fixed" /> 
            </telerik:RadGrid> 
        </telerik:RadPageView> 
    </telerik:RadMultiPage> 
     
    </form> 
    </body> 
    </html> 
     



    Kind regards,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 09 Feb 2009 Link to this post

    Thanks you. I am no longer having sizing issues in both IE and FF.
    Excellent.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017