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

help with showing and hiding grid

4 Answers 77 Views

Grid

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

towpse asked on 04 Feb 2009, 04:19 PM

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?

4 Answers, 1 is accepted

Accepted

answered on 09 Feb 2009, 02:59 PM

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.