All groups collapsed at start

[Michael Lambert]

I have a Grid on an ASP.net Form that is initialize with the GroupSetting to a particular field.  When the Page opens all the groups are expanded, I would prefer then to be all collapsed.  Also how can a control expand/collapse programmatically?  I know i can always use ctrl + UP arrow.

Mike

[Mani Sankar Durai]

Hi Michael, 

Thanks for contacting Syncfusion support, 

Query 1: When the Page opens all the groups are expanded, I would prefer then to be all collapsed. 

 

   We have analyzed your query and achieved your requirement by using DataBound event of grid. 

The DataBound event will get triggered when the grid is bound with data during initial rendering.  

 

Please refer the below code example, 

[Default.aspx] 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

<ej:Grid ID="Grid" runat="server" AllowPaging="True" AllowGrouping="true"> 

     <GroupSettings GroupedColumns="CustomerID" /> 

            <Columns> 

… 

            </Columns> 

     <ClientSideEvents Create="create" DataBound="databound"/> 

        </ej:Grid>  

 

<script> 

   function databound(args) { 

        var grid = $(".e-grid").ejGrid("instance"); 

        if (args.model.groupSettings.groupedColumns.length) 

        grid.collapseAll(); 

    } 

</script> 

</asp:Content> 

     

 

From the above code example, in DataBound event of grid we have collapsed all the grouped columns by calling collapseAll method of grid. 

Please refer the documentation link to know about dataBound event and collapseAll method of grid, 

Link: https://help.syncfusion.com/js/api/ejgrid#events:databound 

https://help.syncfusion.com/js/api/ejgrid#methods:collapseall 

We have also prepared a sample that can be downloaded from the below link 

Link: http://www.syncfusion.com/downloads/support/forum/125427/ze/Expandcollpase-1657348908 

Query 2: How can a control expand/collapse programmatically          

       We can expand/collapse programmatically by using expandCollapse method of grid. 

Please refer the documentation link about expandCollapse method, 

Link: https://help.syncfusion.com/js/api/ejgrid#methods:expandcollapse 

 

Also please refer the code example, 

[Default.aspx] 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

     

<ej:NumericTextBox runat="server" ID="textbox" ClientSideOnChange="change"></ej:NumericTextBox> 

 

<ej:Grid ID="Grid" runat="server" AllowPaging="True" AllowGrouping="true"> 

     <GroupSettings GroupedColumns="CustomerID" /> 

  </ej:Grid>    

 

<script> 

    function change(args) { 

        var grid = $(".e-grid").ejGrid("instance"); 

        var detailRow =grid.element.find(".e-recordpluscollapse"); 

        grid.expandCollapse($(detailRow[args.value]));   

} 

</script> 

 

In the above code example, we have rendered NumericTextBox and based on changing the value in the numeric text box we have passed the changed value as an index using change event of NumericTextBox to get the corresponding target element (which is present in the first column of grid (i.e) expand and collapse icon) as a parameter in expandCollapse method of grid. From the above table we have expand the grid programmatically. Likewise the same can be done for collapsing the grid programmatically by changing the class name as “.e-recordplusexpand” instead of ".e-recordpluscollapse“ 

 

Please refer the documentation link to know about change event of numeric textbox, 

Link: https://help.syncfusion.com/js/api/ejtextboxes#events:change 

We have also prepared a sample based on the above query that can be downloaded from the below link, 

Link: http://www.syncfusion.com/downloads/support/forum/125427/ze/Expandsample-1892927448 

Please let us know if you need further assistance, 

Regards, 

Manisankar Durai. 

[Michael Lambert]

Hi Manisanka,
That works, but with a few issues:
First, it I use pages, every time I go to a new page everything expands on the new page. 
Second, if I have one group open and edit a record, upon saving it goes to all collapse whereby hiding the just edited record.  Confusing for the use.

What I'd like is to have all groups collapsed at the start (your previous reply works for this).
When I go to a new page in the grid all groups are collapsed.
If I'm editing a record in an expanded group, when I save the record the group remains expanded (others groups retain their previous state) and the edited record stays Selected.

Thanks,
Mike

[Mani Sankar Durai]

Hi Michael, 

Query: When I go to a new page in the grid all groups are collapsed && If I'm editing a record in an expanded group, when I save the record the group remains expanded (others groups retain their previous state) and the edited record stays Selected. 

 

    We have achieved your requirement by using actionComplete and dataBound event of grid. 

Please refer the documentation link about actionComplete event of grid, 

Link:  https://help.syncfusion.com/js/api/ejgrid#events:actioncomplete 

 

Please refer the below code example, 

 

[Default.aspx] 

<ej:Grid ID="Grid" runat="server" AllowPaging="True" AllowGrouping="true"> 

     <EditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" /> 

     <ToolbarSettings ShowToolbar="true" ToolbarItems="add,delete,edit,update,cancel"></ToolbarSettings> 

     <GroupSettings GroupedColumns="CustomerID" /> 

       <Columns> 

…            </Columns> 

     <ClientSideEvents ActionComplete="actioncomplete" DataBound="databound"/> 

        </ej:Grid>  

<script> 

    var a; 

… 

    function databound(args) { 

        var grid = $(".e-grid").ejGrid("instance"); 

        if (args.model.groupSettings.groupedColumns.length) 

        grid.collapseAll(); 

      } 

      function actioncomplete(args) { 

          var gridObj = $(".e-grid").ejGrid("instance"); 

          if (args.requestType == "beginedit") 

              a = args.rowIndex; 

          if (args.requestType == "save") { 

              this.selectRows(a); 

              gridObj.collapseAll(); 

              var currentTr = $(gridObj.getRows()).eq(gridObj.selectedRowsIndexes[0]); 

              for (i = 0; i < currentTr.parents("tr").length; i++) { 

                  var curEl = currentTr.parents("tr").eq(i).prev().find(".e-recordpluscollapse"); 

                  gridObj.expandCollapse(curEl);  //Expanded the record and make the edited record to be selected. 

 

              } 

          } 

          if (args.model.groupSettings.groupedColumns.length && args.requestType == "paging" || args.requestType == "grouping") 

              gridObj.collapseAll(); 

      }   </script> 

</asp:Content> 

 

From the above code example, in DataBound event of grid we have collapsed all the grouped columns by calling collapseAll method of grid since it will trigger only during the initial rendering. 

 

In actionComplete event of grid  

 

1.       We have collapsed all the grouped columns when we go from one page to another in actionComplete event when the requestType as Paging. 

2.       Also we have collapsed all the grouped columns except the edited record group. When saving the record, as per your requirement we have selected the record and expanded the group using expandCollapse method in grid. It is possible not only for single grouped columns. It will remain expanded when you have more grouped columns after saving the record 

We have also prepared a sample that can be downloaded from the below link, 

Link: http://www.syncfusion.com/downloads/support/forum/125427/ze/NewSample-Expand1450586511 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai