Expand/Collapse group headers not working for grid

2 posts, 0 answers
  1. Damodar
    Damodar avatar
    2 posts
    Member since:
    Jul 2011

    Posted 13 Mar 2012 Link to this post


    I am using the following mark up for a feature in my application with expandable group headers, so that i can hide and show accordingly via expand/collapse link button. The mark up for the grid is as below:

            <telerik:RadGrid ID="m_UIExperienceGrid" runat="server" SkinID="RecruitmentGrid_NoHeaders" CssClass="SimpleGrid summary"
                AllowMultiRowSelection="false" OnItemDataBound="OnExperienceGridItemDataBound">
                <MasterTableView AutoGenerateColumns="false" GroupLoadMode="Client" EditMode="InPlace">   
                        <telerik:GridGroupByExpression  >
                                <telerik:GridGroupByField FieldName="GroupIndexName"  />
                                <telerik:GridGroupByField FieldName="GroupIndexName" />
                    <GroupHeaderItemStyle CssClass="listItem" />   
                                    <div class="itemText"><%#Eval("JobDescription") %></div>
                <ClientSettings AllowGroupExpandCollapse="true">
                    <ClientEvents OnGridCreated="GridCreated" />

    The mark up for link button that does the collapse/expand is as below:
            <asp:LinkButton ID="m_UIExpandAllExperiencesLink" runat="server" OnClientClick="return ExpandCollapseAllGroups('rgExpand');"/>

            <asp:LinkButton ID="m_UICollapseAllExperiencesLink" runat="server" OnClientClick="return ExpandCollapseAllGroups('rgCollapse');" />

    The java scripts are as below:

        function GridCreated(sender, eventArgs) {
                //collapse all items when page loads
            //Expands or collapses all group headers based on expandCollapseClass
            function ExpandCollapseAllGroups(expandCollapseClass) {
                var tableView = $find('<%=m_UIExperienceGrid.ClientID %>').get_masterTableView();
                var groupHeaders = $telerik.$(tableView.get_element()).find('INPUT[class="'+ expandCollapseClass +'"]');
                if (groupHeaders.length > 0) {
                    for (var i = 0; i < groupHeaders.length; i++) {
                //return false to prevent postbacks
                return false;

    Essentially i leverage the css inbuilt for the telerik grid to do the expand/collpase from the client side.

    This worked for me well a few days back, but i am facing issues recently, as per the screenshot attached, i have some comments in them as well. While expanding/collapsing the items is not happening individually too, just the expand/collapse image changes.
    I have grid with grouping else where in my appln with server side expansion and collpase which is working fine but in the above scenario, it is not working.

    Thanks and regards,

  2. Antonio Stoilkov
    Antonio Stoilkov avatar
    530 posts

    Posted 16 Mar 2012 Link to this post

    Hi Stayajit,

    You could try downloading the latest internal build and observe if the issue still persists.

    I tried to replicate the issue which you described, but to no avail. Attached to this message, you will find the code which I used for testing.

    Please, take a look at it and let me know if there are any differences at your end, which I may be leaving out.

    Antonio Stoilkov
    the Telerik team
    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 their blog feed now.
Back to Top