Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Firefox 3: Aligning columns in each level of hierarchical grid doesn't work

3 Answers 28 Views
Grid
This is a migrated thread and some comments may be shown as answers.
First
Top achievements
Rank 1
First asked on 03 May 2010, 01:44 PM
Hi there,

I need your help urgently. I have a grid with 2 levels of details, parent and child.
But the column between parent and child are not aligned properly in Firefox 3.
I followed the recommendation from here:
http://www.telerik.com/help/aspnet-ajax/grdaligncolumnsinhierarchy.html

It works well in IE 7 & IE 8.
Does anyone experience this before?
Your response will be appreciated.

I'm using Telerik 2009 Q3 SP1.



Thanks

Sxin

3 Answers, 1 is accepted

Sort by
0
First
Top achievements
Rank 1
answered on 03 May 2010, 02:06 PM
After a few hours of trying, this what I found:

In order to make it work in IE:
- The width of the first column in MasterTableView is 250px.
- The width of the first column in DetailTables is 216px.

But the alignment in Firefox 3 is off.

So I tried to adjust it for the Firefox. and I realized in Firefox I don't have to minus 34px (collapse column) for the second level first column.

My question is  how to make the grid smart enough to do the alignment?

Thanks,
sxin



0
Accepted
Dimo
Telerik team
answered on 07 May 2010, 09:18 AM
Hi Sxin,

Here is a simple demo, which works in all browsers:


<%@ 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 = 5;
        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"
  
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
<style type="text/css">
  
.RadGrid td{padding:0}
  
/* The following is required for pixel-exact alignment in IE7 */
/*.RadGrid .rgMasterTable .rgDetailTable{border-left-width:0}*/
  
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
  
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="800px"
    Skin="Office2007"
    AutoGenerateColumns="false"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView TableLayout="Fixed">
        <Columns>
            <telerik:GridBoundColumn DataField="Column1" HeaderText="Col 1" />
            <telerik:GridBoundColumn DataField="Column2" HeaderText="Col 2" HeaderStyle-Width="200px" />
            <telerik:GridBoundColumn DataField="Column3" HeaderText="Col 3" HeaderStyle-Width="200px" />
        </Columns>
        <DetailTables>
            <telerik:GridTableView Width="100%">
                <Columns>
                    <telerik:GridBoundColumn DataField="Column1" HeaderText="Col 1" />
                    <telerik:GridBoundColumn DataField="Column2" HeaderText="Col 2" HeaderStyle-Width="200px" />
                    <telerik:GridBoundColumn DataField="Column3" HeaderText="Col 3" HeaderStyle-Width="200px" />
                </Columns>
                <DetailTables>
                    <telerik:GridTableView Width="100%">
                        <Columns>
                            <telerik:GridBoundColumn DataField="Column1" HeaderText="Col 1" />
                            <telerik:GridBoundColumn DataField="Column2" HeaderText="Col 2" HeaderStyle-Width="200px" />
                            <telerik:GridBoundColumn DataField="Column3" HeaderText="Col 3" HeaderStyle-Width="200px" />
                        </Columns>
                    </telerik:GridTableView>
                </DetailTables>
            </telerik:GridTableView>
        </DetailTables>
    </MasterTableView>
</telerik:RadGrid>
  
</form>
</body>
</html>


Greetings,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
First
Top achievements
Rank 1
answered on 11 May 2010, 05:41 AM
Thank you for your help.
Tags
Grid
Asked by
First
Top achievements
Rank 1
Answers by
First
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or