Expanding/Collapsing sections using Header Text as Hyperlink

[Reid]

I have a grid that shows the Group Title text to the right of the expand/collapse icon.  I would like the text to be clickable or a hyperlink that expands the item in the group like the expand/collapse icon does.

Thanks

[Princy]

Hello Reid,

Try adding a hyperlink to the control collection of the groupheader and then add an onClick attribute for the hyperlink and pass the Hyperlink text to a hidden field on the client. You can then check for the text of the clicked button and expand/collapse the group accordingly. Check out the code below to understand better:
cs:

protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        foreach (GridGroupHeaderItem groupHeader in RadGrid1.MasterTableView.GetItems(GridItemType.GroupHeader))
        {
            string strtxt = groupHeader.DataCell.Text; // accessing the groupheader text
            HyperLink hyperlnk = new HyperLink(); // creting new hyperlink
            hyperlnk.Text = strtxt;
            groupHeader.DataCell.Controls.Clear();
            groupHeader.DataCell.Controls.Add(hyperlnk); // adding hyperlink to the groupheader

            hyperlnk.Attributes.Add("onClick ", "return Expand('" + strtxt + "');"); // adding onClick attribute for the hyperlink

            if (hyperlnk.Text == Hidden1.Value) // comparing the hyperlink and hidden field texts
            {
                groupHeader.Expanded = !groupHeader.Expanded; // expand/collapse the group
            }
        }
   }

js:

<script type="text/javascript">

function Expand(text)

{

var Hidden1= document.getElementById("Hidden1");

Hidden1.value = text;  //saving the header text in a hidden field

__doPostBack('<%=RadGrid1.ClientID %>');

}

</script>

aspx:

<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server"  OnPreRender="RadGrid1_PreRender" >
   <MasterTableView DataSourceID="SqlDataSource1">
       <Columns>
         ....
     </Columns>
   </MasterTableView>
</telerik:RadGrid>

<input id="Hidden1" name="Hidden1" runat="server" type="hidden" />

Thanks
Princy.

[Reid]

Fantastic reply Princy but I made the mistake of terming it a "Group" header.  Actually it is a grid with a hieriachal relationship where the MasterView shows the Food Category, the next level DetailTable (GridView) is the Food Sub Category, and the Food Subcategory Gridview contains a  "Food Items" Detail Table.

I want the Food Category and Food Sub Category views to expand/collapse when you click on the text.

In your code you loop through the group headers. (GridItemType.GroupHeader)  I am looking at the constants and am not sure what item type I should be looping though other than the GridGroupHeaderItem.

[Princy]

Hello Reid,

I suppose you want to expand your DetailTables on clicking their parent items. If that is the case, you can try out the following code:
cs:

protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
      foreach(GridDataItem dataItem in RadGrid1.MasterTableView.Items)
        {
           string strtxt = dataItem["FoodCategory"].Text;
           dataItem["FoodCategory"].Attributes.Add("onClick ", "return Expand('" + strtxt + "');");
            if (dataItem["FoodCategory"].Text == Hidden1.Value)
            {
               dataItem.Expanded = !dataItem.Expanded;
            }

            if (dataItem.Expanded)
            {
                GridTableView nestedView = (GridTableView)dataItem.ChildItem.NestedTableViews[0];// access the first detail table
                foreach (GridDataItem item in nestedView.Items)//loop through the items in first detail table
                {
                    string strtxt1 = item["SubFoodCategory"].Text;
                    item["SubFoodCategory"].Attributes.Add("onClick ", "return Expand('" + strtxt1 + "');");

                    if (item["SubFoodCategory"].Text == Hidden1.Value)
                    {
                        item.Expanded = !item.Expanded;
                    }
                }
            }
        }
     }

aspx:

<script type="text/javascript">

function Expand(text)

{

var Hidden1= document.getElementById("Hidden1");

Hidden1.value = text;

__doPostBack('<%=RadGrid1.ClientID %>');

}

</script>

<form id="form1" runat="server">

<div>

<input id="Hidden1" name="Hidden1" runat="server" type="hidden" />

...

Thanks
Princy.

[Reid]

Princy,

Thank you again for the reply.  I have been working on this issue and others so I have not had time until now to reply.

I have retrofitted your code in place and had to make a few changes and have it mostly working.  The result is that when you click on either a Primary Category or Sub Category the following happens:

1. The page initially loads with all the Primary and Sub categories expanded (this is fine)
2. When you click on either a Primary category item or one of it's nested Sub category items the grid contracts to show *only* the outermost Primary categories.  In other words only two states, all Categories and Sub Categories showing or just the root Primary category. The Food Menu Items (third and final detail table) never show.

I did not mention that this website is a Master/Detail template design so the hidden input had to be contained in the Master <form> tag.  And the JavaScript could not be contained in the master template as well because the <%RadGrid1.ClientID%> is out scope on the master template, possibly that code could of been amended, either way the JavaScript handler is firing which is confirmed by a breakpoint in the JS code.

 

I have the code in place and had to make a few changes to the PreRender event. 

C#

	protected void grdFoodMenuItems_PreRender(object sender, EventArgs e)
	{
	FoodCategory foodCategory = null;
	foreach ( GridDataItem dataItem in grdFoodMenuItems.MasterTableView.Items )
	{
	string strInputValue = null;
	// Request.Params["ExpandCollapseHeaderValue"];
	HtmlInputHidden hiddenInput = (HtmlInputHidden) Master.FindControl("ExpandCollapseHeaderValue");
	string categoryText = dataItem["PrimaryFoodCategory"].Text;
	string jScriptParam1 = categoryText;
	string jScriptFunctionText = "return ExpandCollapseHeader('" + jScriptParam1 + "');";
	dataItem["PrimaryFoodCategory"].Attributes.Add("onClick ", jScriptFunctionText);
	if ( dataItem["PrimaryFoodCategory"].Text == categoryText )
	{
	dataItem.Expanded = !dataItem.Expanded;
	}
	GridTableView nestedView = (GridTableView) dataItem.ChildItem.NestedTableViews[0];// access the first detail table
	foreach ( GridDataItem item in nestedView.Items )//loop through the items in first detail table
	{
	if ( item.DataItem != null )
	{
	foodCategory = (FoodCategory) item.DataItem;
	jScriptParam1 = foodCategory.Category;
	jScriptFunctionText = "return ExpandCollapseHeader('" + jScriptParam1 + "');";
	item["FoodSubCategory"].Attributes.Add("onClick ", jScriptFunctionText);
	if ( item["FoodSubCategory"].Text == foodCategory.Category )
	{
	item.Expanded = !item.Expanded;
	}
	}
	}
	if ( dataItem.Expanded )
	{
	nestedView = (GridTableView) dataItem.ChildItem.NestedTableViews[0];// access the first detail table
	foreach ( GridDataItem item in nestedView.Items )//loop through the items in first detail table
	{
	if ( item.DataItem != null )
	{
	foodCategory = (FoodCategory) item.DataItem;
	jScriptParam1 = foodCategory.Category;
	jScriptFunctionText = "return ExpandCollapseHeader('" + jScriptParam1 + "');";
	item["FoodSubCategory"].Attributes.Add("onClick ", jScriptFunctionText);
	if ( item["FoodSubCategory"].Text == foodCategory.Category )
	{
	item.Expanded = !item.Expanded;
	}
	}
	}
	}
	}
	}

ASPX

	<tr>
	<td align="left" valign="top">
	&nbsp;
	<telerik:RadGrid ID="grdFoodMenuItems" runat="server" AutoGenerateColumns="False"
	GridLines="None" OnDetailTableDataBind="grdFoodMenuItems_DetailTableDataBind"
	OnNeedDataSource="grdFoodMenuItems_NeedDataSource" DataMember="FoodPrimaryCategory"
	Skin="Black" OnColumnCreating="grdFoodMenuItems_ColumnCreating" OnItemCommand="grdFoodMenuItems_ItemCommand"
	OnColumnCreated="grdFoodMenuItems_ColumnCreated" OnPreRender="grdFoodMenuItems_PreRender">
	<HeaderContextMenu EnableTheming="True">
	<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
	</HeaderContextMenu>
	<MasterTableView Name="FoodCategory" DataKeyNames="FoodPrimaryCategoryPK" DataMember="FoodPrimaryCategory"
	ShowHeader="False">
	<DetailTables>
	<telerik:GridTableView runat="server" Name="FoodSubCategory" DataKeyNames="PrimaryKey"
	DataMember="FoodSubCategory" EnableTheming="False">
	<DetailTables>
	<telerik:GridTableView runat="server" DataKeyNames="PrimaryKey" DataMember="FoodMenuItems"
	Name="FoodMenuItems" ShowHeader="False">
	<RowIndicatorColumn>
	<HeaderStyle Width="0px" />
	</RowIndicatorColumn>
	<ExpandCollapseColumn>
	<HeaderStyle Width="0px" />
	</ExpandCollapseColumn>
	<Columns>
	<telerik:GridBoundColumn DataField="MenuTitle" UniqueName="MenuTitle">
	<ItemStyle Width="300px" />
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="ShortDescription" UniqueName="ShortDescription">
	<ItemStyle Width="300px" />
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="Price" DataType="System.Decimal" UniqueName="Price"
	DataFormatString="{0:C}">
	</telerik:GridBoundColumn>
	</Columns>
	<EditFormSettings EditFormType="Template">
	<FormTemplate>
	<table class="TableGeneric">
	<tr>
	<td colspan="2" class="MenuHeader">
	Editing Menu Items
	</td>
	</tr>
	<tr>
	<td class="FieldLabel">
	&nbsp;
	</td>
	<td class="FieldCell">
	&nbsp;
	</td>
	</tr>
	<tr>
	<td class="FieldLabel">
	Menu Title:
	</td>
	<td>
	<telerik:RadTextBox ID="txtMenuTitle" runat="server" Skin="Sunset" Width="400px"
	Font-Names="Tahoma,Arial,San-Serif" Font-Size="11px" InvalidStyleDuration="100"
	LabelCssClass="radLabelCss_Sunset" Text='<%# Eval("MenuTitle") %>'>
	</telerik:RadTextBox>
	</td>
	</tr>
	<tr>
	<td class="FieldLabel">
	Primary Category:
	</td>
	<td>
	<telerik:RadComboBox ID="cbFoodPrimaryCategory" runat="server" Skin="Sunset" Width="400px"
	Font-Names="Tahoma,Arial,San-Serif" Font-Size="11px" EnableScreenBoundaryDetection="False">
	<CollapseAnimation Duration="200" Type="OutQuint" />
	</telerik:RadComboBox>
	</td>
	</tr>
	<tr>
	<td class="FieldLabel">
	Sub Category:
	</td>
	<td>
	<telerik:RadComboBox ID="cbFoodSubCategory" runat="server" EnableScreenBoundaryDetection="False"
	Font-Names="Tahoma,Arial,San-Serif" Font-Size="11px" Skin="Sunset" Width="400px">
	<CollapseAnimation Duration="200" Type="OutQuint" />
	</telerik:RadComboBox>
	</td>
	</tr>
	<tr>
	<td valign="top" class="FieldLabel">
	Short Description:
	</td>
	<td>
	<telerik:RadTextBox ID="txtShortDescription" runat="server" Rows="3" Skin="Sunset"
	TextMode="MultiLine" Width="400px" Font-Names="Tahoma,Arial,San-Serif" Font-Size="11px"
	InvalidStyleDuration="100" LabelCssClass="radLabelCss_Sunset" Text='<%# Eval("ShortDescription") %>'>
	</telerik:RadTextBox>
	</td>
	</tr>
	<tr>
	<td class="FieldLabel" valign="top">
	Extended Description:
	</td>
	<td>
	<telerik:RadTextBox ID="txtExtendedDescription" runat="server" Rows="3" Skin="Sunset"
	TextMode="MultiLine" Width="400px" Font-Names="Tahoma,Arial,San-Serif" Font-Size="11px"
	InvalidStyleDuration="100" LabelCssClass="radLabelCss_Sunset" Text='<%# Eval("ExtendedDescription") %>'>
	</telerik:RadTextBox>
	</td>
	</tr>
	<tr>
	<td class="FieldLabel" valign="top">
	Ingredient List:
	</td>
	<td>
	<telerik:RadTextBox ID="txtIngredientList" runat="server" BorderStyle="None" Rows="3"
	Skin="Sunset" TextMode="MultiLine" Width="400px" Font-Names="Tahoma,Arial,San-Serif"
	Font-Size="11px" InvalidStyleDuration="100" LabelCssClass="radLabelCss_Sunset"
	Text='<%# Eval("IngredientsList") %>'>
	</telerik:RadTextBox>
	</td>
	</tr>
	<tr>
	<td class="FieldLabel" valign="top">
	Ordering Rules:
	</td>
	<td>
	<telerik:RadTextBox ID="txtOrderingRules" runat="server" Font-Names="Tahoma,Arial,San-Serif"
	Font-Size="11px" LabelCssClass="riLabel radLabelCss_Sunset" Skin="Sunset" Text='<%# Eval("OrderingRules") %>'
	Width="400px">
	</telerik:RadTextBox>
	</td>
	</tr>
	<tr>
	<td class="FieldLabel">
	Tag Line:
	</td>
	<td>
	<telerik:RadTextBox ID="txtTagLine" runat="server" Skin="Sunset" Width="400px" Font-Names="Tahoma,Arial,San-Serif"
	Font-Size="11px" InvalidStyleDuration="100" LabelCssClass="radLabelCss_Sunset"
	Text='<%# Eval("TagLine") %>'>
	</telerik:RadTextBox>
	</td>
	</tr>
	<tr>
	<td class="FieldLabel">
	Price:
	</td>
	<td>
	<telerik:RadTextBox ID="txtPrice" runat="server" Skin="Sunset" Width="400px" Font-Names="Tahoma,Arial,San-Serif"
	Font-Size="11px" InvalidStyleDuration="100" LabelCssClass="radLabelCss_Sunset"
	Text='<%# Eval("Price") %>'>
	</telerik:RadTextBox>
	</td>
	</tr>
	<tr>
	<td class="FieldLabel">
	Image URL:
	</td>
	<td>
	<telerik:RadTextBox ID="txtImageURL" runat="server" Font-Names="Tahoma,Arial,San-Serif"
	Font-Size="11px" InvalidStyleDuration="100" LabelCssClass="radLabelCss_Sunset"
	Skin="Sunset" Text='<%# Eval("ImageURL") %>' Width="400px">
	</telerik:RadTextBox>
	</td>
	</tr>
	<tr>
	<td class="FieldLabel">
	Country:
	</td>
	<td>
	<telerik:RadComboBox ID="cbCountry" runat="server" Font-Names="Tahoma,Arial,San-Serif"
	Font-Size="11px" Skin="Sunset" Width="400px" EnableScreenBoundaryDetection="False">
	<CollapseAnimation Duration="200" Type="OutQuint" />
	</telerik:RadComboBox>
	</td>
	</tr>
	<tr>
	<td class="FieldLabel">
	&nbsp;
	</td>
	<td>
	&nbsp;
	</td>
	</tr>
	<tr>
	<td class="FieldLabel">
	&nbsp;
	</td>
	<td>
	&nbsp;
	</td>
	</tr>
	<tr>
	<td class="FieldLabel">
	</td>
	<td>
	</td>
	</tr>
	<tr>
	<td colspan="2">
	<table>
	<tr>
	<td>
	<asp:Button ID="btnSave" runat="server" CommandArgument="PerformInsert" CssClass="ButtonStyle"
	Text="Insert" CommandName="PerformInsert" />
	<asp:Button ID="btnCancel" runat="server" CausesValidation="False" CommandArgument="Cancel"
	CommandName="Cancel" CssClass="ButtonStyle" Text="Cancel" />
	</td>
	<td>
	&nbsp;
	</td>
	</tr>
	</table>
	</td>
	</tr>
	</table>
	</FormTemplate>
	</EditFormSettings>
	<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
	Font-Underline="False" ForeColor="White" Wrap="True" />
	</telerik:GridTableView>
	</DetailTables>
	<RowIndicatorColumn>
	<HeaderStyle Width="20px" />
	</RowIndicatorColumn>
	<ExpandCollapseColumn Visible="True">
	<HeaderStyle Width="20px" />
	</ExpandCollapseColumn>
	<Columns>
	<telerik:GridBoundColumn DataField="FoodSubCategory" UniqueName="FoodSubCategory">
	<HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
	Font-Underline="False" ForeColor="Cyan" Width="100%" Wrap="False" />
	<ItemStyle ForeColor="Cyan" />
	</telerik:GridBoundColumn>
	</Columns>
	<ItemTemplate>
	<%# Eval("Category")%>
	</ItemTemplate>
	<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
	Font-Underline="False" Wrap="True" />
	<GroupHeaderItemStyle BackColor="#663300" Font-Bold="False" Font-Italic="False" Font-Overline="False"
	Font-Strikeout="False" Font-Underline="False" Wrap="True" />
	<HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
	Font-Underline="False" ForeColor="#3366CC" Wrap="True" />
	</telerik:GridTableView>
	</DetailTables>
	<RowIndicatorColumn>
	<HeaderStyle Width="20px"></HeaderStyle>
	</RowIndicatorColumn>
	<ExpandCollapseColumn Visible="True">
	<HeaderStyle Width="20px"></HeaderStyle>
	</ExpandCollapseColumn>
	<Columns>
	<telerik:GridBoundColumn DataField="PrimaryFoodCategory" UniqueName="PrimaryFoodCategory">
	<HeaderStyle CssClass="RowHeaderBrownGlass" />
	<ItemStyle ForeColor="#CC9900" />
	</telerik:GridBoundColumn>
	</Columns>
	<EditFormSettings EditFormType="Template">
	</EditFormSettings>
	<AlternatingItemStyle ForeColor="#E9E9E9" />
	</MasterTableView>
	<GroupHeaderItemStyle ForeColor="White" />
	<ClientSettings>
	</ClientSettings>
	<FilterMenu EnableTheming="True">
	<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
	</FilterMenu>
	<ActiveItemStyle ForeColor="Aqua" />
	<CommandItemStyle ForeColor="Aqua" />
	</telerik:RadGrid>
	<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
	Width="100%">
	<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
	style="border: 0px;" />
	</telerik:RadAjaxLoadingPanel>
	<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
	<AjaxSettings>
	<telerik:AjaxSetting AjaxControlID="grdFoodMenuItems">
	<UpdatedControls>
	<telerik:AjaxUpdatedControl ControlID="grdFoodMenuItems" />
	</UpdatedControls>
	</telerik:AjaxSetting>
	</AjaxSettings>
	</telerik:RadAjaxManager>
	</td>
	</tr>

ASPX (Master)

	<form id="frmMain" runat="server">
	<div>
	<input id="ExpandCollapseHeaderValue" name="ExpandCollapseHeaderValue" runat="server" type="hidden" />
	</div>
	</form>

Here is the JavaScript: (external .js)
JavaScript

	function ExpandCollapseHeader(navElementText) {
	var hiddenInputControl = document.getElementsByName("ExpandCollapseHeaderValue");
	if (hiddenInputControl != null) {
	hiddenInputControl.value = navElementText;  //saving the header text in a hidden field
	__doPostBack('<%=grdFoodMenuItems.ClientID %>');
	}
	return true;
	}

Can you see the error here because I haved spent countless hours on this issue.