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

self-referencing hierarchy grid column alignment problem

1 Answer 79 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Maas Prog
Top achievements
Rank 1
Maas Prog asked on 16 Apr 2010, 04:31 PM
Hi All - I am using current build of aspjax controls. I have been having a real problem getting columns to line up in hierarchical self referencing grid. I have gone through all the other posts here that I could find to no avail... :


http://www.telerik.com/support/kb/aspnet-ajax/grid/aligning-columns-in-each-level-of-self-referencing-grid.aspx

http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/selfreferencing/defaultcs.aspx
http://www.telerik.com/community/forums/aspnet-ajax/grid/self-referencing-hierarchy-on-radgrid.aspx


however, I finally figured out a tweak that seems to work for me, so I thought I would post for everyone.

The symotom is that I get a graduated spacing as the columns move left, and which is differnt in scale as I go down in hierarchical level. I have attached example of problem.

To fix it, I have to pad the cells with different settings depending on where they fall in the grid. The code that seems to work for me is here:

 Public Sub Page_PreRenderComplete(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.PreRenderComplete
        HideExpandColumnRecursive(RadGrid1.MasterTableView)
    End Sub
    
    Public Sub HideExpandColumnRecursive(ByVal tableView As GridTableView)
        Dim nestedViewItems As GridItem() = tableView.GetItems(GridItemType.NestedView)
        For Each nestedViewItem As GridNestedViewItem In nestedViewItems
            nestedViewItem.HorizontalAlign = HorizontalAlign.Right
            For Each nestedView As GridTableView In nestedViewItem.NestedTableViews
                nestedView.HorizontalAlign = HorizontalAlign.Right
                nestedView.Style("border") = "0"
                nestedView.Style("padding-left") = "0px"
                nestedView.Style("padding-right") = "0px"
                Dim MyExpandCollapseButton As Button = DirectCast(nestedView.ParentItem.FindControl("MyExpandCollapseButton"), Button)
                If nestedView.Items.Count = 0 Then
                    If Not IsNothing(MyExpandCollapseButton) Then
                        MyExpandCollapseButton.Style("visibility") = "hidden"
                    End If
                    nestedViewItem.Visible = False
                Else
                    If Not IsNothing(MyExpandCollapseButton) Then
                        MyExpandCollapseButton.Style.Remove("visibility")
                    End If
                    
                     
                    'Need to set graduate padding for lower level to avoid V alignment problem
                    For Each item As GridItem In nestedView.Items
                        Dim level As Integer = item.ItemIndexHierarchical.Split(":"c).Length
                        If level = 2 Then
                            
                            Dim nPad As Integer = 0
                            For i As Integer = 2 To item.Cells.Count - 1  'ignore first col
                                If i < 6 Then
                                    nPad = 18
                                ElseIf i > 5 And i < 10 Then
                                    nPad = 12
                                Else
                                    nPad = 8
                                End If
                                item.Cells(i).Style("padding-right") = nPad & "px !important"
                            Next
                        End If
                        
                        If level = 3 Then
                            
                            Dim nPad As Integer = 0
                            For i As Integer = 2 To item.Cells.Count - 1  'ignore first col
                                If i < 6 Then
                                    nPad = 25
                                ElseIf i > 5 And i < 7 Then
                                    nPad = 20
                                ElseIf i > 6 And i < 10 Then
                                    nPad = 15
                                Else
                                    nPad = 10
                                End If
                                item.Cells(i).Style("padding-right") = nPad & "px !important"
                            Next
                        End If
                    Next
                   
                    
                    
                End If
 
                If nestedView.HasDetailTables Then
                    HideExpandColumnRecursive(nestedView)
                End If
            Next
        Next
    End Sub

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 20 Apr 2010, 12:40 PM
Hi Ford,

Thank you for sharing your implementation. Here is a related example, which shows a pixel-exact alignment for standard hierarchy.


<%@ 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>


Regards,
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.
Tags
Grid
Asked by
Maas Prog
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or