Articles in this section
Category / Section

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.

 JS

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

Dynamic collapse by using expandCollapse() method

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment