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

Problem with self-referencing hierarchy column alignment

5 Answers 119 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Alexander
Top achievements
Rank 1
Alexander asked on 23 Aug 2010, 11:08 PM
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);
                }
            }
        }
    }
}


5 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 26 Aug 2010, 02:16 PM
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
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
Alexander
Top achievements
Rank 1
answered on 26 Aug 2010, 08:17 PM
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
0
Pavlina
Telerik team
answered on 01 Sep 2010, 10:00 AM
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
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
Dean Zimmer
Top achievements
Rank 1
answered on 21 Sep 2010, 08:25 PM
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
0
Pavlina
Telerik team
answered on 24 Sep 2010, 04:09 PM
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
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
Alexander
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Alexander
Top achievements
Rank 1
Dean Zimmer
Top achievements
Rank 1
Share this question
or