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

Unable to expand/collapse group header in Grid

1 Answer 44 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Damodaran
Top achievements
Rank 1
Damodaran asked on 24 May 2012, 10:46 AM
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

1 Answer, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 24 May 2012, 05:14 PM
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
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.
Tags
Grid
Asked by
Damodaran
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Share this question
or