CODEWITHSUNDEEP
angulartypescriptag-grid
risingTide
risingTide

Reputation: 1896

Hide ag-grid status bar

This question is concerning the status bar for ag-grid that comes with the Enterprise Edition. I'm currently using ag-grid-community 19.1 with Angular 7.

I'm looking for the best way to suppress the status-bar? When I don't include the statusBar grid option at all I'm still seeing empty space at the bottom of my grid (although it is blank), where the status bar should be. Inspecting the generated HTML reveals the existence of this:

<!--AG-STATUS-BAR-->
<div class="ag-status-bar" ref="statusBar">
    <div ref="eStatusBarLeft" class="ag-status-bar-left"></div>
    <div ref="eStatusBarCenter" class="ag-status-bar-center"></div>
    <div ref="eStatusBarRight" class="ag-status-bar-right"></div>
</div>

Now if I removed that section completely in the Chrome console it disappears as desired. But I've tried doing this via css but it doesn't seem to work:

.ag-status-bar {
    height: 0px;
}

Honestly, I'd prefer a way of doing it programmatically via a setting in the statusBar grid option but I don't see anything like that in the ag-grid documentation.

Any help is appreciated; thanks.

Upvotes: 4

Views: 4718

Answers (2)

Paritosh
Paritosh

Reputation: 11570

When I don't include the statusBar grid option at all I'm still seeing empty space at the bottom of my grid (although it is blank), where the status bar should be.

Agreed. When I don't include it in gridOptions, it shouldn't come at all. But anyways, I'll provide whatever I've found thinking it'd be helpful to somebody.
BTW, the mark-up would still be there in the DOM. So the answer @Diogo Rocha has provided would be the proper solution, if you don't even what to see it in any case.

You can change its visibility programmatically by accessing Accessing Status Bar Panel Instances

toggleStatusBarComp() {
   let statusBarComponent = this.gridApi.getStatusPanel("statusBarCompKey");
   let componentInstance = statusBarComponent;
   if (statusBarComponent.getFrameworkComponentInstance) {
     componentInstance = statusBarComponent.getFrameworkComponentInstance();
   }
   componentInstance.setVisible(!componentInstance.isVisible());
}

Have a look at this example in the documentation: Get Status Bar Panel Instance

Upvotes: 1

Diogo Rocha
Diogo Rocha

Reputation: 10585

Not setting statusBar on grid options should be enough to the status bar not to appear.

So, I see no other option than via css do the following:

.ag-status-bar {
    display: none;
}

Upvotes: 4

Related Questions