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 144 Views

Grid

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

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 |

...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 |

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

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;

}

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.

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Issue Hiding Detail Table Column in Self-Referencing Hierarchical Grid

10 Answers, 1 is accepted