We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to keep Grid's Grouping Collapsed ?

Thread ID:

Created:

Updated:

Platform:

Replies:

146838 Aug 22,2019 09:00 AM UTC Aug 23,2019 09:12 AM UTC ASP.NET Web Forms 1
loading
Tags: Grid
Gangatharan Baskaran
Asked On August 22, 2019 09:00 AM UTC

I'm working on a ASP.NET web project and I have a Grid, Grouped by JS. The Grid is populated after several selection from user and they hit a search button. So, the data source of the Grid is assigned in a button click event at back end. I want to keep the grouping collapsed all time. Whenever a user search for something, the result should be grouped but all the groups must be collapsed. User can only view it by expanding manually. How can I keep the groups collapsed all the time?

         <ej:Grid ID="Grid" CssClass="table-responsive" AllowGrouping="true"  AllowScrolling="true" AllowPaging="true" AllowResizeToFit="true" AllowResizing="true" AllowSearching="true" runat="server"  AllowSorting="true" AllowMultiSorting="true">
                            <ClientSideEvents RecordDoubleClick="rowSelect"  />    
                            <ToolbarSettings ShowToolbar="true" ToolbarItems="search" ></ToolbarSettings>
                            <Columns>
                                <ej:Column Field="Id" Visible="false" HeaderText="Id" >
                                </ej:Column>
                               <ej:Column Field="Js" HeaderText="JS" >
                                </ej:Column>
                                <ej:Column Field="Product" HeaderText="Product" >
                                </ej:Column>
                                <ej:Column Field="Staffname" HeaderText="Staff" >
                                </ej:Column>
                                <ej:Column Field="Jobprocess" HeaderText="Work Done" >
                                </ej:Column>
                                <ej:Column Field="Totalpoints" HeaderText="Task Points" >
                                </ej:Column>
                                <ej:Column Field="Totalstaffpoints" HeaderText="Task Points Gained" >
                                </ej:Column>
                                <ej:Column Field="Jobsheetpoints" Visible="false" HeaderText="Task Points" >
                                </ej:Column>
                            </Columns>
                            <GroupSettings GroupedColumns="Js" EnableDropAreaAnimation="true" ShowToggleButton="true" ShowGroupedColumn="true"></GroupSettings>
                            <SummaryRows>
                                <ej:SummaryRow ShowTotalSummary="true">
                                    <SummaryColumn>
                                        <ej:SummaryColumn SummaryType="Sum" DisplayColumn="Totalpoints" DataMember="Jobsheetpoints" Prefix="JS Points = " />
                                        <ej:SummaryColumn SummaryType="Sum" DisplayColumn="Totalstaffpoints" DataMember="Totalstaffpoints" Prefix="Points Gained = " />
                                    </SummaryColumn>
                                </ej:SummaryRow>
                            </SummaryRows>
                        </ej:Grid>

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On August 23, 2019 09:12 AM UTC

Hi Gangatharan, 

Thanks for contacting Syncfusion Support. 

Query#:- I want to keep the grouping collapsed all time. Whenever a user search for something, the result should be grouped but all the groups must be collapsed. User can only view it by expanding manually. How can I keep the groups collapsed all the time? 
 
We have checked your query and achieved your requirement using DataBound and ActionComplete event of the Grid. In the DataBound event we have used collapseAll method to collapse the Grid at initialRendering itself. And also on ActionComplete event we need to use collaspeAll method when args.requestType as searching

Please refer to the code example:- 

<ej:Grid ID="Grid" CssClass="table-responsive" AllowGrouping="true" AllowScrolling="true" > 
     <ClientSideEvents DataBound="dataBound" ActionComplete="complete"/> 
        <ToolbarSettings ShowToolbar="true" ToolbarItems="search"></ToolbarSettings> 
        <Columns> 
            <ej:Column Field="Id" Visible="false" HeaderText="Id"> 
            </ej:Column> 
            .   .    . 
        </Columns> 
         
    </ej:Grid> 
 
<script> 
   function dataBound(args) { 
        this.collapseAll(); 
    } 
    function complete(args) { 
       if (args.requestType == "searching") { 
            this.collapseAll(); 
      } 
    } 
</script> 


Refer to the API Link:- 

Please get back to us if you need any further assistance. 

Regards, 
Farveen sulthana T 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon