Expand/Collapse group headers not working for grid

[Damodar]

Hi,

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">   
                <GroupByExpressions>
                    <telerik:GridGroupByExpression  >
                        <SelectFields>
                            <telerik:GridGroupByField FieldName="GroupIndexName"  />
                        </SelectFields>
                        <GroupByFields>
                            <telerik:GridGroupByField FieldName="GroupIndexName" />
                        </GroupByFields>
                    </telerik:GridGroupByExpression>
                </GroupByExpressions>
                <GroupHeaderItemStyle CssClass="listItem" />   
                <Columns>
                        <telerik:GridTemplateColumn>
                            <ItemTemplate>       
                                <div class="itemText"><%#Eval("JobDescription") %></div>
                            </ItemTemplate>       
                        </telerik:GridTemplateColumn>   
                </Columns>
            </MasterTableView>   
            <ClientSettings AllowGroupExpandCollapse="true">
                <ClientEvents OnGridCreated="GridCreated" />
            </ClientSettings>               
        </telerik:RadGrid>

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
            ExpandCollapseAllGroups('rgCollapse');
        }
       
        //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++) {
                    $telerik.$(groupHeaders[i]).click();
                }
            }
            //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,
Damodar

[Antonio Stoilkov]

Hi Stayajit,

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

• http://www.telerik.com/account/your-products/internal-builds.aspx

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.

Greetings,
Antonio Stoilkov
the Telerik team