Problem with self-referencing hierarchy column alignment

[Alexander]

I have been trying to use the RadGrid to display some data in a SharePoint application page. I think it's close to how I want it to be, but I am having trouble with a few things:

1. The column alignment between the MasterTable and the DetailTables is off, all the DetailTables seem to be shifted to the right.
2. I need to figure out how to switch out the image for the expand/collapse button
3. I need to know how to modify the column width

Any help would be appreciated, I have included a screenshot of the grid and the code I'm using.

Thanks,
Alexander

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/_layouts/application.master" CodeBehind="~/Pages/VersionHistory.aspx.cs"
         Inherits="BlackBlade.ListActions.DocumentSectionManager.Monitor.VersionHistory, BlackBlade.ListActions.DocumentSectionManager.Monitor,Version=1.0.0.0,Culture=neutral,PublicKeyToken=932c3000eeb6dd9c"
    %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register assembly="Telerik.Web.UI, Version=2008.3.1125.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="cc1" %>


<asp:Content ID="Main" runat="server" contentplaceholderid="PlaceHolderMain" >
        <style type="text/css">
        .RadGrid_Vista td{padding:0}

        </style>

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <!-- content start -->

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <!--skins Web20, Office2007, Black -->
        <telerik:RadGrid ID="RadGrid1" runat="server" DecoratedControls="All" Skin="Vista" OnColumnCreated="RadGrid1_ColumnCreated"
            OnItemCreated="RadGrid1_ItemCreated" OnItemDataBound="RadGrid1_ItemDataBound">
            <MasterTableView HierarchyDefaultExpanded="true" HierarchyLoadMode="Client" AllowSorting="true"
                DataKeyNames="GUID, ParentGUID" Width="100%">
                <SelfHierarchySettings ParentKeyName="ParentGUID" KeyName="GUID" />
            </MasterTableView>
            <ClientSettings AllowExpandCollapse="true" />
        </telerik:RadGrid>

        <!-- content end -->

</asp:Content>

<asp:Content ID="PageTitle" runat="server"
             contentplaceholderid="PlaceHolderPageTitle" >
   Version History
</asp:Content>

<asp:Content ID="PageTitleInTitleArea" runat="server"
             contentplaceholderid="PlaceHolderPageTitleInTitleArea" >
   BlackBlade Version History
</asp:Content>

using System;
using Telerik.Web.UI;
using Microsoft.SharePoint;
using System.Web.UI.WebControls;
using System.Web.UI;
using System.Reflection;
using System.Collections.Generic;
using Microsoft.SharePoint.WebControls;
using System.Data;

namespace BlackBlade.ListActions.DocumentSectionManager.Monitor
{
    public partial class VersionHistory : LayoutsPageBase
    {
        private DataTable dataTable = new DataTable();
        protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
        {
            if (e.Column is GridExpandColumn)
            {
                e.Column.Visible = false;
            }
            else if (e.Column is GridBoundColumn)
            {
                e.Column.HeaderStyle.Width = Unit.Pixel(100);
            }
        }

        protected override void OnLoad(EventArgs e)
        {
            try
            {
                base.OnLoad(e);

                string strItemId = this.Request["ItemID"];
                string strListId = this.Request["ListID"];

                SPWeb site = this.Web;
                SPList list = site.Lists[new Guid(strListId)];
                SPListItem item = list.GetItemById(Convert.ToInt32(strItemId));

                ColumnSetup();

                VersionCollectionTree tree = new VersionCollectionTree(item);
                PopulateData(tree.headers[0], "root");
                RadGrid1.DataSource = dataTable;

                RadGrid1.MasterTableView.FilterExpression = "ParentGUID = 'root'";
            }
            catch
            {
            }
        }



        protected override void OnPreRenderComplete(EventArgs e)
        {
            base.OnPreRenderComplete(e);
            HideExpandColumnRecursive(RadGrid1.MasterTableView);

            RadGrid1.MasterTableView.GetColumn("GUID").Visible = false;
            RadGrid1.MasterTableView.GetColumn("ParentGUID").Visible = false;
            RadGrid1.MasterTableView.HorizontalAlign = HorizontalAlign.Left;


        }

        public void HideExpandColumnRecursive(GridTableView tableView)
        {
            GridItem[] nestedViewItems = tableView.GetItems(GridItemType.NestedView);
            foreach (GridNestedViewItem nestedViewItem in nestedViewItems)
            {
                foreach (GridTableView nestedView in nestedViewItem.NestedTableViews)
                {
                    nestedView.Style["border"] = "0";
                    nestedView.GetColumn("GUID").Visible = false;
                    nestedView.GetColumn("ParentGUID").Visible = false;
                    nestedView.HorizontalAlign = HorizontalAlign.Left;

                    Button MyExpandCollapseButton = (Button)nestedView.ParentItem.FindControl("MyExpandCollapseButton");
                    if (nestedView.Items.Count == 0)
                    {
                        if (MyExpandCollapseButton != null)
                        {
                            MyExpandCollapseButton.Style["visibility"] = "hidden";
                        }
                        nestedViewItem.Visible = false;
                    }
                    else
                    {
                        if (MyExpandCollapseButton != null)
                        {
                            MyExpandCollapseButton.Style.Remove("visibility");
                        }
                    }

                    if (nestedView.HasDetailTables)
                    {
                        HideExpandColumnRecursive(nestedView);
                    }
                }
            }
        }

        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
        {
            CreateExpandCollapseButton(e.Item, "Title");

            if (e.Item is GridHeaderItem && e.Item.OwnerTableView != RadGrid1.MasterTableView)
            {
                e.Item.Style["display"] = "none";
            }

            if (e.Item is GridNestedViewItem)
            {
                e.Item.Cells[0].Visible = false;
            }
        }

        protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
        {
            CreateExpandCollapseButton(e.Item, "Title");
        }

        public void CreateExpandCollapseButton(GridItem item, string columnUniqueName)
        {
            if (item is GridDataItem)
            {
                if (item.FindControl("MyExpandCollapseButton") == null)
                {
                    Button button = new Button();
                    button.Click += new EventHandler(button_Click);
                    button.CommandName = "ExpandCollapse";
                    button.CssClass = (item.Expanded) ? "rgCollapse" : "rgExpand";
                    button.ID = "MyExpandCollapseButton";

                    if (item.OwnerTableView.HierarchyLoadMode == GridChildLoadMode.Client)
                    {
                        string script = String.Format(@"$find(""{0}"")._toggleExpand(this, event); return false;", item.Parent.Parent.ClientID);

                        button.OnClientClick = script;
                    }

                    int level = item.ItemIndexHierarchical.Split(':').Length;
                    if (level > 1)
                    {
                        button.Style["margin-left"] = level * 10 + "px";
                    }

                    TableCell cell = ((GridDataItem)item)[columnUniqueName];
                    cell.Controls.Add(button);
                    cell.Controls.Add(new LiteralControl(" "));
                    cell.Controls.Add(new LiteralControl(((GridDataItem)item)[columnUniqueName].Text.ToString()));
                }
            }
        }

        void button_Click(object sender, EventArgs e)
        {
            ((Button)sender).CssClass = (((Button)sender).CssClass == "rgExpand") ? "rgCollapse" : "rgExpand";
        }

        private void ColumnSetup()
        {
            dataTable.Columns.Add("Title", typeof(string));
            dataTable.Columns.Add("Version");
            dataTable.Columns.Add("Modified");
            dataTable.Columns.Add("User");
            dataTable.Columns.Add("Size");
            dataTable.Columns.Add("Comment");
            dataTable.Columns.Add("GUID", typeof(string));
            dataTable.Columns.Add("ParentGUID", typeof(string));
        }

        private void PopulateData(VersionCollectionTree.Node node, string parentGUID)
        {
            DataRow row = dataTable.NewRow();

            string GUID = node.versionCollection.latest.file.UniqueId.ToString();

            row["GUID"] = GUID;
            row["ParentGUID"] = parentGUID;
            row["Title"] = node.versionCollection.latest.file.Name;
            row["Version"] = node.versionCollection.latest.versionLabel;
            row["Modified"] = node.versionCollection.latest.created;
            row["User"] = node.versionCollection.latest.user.Name;
            row["Size"] = node.versionCollection.latest.size;
            row["Comment"] = node.versionCollection.latest.comment;
            dataTable.Rows.Add(row);

            if (node.hasChildren)
            {
                foreach (VersionCollectionTree.Node child in node.children)
                {
                    PopulateData(child, GUID);
                }
            }
        }
    }
}

[Pavlina]

Hi Alexander,

I suggest that you have a look at this online demo showing the self-referencing hierarchy model of Telerik RadGrid. The self-referencing hierarchy of RadGrid allows you to build multiple levels of hierarchy from a single table in the data source by specifying relations inside the same table.You do not need to create separate tables for each child level - one table is sufficient to define the hierarchy schema.

I hope this helps.

Kind regards,
Pavlina
the Telerik team

[Alexander]

I am only using one DataTable, it's defined at the top of the class... "DataTable dataTable = new DataTable();", and it's the only one. I am getting the data from a separate tree data structure and dropping it all into that one table, the hierarchy seems correct, my problem is that the grid is completely out of alignment, with each child level being shifted slightly to right, and I don't see anything about that in the demos.

Thanks,
Alexander Pataky

[Pavlina]

Hi Alexander,

Please send us a small working project via a support ticket, demonstrating your full setup and showing the alignment issue. Thus I will do my best to find a quick resolution of this issue.

Regards,
Pavlina
the Telerik team

[Dean Zimmer]

Hi

I am having a similar problem. Formatting the display for the sefh referencing hierarchy is quite challenging. I have attached an image of what my report looks like. It used to use static headers and client scrolling and that scrunched things up even more. In addition to the column alignment I would like to use a larger font have the horizontal scroll bar work however I cannot get that to work.

Thanks

Dean

[Pavlina]

Hello Dean,

Go through the following link and see if it helps:
Aligning columns in each level of self-referencing grid

Kind regards, Pavlina
the Telerik team