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

Expanding/Collapsing sections using Header Text as Hyperlink

4 Answers 216 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Reid
Top achievements
Rank 2
Reid asked on 13 Jan 2009, 03:20 AM
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

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 13 Jan 2009, 05:31 AM
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 Hidden1document.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.
0
Reid
Top achievements
Rank 2
answered on 13 Jan 2009, 02:58 PM
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.
0
Princy
Top achievements
Rank 2
answered on 14 Jan 2009, 05:26 AM
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 Hidden1document.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.
0
Reid
Top achievements
Rank 2
answered on 16 Jan 2009, 02:34 PM
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.

Tags
Grid
Asked by
Reid
Top achievements
Rank 2
Answers by
Princy
Top achievements
Rank 2
Reid
Top achievements
Rank 2
Share this question
or