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

help with showing and hiding grid

4 Answers 60 Views
Grid
This is a migrated thread and some comments may be shown as answers.
towpse
Top achievements
Rank 2
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

Sort by
0
Dimo
Telerik team
answered on 04 Feb 2009, 05:57 PM
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.
0
towpse
Top achievements
Rank 2
answered on 04 Feb 2009, 09:29 PM
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.
0
Accepted
Dimo
Telerik team
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.
0
towpse
Top achievements
Rank 2
answered on 09 Feb 2009, 03:50 PM
Thanks you. I am no longer having sizing issues in both IE and FF.
Excellent.
Tags
Grid
Asked by
towpse
Top achievements
Rank 2
Answers by
Dimo
Telerik team
towpse
Top achievements
Rank 2
Share this question
or