How to collapse the currently selected group in button click?

1 min read

Grid, by default has the expandCollapse() method to perform the expand or collapse operation dynamically.

The following code example demonstrates how to dynamically collapse the selected rows that are expanded in Grid by using button.

<button id="collapsebutton">Collapse </button>
<div id="Grid"></div>
<script type="text/javascript">
     $(function () {
         $("#Grid").ejGrid({
             dataSource: window.employeeView,
             allowGrouping: true,
             groupSettings: { groupedColumns: ["ID"] },
             columns: [
                    { field: "ID", headerText: 'ID', textAlign: ej.TextAlign.Right, width: 75 },
                    { field: "FirstName", headerText: 'First Name', textAlign: ej.TextAlign.Left, width: 100 },
                    { field: "Title", headerText: 'Title', textAlign: ej.TextAlign.Left, width: 120 },
                    { field: "City", headerText: 'City', textAlign: ej.TextAlign.Left, width: 100 },
                    { field: "Country", headerText: 'Country', textAlign: ej.TextAlign.Left, width: 100 }
             ]
         })
     })
     $("#collapsebutton").ejButton({ click: "btnClick" });
     function btnClick() {
         var gridObj = $("#Grid").ejGrid("instance");
         if (gridObj.selectedRowsIndexes[0] != -1) {
             var currentTr = (gridObj.getRows()).eq(gridObj.selectedRowsIndexes[0]);
             var curEl = currentTr.parents("tr").first().prev().find(".e-recordplusexpand");
             gridObj.expandCollapse(curEl);
         }
     }
</script>

MVC

<button id=" collapsebutton">Collapse </button>
@(Html.EJ().Grid<OrdersView>("Grid")
.AllowGrouping()
        .GroupSettings(group => { group.GroupedColumns(col => { col.Add("ID"); }); })
        .Columns(col =>
        {                            
            col.Field("ID").HeaderText("ID").TextAlign(TextAlign.Right).Width(75).Add();
            col.Field("FirstName").HeaderText("First Name").Width(100).Add();
            col.Field("Title").HeaderText("Title").Width(120).Add();
            col.Field("City").HeaderText("City").Width(100).Add();
            col.Field("Country").HeaderText("Country").Width(100).Add();
        }))
<script type="text/javascript">
     $("#collapsebutton").ejButton({ click: "btnClick" });
     function btnClick() {
         var gridObj = $("#Grid").ejGrid("instance");
         if (gridObj.selectedRowsIndexes[0] != -1) {
             var currentTr = (gridObj.getRows()).eq(gridObj.selectedRowsIndexes[0]);
             var curEl = currentTr.parents("tr").first().prev().find(".e-recordplusexpand");
             gridObj.expandCollapse(curEl);
         }
     }
</script>

ASP

<ej:Grid ID="Grid" runat="server" AllowGrouping="True" >
            <GroupSettings GroupedColumns="ID"></GroupSettings>
            <Columns>
                <ej:Column Field="ID" HeaderText="ID" TextAlign="Right" Width="75" />
                <ej:Column Field="FirstName" HeaderText="First Name" Width="100" />
                <ej:Column Field="Title" HeaderText="Title" Width="120" />
                <ej:Column Field="City" HeaderText="City" Width="100" />
                <ej:Column Field="Country" HeaderText="Country" Width="100" />
            </Columns>
</ej:Grid>
<script type="text/javascript">
     $("#collapsebutton").ejButton({ click: "btnClick" });
     function btnClick() {
         var gridObj = $("#Grid").ejGrid("instance");
         if (gridObj.selectedRowsIndexes[0] != -1) {
             var currentTr = (gridObj.getRows()).eq(gridObj.selectedRowsIndexes[0]);
             var curEl = currentTr.parents("tr").first().prev().find(".e-recordplusexpand");
             gridObj.expandCollapse(curEl);
         }
     }
</script>

The following screenshot displays the dynamic collapse in Grid by using expandCollapse() method.