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

Issue Hiding Detail Table Column in Self-Referencing Hierarchical Grid

10 Answers 91 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 14 Nov 2013, 04:55 PM
I have a self-referencing hierarchical grid with five columns:  Id, Title, Body, Created By and Created On.  Each row has these five properties.

Users can hide any of the columns using the built in Header Context Menu functionality.  When I choose to hide a column, the column header is removed, as are any corresponding values from the master table.  However, all of the child values in the hierarchical detail tables still have the column showing.

For example, if I have the following (where col# = column, p# = parent and c# = child)...

col 1 | col 2 | col 3 | col 4
p1    | p2    | p3    | p4   |
c1    | c2    | c3    | c4   |
c1    | c2    | c3    | c4   |

...and I decide to hid col 4 via the header context menu, I end up with something like the following:

col 1 | col 2 | col 3 |
p1    | p2    | p3    |
c1  | c2  | c3  | c4  |
c1  | c2  | c3  | c4  |

What do I need to set in order for the Header Context Menu to also hide detail table columns?

Here's my grid definition:

<telerik:RadGrid
    ID="grdNotes"
    runat="server"
    OnColumnCreated="grdNotes_ColumnCreated"
    OnItemCreated="grdNotes_ItemCreated"
    OnItemDataBound="grdNotes_ItemDataBound"
    OnNeedDataSource="grdNotes_NeedDataSource"
    OnPreRender="grdNotes_PreRender"
    AutoGenerateColumns="false"
    SkinID="HierarchicalGrid"
    GridLines="None"
    AllowCustomPaging="True"
    ShowStatusBar="True"
    PageSize="20"
    EnableLinqExpressions="False"
    Width="99%">
    <MasterTableView
        HierarchyDefaultExpanded="true"
        HierarchyLoadMode="Client"
        AllowSorting="true"
        DataKeyNames="Id,ParentId,Token,IsRoot,Replies,NoteCreator"
        ClientDataKeyNames="Id,ParentId,Token,IsRoot,Replies,NoteCreator"
        NoDetailRecordsText=""
        EnableNoRecordsTemplate="False"
        TableLayout="Auto"
        Width="100%"
        HorizontalAlign="Right">
         
        <SelfHierarchySettings ParentKeyName="ParentId" KeyName="Id" MaximumDepth="20" />
 
        <RowIndicatorColumn Visible="False" FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>
 
        <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>
        <Columns>
            <telerik:GridClientSelectColumn DataTextField="Id" HeaderAbbr="Select" HeaderButtonType="TextButton"
                HeaderText="Select" HeaderTooltip="Select/Deselect" Text="Select" Visible="false"
                UniqueName="asgSelect" Exportable="false">
            </telerik:GridClientSelectColumn>
            <telerik:GridBoundColumn DataField="Id" SortExpression="Id" UniqueName="Id" Exportable="true">
                <HeaderStyle Width="50px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Title" SortExpression="Title" UniqueName="Title" Exportable="true"
                HtmlEncode="true" >
                <HeaderStyle Width="150px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Body" SortExpression="Body" UniqueName="Body" HtmlEncode="False" Exportable="true">
                <HeaderStyle Width="350px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CreatedBy" SortExpression="CreatedBy" UniqueName="CreatedBy" Exportable="true">
                <HeaderStyle Width="150px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CreatedDate" SortExpression="CreatedDate" UniqueName="CreatedOn" Exportable="true">
                <HeaderStyle Width="150px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ParentId" HeaderText="Parent Id" SortExpression="ParentId" Exportable="false"
                UniqueName="ParentId" Visible="false" />
            <telerik:GridBoundColumn DataField="Token" HeaderText="Token" SortExpression="Token" Exportable="false"
                UniqueName="Token" Visible="false" />
            <telerik:GridBoundColumn DataField="IsRoot" HeaderText="Is Root" SortExpression="IsRoot" Exportable="false"
                UniqueName="IsRoot" Visible="false" />
            <telerik:GridBoundColumn DataField="Replies" HeaderText="Replies" SortExpression="Replies" Exportable="false"
                UniqueName="Replies" Visible="false" />
            <telerik:GridBoundColumn DataField="NoteCreator" HeaderText="NoteCreator" SortExpression="NoteCreator" Exportable="false"
                UniqueName="NoteCreator" Visible="false" />
            <telerik:GridTemplateColumn UniqueName="Actions" Visible="false" Exportable="false">
                <ItemTemplate>
                    <telerik:RadToolBar ID="rtbNoteActions" runat="server" SkinID="ActionToolbar" OnButtonClick="NotesGridToolbarButtonClicked"
                        OnClientButtonClicking="NoteActionToolbarClicking">
                        <Items>
                            <telerik:RadToolBarButton Text="Properties" CommandName="Properties" ImageUrl="~/Images/page_view.gif" />
                            <telerik:RadToolBarButton Text="Reply" CommandName="Reply" ImageUrl="~/Images/page_edit.gif" />
                            <telerik:RadToolBarButton Text="Security" CommandName="Security" ImageUrl="~/Images/shield16.gif" />
                            <telerik:RadToolBarButton Text="Delete" CommandName="Delete" ImageUrl="~/Images/delete16.gif" />
                        </Items>
                    </telerik:RadToolBar>
                </ItemTemplate>
                <HeaderStyle Width="15%"></HeaderStyle>
            </telerik:GridTemplateColumn>
        </Columns>
        <EditFormSettings>
        <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
        </EditFormSettings>
 
        <PagerStyle AlwaysVisible="True"></PagerStyle>
    </MasterTableView>
    <HeaderContextMenu EnableTheming="True">
        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
    </HeaderContextMenu>
    <ExportSettings ExportOnlyData="True" IgnorePaging="True">
    </ExportSettings>
    <ClientSettings Selecting-AllowRowSelect="true" Resizing-AllowColumnResize="true">
        <Selecting AllowRowSelect="True"></Selecting>
        <ClientEvents
            OnRowSelected="NoteRowSelected"
            OnRowContextMenu="NoteContextMenu"
            OnRowDblClick="grdNotes_OnRowDblClick"
            OnGridCreated="NotePageLoad"
            OnTableCreated="ResizeAllNoteColumns"
            OnColumnResized="ResizeAllNoteColumns" />
        <Resizing AllowColumnResize="True"></Resizing>
    </ClientSettings>
    <PagerStyle Position="Bottom" AlwaysVisible="True" Mode="NextPrevAndNumeric" Wrap="False"
        BackColor="White" Font-Size="Large" />
</telerik:RadGrid>

10 Answers, 1 is accepted

Sort by
0
Matt
Top achievements
Rank 1
answered on 18 Nov 2013, 02:57 PM
Can anyone from Telerik chime in on this one?
0
Kostadin
Telerik team
answered on 19 Nov 2013, 09:18 AM
Hi Matt,

A possible solution is to hook OnColumnHidden client event and manually hide the rest of the columns. Keep in mind that you have to hide them on the server as well by looping through all the detailed tables if you want to persist the visible state through the postback.

Regards,
Kostadin
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Matt
Top achievements
Rank 1
answered on 22 Nov 2013, 10:45 PM
I took your suggestion and *think* I'm doing what I think is right, but it's not working as expected.  I've stepped through the OnColumnHidden and OnColumnShown in the JS on the client-side and the code fires, but the columns aren't hidden as expected.

Would you mind taking a look?

Here's the code client-side code:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="comboboxes.ascx.cs" Inherits="WebApplication1.ComboBoxProperties" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
 
<telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
 
    <script type="text/javascript">
 
        var noteId = 0;
        var tokenValue = 0;
        var hasParentNote = false;
        var refreshGrid = false;
 
        function TightenUpNoteGridCSS() {
            // Get grid
            var grid = $find("<%=grdNotes.ClientID %>");
 
            // Get master table and all detail tables
            var masterTableView = grid.get_masterTableView();
            var detailTables = grid.get_detailTables();
 
            var htmlElement;
 
            for (var i = 0; i < detailTables.length; i++) {
 
                htmlElement = detailTables[i].get_element().parentNode.style.padding = '0px';
            }
        }
 
        function NotePageLoad() {
            TightenUpNoteGridCSS();
        }
 
        function ResizeAllNoteColumns() {
            // Get grid
            var grid = $find("<%=grdNotes.ClientID %>");
 
            // Get master table and all detail tables
            var masterTableView = grid.get_masterTableView();
            var detailTables = grid.get_detailTables();
 
            // Get all columns
            var arrayColumns = masterTableView.get_columns();
 
            // Traverse every table making columns equal
            var width;
 
            for (var i = 0; i < arrayColumns.length; i++) {
                // Get master table column width
                width = masterTableView.ColGroup.Cols[i].style.width;
                for (var j = 0; j < detailTables.length; j++) {
                    // Set detail table column width
                    detailTables[j].ColGroup.Cols[i].style.width = width;
                }
            }
        }
 
        function ShowDetailColumn(sender, eventArgs){
            ShowHideDetailColumn(sender, eventArgs, true);
        }
 
        function HideDetailColumn(sender, eventArgs){
            ShowHideDetailColumn(sender, eventArgs, false);
        }
 
        function ShowHideDetailColumn(sender, eventArgs, showColumn) {
 
            var masterColumnName = eventArgs._gridColumn._element.UniqueName;
 
            // Get grid
            var grid = $find("<%=grdNotes.ClientID %>");
 
            // Get master table and all detail tables
            var masterTableView = grid.get_masterTableView();
            var detailTables = grid.get_detailTables();
 
            // Get all columns
            var arrayColumns = masterTableView.get_columns();
 
            // Traverse every table showing/hiding columns as necessary
            for (var i = 0; i < arrayColumns.length; i++) {
 
                for (var j = 0; j < detailTables.length; j++) {
                    // Set detail table column visibility to match
                    var detailColName = detailTables[j]._columnsInternal[i]._element.UniqueName;
 
                    if (masterColumnName == detailColName) {
                        var column = detailTables[j].getColumnByUniqueName(detailColName);
                        column.set_visible(showColumn);
                    }
                }
            }
 
            ResizeAllNoteColumns();
        }
 
 
    </script>
 
</telerik:RadScriptBlock>
 
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
 
    </script>
</telerik:RadScriptBlock>
 
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
<telerik:RadGrid
ID="grdNotes"
    runat="server"
    AutoGenerateColumns="False"
    AllowCustomPaging="True"
    ShowStatusBar="True"
    PageSize="20"
    EnableLinqExpressions="False"
    Width="99%"
    CellSpacing="0"
    OnColumnCreated="grdNotes_ColumnCreated"
    OnItemCreated="grdNotes_ItemCreated"
    OnNeedDataSource="grdNotes_NeedDataSource"
    OnPreRender="grdNotes_PreRender" Skin="Office2007"    >
    <MasterTableView
        HierarchyDefaultExpanded="true"
        HierarchyLoadMode="Client"
        AllowSorting="true"
        DataKeyNames="Id,ParentId,Token,IsRoot,Replies,NoteCreator"
        ClientDataKeyNames="Id,ParentId,Token,IsRoot,Replies,NoteCreator"
        NoDetailRecordsText=""
        EnableNoRecordsTemplate="False"
        TableLayout="Auto"
        Width="100%"
        HorizontalAlign="Right"
        EnableHeaderContextMenu="True"
        ShowFooter="True"
        GridLines="Both" BorderColor="Black" ForeColor="Black">
         
        <SelfHierarchySettings ParentKeyName="ParentId" KeyName="Id" MaximumDepth="20" />
 
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
 
        <RowIndicatorColumn Visible="False" FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>
 
        <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>
        <Columns>
            <telerik:GridClientSelectColumn DataTextField="Id" HeaderAbbr="Select" HeaderButtonType="TextButton"
                HeaderText="Select" HeaderTooltip="Select/Deselect" Text="Select" Visible="false"
                UniqueName="asgSelect" >
            </telerik:GridClientSelectColumn>
            <telerik:GridBoundColumn DataField="Id" SortExpression="Id" UniqueName="Id" HeaderText="Id" >
                <HeaderStyle Width="50px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Title" SortExpression="Title" UniqueName="Title"
                HtmlEncode="true" HeaderText="Title" >
                <HeaderStyle Width="150px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Body" SortExpression="Body" UniqueName="Body" HtmlEncode="False" HeaderText="Body">
                <HeaderStyle Width="350px"  />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CreatedBy" SortExpression="CreatedBy" UniqueName="CreatedBy" HeaderText="Created By">
                <HeaderStyle Width="150px"  />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CreatedDate" SortExpression="CreatedDate" UniqueName="CreatedOn" HeaderText="Date Created">
                <HeaderStyle Width="150px"  />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ParentId" HeaderText="Parent Id" SortExpression="ParentId"
                UniqueName="ParentId" Visible="false" />
            <telerik:GridBoundColumn DataField="Token" HeaderText="Token" SortExpression="Token"
                UniqueName="Token" Visible="false" />
            <telerik:GridBoundColumn DataField="IsRoot" HeaderText="Is Root" SortExpression="IsRoot"
                UniqueName="IsRoot" Visible="false" />
            <telerik:GridBoundColumn DataField="Replies" HeaderText="Replies" SortExpression="Replies"
                UniqueName="Replies" Visible="false" />
            <telerik:GridBoundColumn DataField="NoteCreator" HeaderText="NoteCreator" SortExpression="NoteCreator"
                UniqueName="NoteCreator" Visible="false" />
            <telerik:GridTemplateColumn UniqueName="Actions" Visible="false" >
                <ItemTemplate>
                    <telerik:RadToolBar ID="rtbNoteActions" runat="server" SkinID="ActionToolbar">
                        <Items>
                            <telerik:RadToolBarButton Text="Properties" CommandName="Properties" />
                            <telerik:RadToolBarButton Text="Reply" CommandName="Reply" />
                            <telerik:RadToolBarButton Text="Security" CommandName="Security" />
                            <telerik:RadToolBarButton Text="Delete" CommandName="Delete" />
                        </Items>
                    </telerik:RadToolBar>
                </ItemTemplate>
                <HeaderStyle Width="15%"></HeaderStyle>
            </telerik:GridTemplateColumn>
        </Columns>
        <EditFormSettings>
            <EditColumn FilterControlAltText="Filter EditCommandColumn column" />
        </EditFormSettings>
        <PagerStyle AlwaysVisible="True" />
    </MasterTableView>
 
<FilterMenu EnableImageSprites="False"></FilterMenu>
 
    <HeaderContextMenu EnableTheming="True">
        <CollapseAnimation Type="OutQuint" Duration="200" />
    </HeaderContextMenu>
    <ClientSettings >
        <ClientEvents
            OnTableCreated="ResizeAllNoteColumns"
            OnColumnResized="ResizeAllNoteColumns"
            OnColumnHidden="HideDetailColumn"
            OnColumnShown ="ShowDetailColumn"/>
        <Resizing AllowColumnResize="True" />
        <Selecting AllowRowSelect="true"/>
    </ClientSettings>
    <PagerStyle Position="Bottom" AlwaysVisible="True" Mode="NextPrevAndNumeric" Wrap="False"
        BackColor="White" Font-Size="Large" />
</telerik:RadGrid>
 
<br />
 
<telerik:RadTreeList ID="tlNotes" runat="server"
    ParentDataKeyNames="ParentId"
    DataKeyNames="Id"
    ClientDataKeyNames="Id,ParentId,Token,IsRoot,Replies,NoteCreator"
    GridLines="Both"
    ClientSettings-Resizing-AllowColumnResize="true"
    OnItemDataBound="tlNotes_ItemDataBound"
    OnNeedDataSource="tlNotes_NeedDataSource"
    AutoGenerateColumns="false" AllowSorting="True"
     
    >
<ClientSettings>
<Resizing AllowColumnResize="True"></Resizing>
</ClientSettings>
 
<ExportSettings ExportMode="RemoveControls">
<Excel PageLeftMargin="0.7in" PageRightMargin="0.7in"></Excel>
 
<Pdf PageWidth="8.5in" PageHeight="11in"></Pdf>
</ExportSettings>
 
<EditFormSettings EditFormType="AutoGenerated">
<EditColumn MinWidth="" MaxWidth=""></EditColumn>
</EditFormSettings>
        <Columns>
            <telerik:TreeListCheckBoxColumn HeaderText="Select" UniqueName="Select" DataType="System.String"></telerik:TreeListCheckBoxColumn>
            <telerik:TreeListBoundColumn DataField="Id" SortExpression="Id" UniqueName="Id" HeaderText="Id" >
                <HeaderStyle Width="50px" />
            </telerik:TreeListBoundColumn>           
            <telerik:TreeListBoundColumn  DataField="Title" SortExpression="Title" UniqueName="Title"
                HtmlEncode="true" HeaderText="Title" >
                <HeaderStyle Width="150px" />
            </telerik:TreeListBoundColumn>
            <telerik:TreeListBoundColumn  DataField="Body" SortExpression="Body" UniqueName="Body" HtmlEncode="False" HeaderText="Body">
                <HeaderStyle Width="350px"  />
            </telerik:TreeListBoundColumn>
            <telerik:TreeListBoundColumn  DataField="CreatedBy" SortExpression="CreatedBy" UniqueName="CreatedBy" HeaderText="Created By">
                <HeaderStyle Width="150px"  />
            </telerik:TreeListBoundColumn>
            <telerik:TreeListBoundColumn  DataField="CreatedDate" SortExpression="CreatedDate" UniqueName="CreatedOn" HeaderText="Date Created">
                <HeaderStyle Width="150px"  />
            </telerik:TreeListBoundColumn>
            <telerik:TreeListBoundColumn  DataField="ParentId" HeaderText="Parent Id" SortExpression="ParentId" Visible="false"
                UniqueName="ParentId" />
            <telerik:TreeListBoundColumn DataField="Token" HeaderText="Token" SortExpression="Token" Visible="false"
                UniqueName="Token" />
            <telerik:TreeListBoundColumn DataField="IsRoot" HeaderText="Is Root" SortExpression="IsRoot" Visible="false"
                UniqueName="IsRoot" />
            <telerik:TreeListBoundColumn DataField="Replies" HeaderText="Replies" SortExpression="Replies" Visible="false"
                UniqueName="Replies" />
            <telerik:TreeListBoundColumn DataField="NoteCreator" HeaderText="NoteCreator" SortExpression="NoteCreator" Visible="false"
                UniqueName="NoteCreator"  />
            <telerik:TreeListTemplateColumn UniqueName="Actions" Visible="true" MinWidth="120px">
                <ItemTemplate>
                    <telerik:RadToolBar ID="rtbNoteActions" runat="server" SkinID="ActionToolbar">
                        <Items>
                            <telerik:RadToolBarButton Text="" CommandName="Properties" ImageUrl="~/Images/page_view.gif" />
                            <telerik:RadToolBarButton Text="" CommandName="Reply" ImageUrl="~/Images/page_edit.gif" />
                            <telerik:RadToolBarButton Text="" CommandName="Security" ImageUrl="~/Images/shield16.gif" />
                            <telerik:RadToolBarButton Text="" CommandName="Delete" ImageUrl="~/Images/delete16.gif" />
                        </Items>
                    </telerik:RadToolBar>
                </ItemTemplate>
                <HeaderStyle Width="15%"></HeaderStyle>
            </telerik:TreeListTemplateColumn>
        </Columns>
</telerik:RadTreeList>

And here's the code-behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
 
namespace WebApplication1
{
 
    public partial class ComboBoxProperties : System.Web.UI.UserControl
    {
 
        protected static List<DisplayNote> DisplayNotes
        {
            get;
            set;
        }
         
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                if (!grdNotes.DataSourceIsAssigned)
                {
                    SetGridDataSource();
                }
            }
        }
 
        protected void SetGridDataSource()
        {
            Random rnd = new Random();
            Random rnd2 = new Random();
                 
            int childCount;
            int randomGrandChildCount;
            int numChildNotes = 0;
 
            List<DisplayNote> displayNotes = new List<DisplayNote>();
 
            int seedId = 100;
            int parentNoteId;
 
            for (int i = 1; i < 10; i++)
            {
                DisplayNote note = new DisplayNote();
 
                note = CreateDisplayNote(seedId, 0, true);
                displayNotes.Add(note);
                parentNoteId = seedId;
                seedId++;
 
                if (i % 3 == 0)
                {
                    childCount = rnd.Next(1, 5);
                    numChildNotes += childCount;
 
                    for (int x = 0; x < childCount; x++)
                    {
                        DisplayNote childNote = new DisplayNote();
 
                        childNote = CreateDisplayNote(seedId, parentNoteId, false);
                        displayNotes.Add(childNote);
 
                        seedId++;
                        randomGrandChildCount = rnd2.Next(0, 4);
 
                        for (int z = 0; z < randomGrandChildCount; z++)
                        {
                            displayNotes.Add(CreateDisplayNote(seedId, childNote.Id, false));
                            seedId++;                               
                        }
                    }
                }
            }
 
            DisplayNotes = displayNotes;           
        }
 
        protected DisplayNote CreateDisplayNote(int noteId, int parentNoteId, bool isRoot)
        {
            DisplayNote note = new DisplayNote();
 
            string header;
            string createdBy;
 
            if (isRoot)
            {
                header = "Root ";
                createdBy = "Some Pig";
            }
            else
            {
                header = "Child ";
                createdBy = "Templeton Rattus";
            }
 
            note.Id = noteId;
             
            note.Title = header + "Note " + noteId;
            note.Body = header + "Root Note " + note.Id;
            note.ObjectId = 10;
            note.ParentId = parentNoteId;
            note.ApplicationId = 1;
            note.CreatedBy = createdBy;
            note.CreatedDate = DateTime.Now.ToString();
            note.IsRoot = true;
            note.Token = 1024;
 
            if (noteId % 5 == 0)
            {
                note.ModifiedDate = DateTime.Now.ToString();
            }
            else
            {
                note.ModifiedDate = "---";
            }
 
            return note;
        }
 
 
        protected void grdNotes_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            if (!grdNotes.DataSourceIsAssigned)
            {
                SetGridDataSource();
            }
 
            grdNotes.DataSource = DisplayNotes;
            grdNotes.MasterTableView.FilterExpression = "ParentId = 0";
 
        }
 
        protected void tlNotes_NeedDataSource(object sender, TreeListNeedDataSourceEventArgs e)
        {
 
            tlNotes.DataSource = DisplayNotes;
        }
 
        protected void tlNotes_ItemDataBound(object sender, Telerik.Web.UI.TreeListItemDataBoundEventArgs e)
        {
            TreeListDataItem item = e.Item as TreeListDataItem;
            if (item != null)
            {
                switch (item.HierarchyIndex.NestedLevel)
                {
                    case 0:
                        item.BackColor = System.Drawing.Color.LightYellow;
                        break;
                    case 1:
                        item.BackColor = System.Drawing.Color.YellowGreen;
                        break;
                    case 2:
                        item.BackColor = System.Drawing.Color.LightPink;
                        break;
                }
            }
        }
 
        protected void grdNotes_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 void grdNotes_ItemDataBound(object sender, GridItemEventArgs e)
        {
            CreateExpandCollapseButton(e.Item, "Id");
 
        }
 
        protected void grdNotes_ItemCreated(object sender, GridItemEventArgs e)
        {
            CreateExpandCollapseButton(e.Item, "Id");
 
            if (e.Item is GridHeaderItem && e.Item.OwnerTableView != grdNotes.MasterTableView)
            {
                e.Item.Style["display"] = "none";
            }
 
            if (e.Item is GridNoRecordsItem && e.Item.OwnerTableView != grdNotes.MasterTableView)
            {
                e.Item.Style["display"] = "none";
            }
 
            if (e.Item is GridNestedViewItem)
            {
                e.Item.Cells[0].Visible = false;
                e.Item.Cells[1].Style.Add(HtmlTextWriterStyle.Padding, "0px");
            }
        }
 
        public void CreateExpandCollapseButton(GridItem item, string columnUniqueName)
        {
            //return;
 
            if (item is GridDataItem)
            {
                if (item.FindControl("MyExpandCollapseButton") == null)
                {
                    Button button = new Button();
                    button.Click += 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;
                    }
 
                    TableCell cell = ((GridDataItem)item)[columnUniqueName];
                    cell.Controls.Add(button);
                    cell.Controls.Add(new LiteralControl(((GridDataItem)item).GetDataKeyValue(columnUniqueName).ToString()));
                }
            }
        }
 
        void button_Click(object sender, EventArgs e)
        {
            ((Button)sender).CssClass = (((Button)sender).CssClass == "rgExpand") ? "rgCollapse" : "rgExpand";
        }
 
        protected void grdNotes_PreRender(object sender, EventArgs e)
        {
            HideExpandColumnRecursive(grdNotes.MasterTableView);
        }
 
        private static void HideExpandColumnRecursive(GridTableView tableView)
        {
 
            GridItem[] nestedViewItems = tableView.GetItems(GridItemType.NestedView);
            foreach (GridNestedViewItem nestedViewItem in nestedViewItems)
            {
                foreach (GridTableView nestedView in nestedViewItem.NestedTableViews)
                {
 
                    //hide the action column here?
                    GridColumn actionColumn = nestedView.GetColumnSafe("Actions");
 
                    nestedView.Style["border"] = "0";
 
                    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);
                    }
                }
            }
        }
    }
 
    public sealed class DisplayNote
    {
 
        /// <summary>
        /// The id of the note's parent
        /// </summary>
        [DataMember]
        public int ParentId
        {
            get;
            set;
        }
 
        /// <summary>
        /// The unique id of the note.
        /// </summary>
        [DataMember]
        public int Id
        {
            get;
            set;
        }
 
        /// <summary>
        /// The id of the <see cref="Application"/> to which the note belongs.
        /// </summary>
        [DataMember]
        public int ApplicationId
        {
            get;
            set;
        }
 
        /// <summary>
        /// The id of the <see cref="ObjectInfo">object</see> to which the note belongs.
        /// </summary>
        [DataMember]
        public int ObjectId
        {
            get;
            set;
        }
 
        /// <summary>
        /// The title of the note.  This is a required field.
        /// </summary>
        [DataMember]
        public string Title
        {
            get;
            set;
        }
 
        /// <summary>
        /// The body of the note.
        /// </summary>
        [DataMember]
        public string Body
        {
            get;
            set;
        }
 
        /// <summary>
        /// Indicates whether the current user created the note.
        /// </summary>
        [DataMember]
        public bool NoteCreator
        {
            get;
            set;
        }
 
        /// <summary>
        /// The name of the <see cref="User">user</see> who created the note.
        /// </summary>
        [DataMember]
        public string CreatedBy
        {
            get;
            set;
        }
 
        /// <summary>
        /// Indicates the date the note was created.
        /// </summary>
        [DataMember]
        public string CreatedDate
        {
            get;
            set;
        }
 
        /// <summary>
        /// The date the note was last modified.
        /// </summary>
        [DataMember]
        public string ModifiedDate
        {
            get;
            set;
        }
 
        /// <summary>
        /// The number of immediate replies belonging to the note.  This only denotes indicates children of the note, it does not include grandchildren.
        /// </summary>
        [DataMember]
        public int Replies
        {
            get;
            set;
        }
 
        /// <summary>
        /// Indicates whether the note is a root note (e.g., has no parent).
        /// </summary>
        [DataMember]
        public Boolean IsRoot
        {
            get;
            set;
        }
 
        /// <summary>
        /// Contains the security token belonging to the note for the current user.
        /// </summary>
        [DataMember]
        public int Token
        {
            get;
            set;
        }
    }
 
    public sealed class Note
    {
        /// <summary>
        /// Contains a list of notes as replies to the current note.
        /// </summary>
        // Additional Properties
        [DataMember(Name = "Replies", IsRequired = true)]
        private List<Note> replies = new List<Note>();
 
        /// <summary>
        /// The id of the note's parent note (if applicable).
        /// </summary>
        [DataMember]
        public int ParentId
        {
            get;
            set;
        }
 
        /// <summary>
        /// The unique id of the note.
        /// </summary>
        /// <additionalInfo>
        ///     <fulfills requirement="26614"/>
        /// </additionalInfo>
        [DataMember]
        public int Id
        {
            get;
            set;
        }
 
        /// <summary>
        /// The id of the <see cref="Application"/> to which the note belongs.
        /// </summary>
        [DataMember]
        public int ApplicationId
        {
            get;
            set;
        }
 
        /// <summary>
        /// The id of the <see cref="ObjectInfo">object</see> to which the note belongs.
        /// </summary>
        [DataMember]
        public int ObjectId
        {
            get;
            set;
        }
 
        /// <summary>
        /// The title of the note.  This is a required field.
        /// </summary>
        /// <additionalInfo>
        ///     <fulfills requirement="26615"/>
        /// </additionalInfo>
        [DataMember]
        public string Title
        {
            get;
            set;
        }
 
        /// <summary>
        /// The body of the note.
        /// </summary>
        /// <additionalInfo>
        ///     <fulfills requirement="26616"/>
        /// </additionalInfo>
        [DataMember]
        public string Body
        {
            get;
            set;
        }
 
        /// <summary>
        /// The id of the <see cref="User">user</see> who created the note.
        /// </summary>
        /// <additionalInfo>
        ///     <fulfills requirement="26618"/>
        /// </additionalInfo>
        [DataMember]
        public int CreatedBy
        {
            get;
            set;
        }
 
        /// <summary>
        /// The name of the <see cref="User">user</see> who created the note.
        /// </summary>
        /// <additionalInfo>
        ///     <fulfills requirement="26618"/>
        /// </additionalInfo>
        [DataMember]
        public string CreatedByUserName
        {
            get;
            set;
        }
 
        /// <summary>
        /// The date the note was created.
        /// </summary>
        /// <additionalInfo>
        ///     <fulfills requirement="26619"/>
        /// </additionalInfo>
        [DataMember]
        public DateTime CreatedDate
        {
            get;
            set;
        }
 
        /// <summary>
        /// The id of the <see cref="User">user</see> who last modified the note.
        /// </summary>
        /// <additionalInfo>
        ///     <fulfills requirement="26620"/>
        /// </additionalInfo>
        [DataMember]
        public int ModifiedBy
        {
            get;
            set;
        }
 
        /// <summary>
        /// The date the note was last modified.
        /// </summary>
        /// <additionalInfo>
        ///     <fulfills requirement="26621"/>
        /// </additionalInfo>
        [DataMember]
        public DateTime ModifiedDate
        {
            get;
            set;
        }
 
        /// <summary>
        /// A boolean value.  True if the note has replies; otherwise it's false.
        /// </summary>
        /// <additionalInfo>
        ///     <fulfills requirement="26631"/>
        /// </additionalInfo>
        public bool HasReplies
        {
            get
            {
                return (replies.Count > 0); // default
            }
        }
 
        /// <summary>
        /// A boolean value.  True if the note is a root note (e.g., has no parent); otherwise it's false.
        /// </summary>
        /// <additionalInfo>
        ///     <fulfills requirement="26630"/>
        /// </additionalInfo>
        [DataMember]
        public bool IsRoot
        {
            get;
            set;
        }
 
        /// <summary>
        /// A list of replies for the current note.
        /// </summary>
        /// <additionalInfo>
        ///     <fulfills requirement="26632"/>
        /// </additionalInfo>
        public List<Note> Replies
        {
            get
            {
                if (replies == null)
                {
                    replies = new List<Note>();
                }
                return replies;
            }
        }
 
        /// <summary>
        /// The number of immediate replies belonging to the note.  This only indicates children of the note, it does not include grandchildren.
        /// </summary>
        [DataMember]
        public int ChildCount
        {
            get;
            set;
        }
 
        /// <summary>
        /// Contains the security token belonging to the note for the current user.
        /// </summary>
        /// <additionalInfo>
        ///     <fulfills requirement="26617"/>
        /// </additionalInfo>
        [DataMember]
        public int Token
        {
            get;
            set;
        }
 
        /// <summary>
        /// The Id of the previous <see cref="Note"/> belonging to the <see cref="ObjectInfo"/>.  This will be set to 0 if this is the first note for the object.
        /// </summary>
        [DataMember]
        public int PreviousNoteId
        {
            get;
            set;
        }
 
        /// <summary>
        /// The Id of the next <see cref="Note"/> belonging to the <see cref="ObjectInfo"/>. This will be set to 0 if this is the last note for the object.
        /// </summary>
        [DataMember]
        public int NextNoteId
        {
            get;
            set;
        }
 
        /// <summary>
        /// The body of the note stripped of any rich text formatting.
        /// </summary>
        [DataMember]
        public string PlainTextBody
        {
            get;
            set;
        }
 
    }
 
}
0
Kostadin
Telerik team
answered on 27 Nov 2013, 12:12 PM
Hi Matt,

I noticed that you have used a TreeList instead RadGrid. A colleague of mine has already provide you with an information how to achieve the required functionality. I would recommend you to continue the conversation in the opened support ticket and close this forum thread.

Regards,
Kostadin
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Matt
Top achievements
Rank 1
answered on 27 Nov 2013, 04:06 PM
I'm not sure what you mean by having an open ticket.  I haven't submitted a support ticket to Telerik on this matter -- just posting my questions to the forum so far.  Could you point me to the ticket you referenced?
0
Kostadin
Telerik team
answered on 02 Dec 2013, 01:30 PM
Hello Matt,

Please excuse me for misleading you with the information in my previous reply. Actually I was talking about a forum thread which could be found at the following link. Note that we recommend you to use a TreeList instead a Self-Referencing Hierarchical Grid, because the TreeList control is created to suit this kind of scenarios. In the aforementioned forum thread you could find an information how to hide/show columns.

Regards,
Kostadin
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Matt
Top achievements
Rank 1
answered on 02 Dec 2013, 02:42 PM
Ah....that makes more sense!  Thanks for the clarification.
0
Matt
Top achievements
Rank 1
answered on 02 Dec 2013, 06:51 PM
Unfortunately we're unable to use the treelist.

Could you please take a look at the above code and offer guidance on what I"m missing when trying to hide the child table columns?  (Or tell me it's not possible so I can look at other solutions.)
0
Matt
Top achievements
Rank 1
answered on 02 Dec 2013, 07:46 PM
Solution found, see the snippet below for the code I used:

var isDetailTable == false;
 
function ShowHideDetailColumn(sender, eventArgs, showColumn) {
 
    if (isDetailTable == true)
    {
        return;
    }
 
    var masterColumnName = eventArgs._gridColumn._element.UniqueName;
 
    // Get grid
    var grid = $find("<%=grdNotes.ClientID %>");
 
    // Get master table and all detail tables
    var masterTableView = grid.get_masterTableView();
    var detailTables = grid.get_detailTables();
 
    // Get all columns
    var arrayColumns = masterTableView.get_columns();
 
    // Traverse every table showing/hiding columns as necessary
    for (var i = 0; i < arrayColumns.length; i++) {
 
        for (var j = 0; j < detailTables.length; j++) {
            // Set detail table column visibility to match
            var detailColName = detailTables[j]._columnsInternal[i]._element.UniqueName;
 
            if (masterColumnName == detailColName) {
                isDetailTable = true;
                if (showColumn) {
                    detailTables[j].showColumn(i);
                }
                else {
                    detailTables[j].hideColumn(i);
                }
            }
        }
    }
 
    ResizeAllNoteColumns();
 
    isDetailTable = false;
}

The difference is the bolded section above -- Instead of trying to use column.set_visible(showColumn) to set the value, I went ahead and used the .showColumn and .hideColumn functions.  The "isDetailTable" variable was used to determine whether the call was being made by a detail table; if so, exit the function (otherwise it went into an infinite recursive loop).

(NOTE:  The ResizeAllNoteColumns() method resizes the detail table columns so that they match the master table view columns.)

Not sure whether this is the "right" way of doing it, but it works like a champ.
0
Kostadin
Telerik team
answered on 05 Dec 2013, 09:25 AM
Hi Matt,

This is another possible way to show/hide a column on the client. I am glad you we were able to find a solution for your case.

Regards,
Kostadin
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Grid
Asked by
Matt
Top achievements
Rank 1
Answers by
Matt
Top achievements
Rank 1
Kostadin
Telerik team
Share this question
or