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. Image for the cookie policy date

How to keep Grid's Grouping Collapsed ?

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>

1 Reply

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon