Unable to expand/collapse group header in Grid

[Damodaran]

Hi,

I have a grid with group headers, i need to do expand all/collapse all as well as ensure the normal expand/collapse works too. I achieved expand all/collapse all via the below js:

        var EXPAND_CSS_CLASS = "<%=CSSConstants.EXPAND_EXPERIENCE_CSS%>";//rgExpand
        var COLLAPSE_CSS_CLASS = "<%=CSSConstants.COLLAPSE_EXPERIENCE_CSS%>";//rgCollapse
       
        //Expands or collapses all group headers based on expandCollapseClass
        function ExpandCollapseAllGroups(isExpand) {
            var sourceClass = (isExpand) ? EXPAND_CSS_CLASS : COLLAPSE_CSS_CLASS;
            var destinationClass = (isExpand) ? COLLAPSE_CSS_CLASS : EXPAND_CSS_CLASS;
            var toolTip = "<%=Tokens.CandidateExpandGroupToolTipText %>";
            if (isExpand) {
                toolTip = "<%=Tokens.CandidateCollapseGroupToolTipText %>";
            }
            // change the +/- states
            $("." + sourceClass).each(function(button) {
                $(this).removeClass(sourceClass).addClass(destinationClass);
                //change the tool tip for expand/collapse buttons
                $(this).attr("title", toolTip);
            });
            // hide/show the rows
            $("#<%=m_UIExperienceGrid.ClientID %> .<%=CSSConstants.GRID_ROW_CSS %>, #<%=m_UIExperienceGrid.ClientID %> .<%=CSSConstants.GRID_ALT_ROW_CSS %>").each(
                function(button) {
                    if (isExpand) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
            });
            //return false to prevent postbacks
            return false;
        }

The issue is, i am unable to do an individual expand/collapse due to the mark up for grid being tampered by some highlight javascript functionality built in our application which will merely add span tags around the keywords i search to highlight in my application. The keywords i search corresponds to words displayed in the header item of the grid. Once the markup is tampered, the telerik grid individual expand/collapse breaks. Hence i need to somehow remove the telerik generated expand/collapse js associated with the input tags that bear the class "rgExpand" or  "rgCollapse" and add custom js to expand/collapse the groups individually. I tried the below js, it is not working

    $(".<%=CSSConstants.EXPAND_EXPERIENCE_CSS%>, .<%=CSSConstants.COLLAPSE_EXPERIENCE_CSS%>").attr('onclick', '');
$(".<%=CSSConstants.EXPAND_EXPERIENCE_CSS%>, .<%=CSSConstants.COLLAPSE_EXPERIENCE_CSS%>").each(
        function() {
            $(this)[0].onclick = function() {
                //TODO: if you need to know if the element is expanded, use the next line of code... otherwise remove it
                //var isExpanded = $(this).attr("class") == "rgCollapse";
                $(this).parents("TR.<%=CSSConstants.GRID_ROW_GROUP_HEADER_CSS %>").next("TR").toggle();
            }
        });

Please suggest me a solution as i have pretty much exhausted all the options.

Thanks and regards,
Damodar

[Pavlina]

Hi,

You can learn how to expand/collapse grouped grid client-side on external checkbox click reviewing the project attached to the bottom of code library below:
http://www.telerik.com/community/code-library/aspnet-ajax/grid/expand-collapse-grouped-grid-client-side-on-external-control-click.aspx

Greetings,
Pavlina
the Telerik team