How to collapse the selected rows expanded in JS Grid ?
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
Conclusion
I hope you enjoyed learning on how to collapse the selected rows expanded in JS Grid.
You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript TreeGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
