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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

All groups collapsed at start

Thread ID:

Created:

Updated:

Platform:

Replies:

125427 Aug 16,2016 05:23 PM UTC Aug 18,2016 07:30 AM UTC ASP.NET Web Forms 3
loading
Tags: Grid
Michael Lambert
Asked On August 16, 2016 05:23 PM UTC

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 [Syncfusion]
Replied On August 17, 2016 01:02 PM UTC

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, 

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

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, 
 
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, 

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

Please let us know if you need further assistance, 

Regards, 
Manisankar Durai. 


Michael Lambert
Replied On August 17, 2016 05:18 PM UTC

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 [Syncfusion]
Replied On August 18, 2016 07:30 AM UTC

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, 
 
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, 

Please let us know if you need further assistance. 


Regards, 
Manisankar Durai 


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.

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

;