How to collapse all the group caption rows in initial rendering of Grid?
This explains that collapsing all Group Caption Rows in rendering of JavaScript Grid.
Solution:
We can collapse all the Group Caption Rows at initial rendering using dataBound event and collapseAll method of ejGrid. The dataBound event will be triggered when the grid is bound with data at initial rendering. In this event we have to use collapseAll method to collapse all the group caption rows.
To collapse all the Group Caption Rows during paging we have to use actionComplete event and collapseAll method of ejGrid. The actionComplete event will be triggered for every grid action success event. In this event we need to check the requestType as paging and call the collapseAll method.
The following code example demonstrates how to collapse all Group Caption rows at initial rendering and paging:
JS:
1. Render the Grid Control.
<div id="Grid"></div>
<script type="text/javascript">
$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
allowGrouping: true,
actionComplete: "Complete",
groupSettings: { groupedColumns: ["CustomerID"] },
dataBound: "dataBound",
columns: [
{ field: "OrderID", headerText: "Order ID" },
{ field: "EmployeeID", headerText: "Employee ID" },
{ field: "CustomerID", headerText: "Customer ID" },
]
});
</script>
MVC:
@(Html.EJ().Grid<object>("Grouping")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowGrouping()
.AllowSorting()
.AllowPaging()
.GroupSettings(group => { group.GroupedColumns(col => { col.Add("CustomerID"); }); })
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Add();
col.Field("EmployeeID").HeaderText("Employee ID").Add();
col.Field("CustomerID").HeaderText("Customer ID").Add();
})
.ClientSideEvents(eve => eve.ActionComplete("Complete").DataBound("dataBound"))
)
ASP.NET:
<ej:Grid ID="OrdersGrid" runat="server" AllowGrouping="True" AllowPaging="True"> <GroupSettings GroupedColumns="CustomerID"></GroupSettings> <ClientSideEvents ActionComplete="Complete" DataBound="dataBound" /> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" /> <ej:Column Field="EmployeeID" HeaderText="Employee ID" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" /> </Columns> </ej:Grid>
ASP.NET CORE:
<ej-grid id="FlatGrid" allow-paging="true" allow-grouping="true" action-complete="Complete" databound="dataBound" datasource="ViewBag.dataSource">
<e-group-settings grouped-columns=new List<string>() {"CustomerID"}></e-group-settings>
<e-columns>
<e-column field="OrderID" header-text="Order ID"></e-column>
<e-column field="EmployeeID" header-text="Employee ID"></e-column>
<e-column field="CustomerID" header-text="Customer ID"></e-column>
</e-columns>
</ej-grid>
Angular:
<ej-grid #grid id="Grid" [dataSource]="gridData" [allowPaging]="true" [allowGrouping]="true" [groupSettings]="groupsettings" (actionComplete)="Complete($event)"> <e-columns> <e-column field="OrderID" headertext="Order ID"></e-column> <e-column field="EmployeeID" headertext="Employee ID"></e-column> <e-column field="CustomerID" headertext="Customer ID"></e-column> </e-columns> </ej-grid>
TS File:
For angular platform use ngAfterViewInit event instead of dataBound event
@ViewChild('grid') GridModel: EJComponents<any, any>;
export class GridDetailTempComponent {
public gridData: any;
groupsettings: any;
constructor() {
//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js
this.gridData = (window as any).gridData;
this.groupsettings = { groupedColumns: ["CustomerID"] } ;
}
Complete(e:any){
if(e.requestType == "paging") {
this.GridModel.widget.collapseAll();
}
}
ngAfterViewInit(){
var grid = this.GridModel.widget;
grid.collapseAll();
}
}
JS:
2. In actionComplete and dataBound event we used the collapseAll method of ejGrid to collapse all Grid Rows.
function Complete(args) {
if (args.requestType == "paging") {
this.collapseAll();
}
}
function dataBound(args) {
this.collapseAll();
}
Result:
I hope you enjoyed learning about how to collapse all the group caption rows in the initial rendering of JavaScript Grid.
You can refer to our JavaScript Grid 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 Grid 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!
