Conceal the ag-grid footer bar

I have a question regarding the status bar in ag-grid's Enterprise Edition. Currently, I am using ag-grid-community 19.1 with Angular 7.

My goal is to hide the status bar completely. Even when I exclude the statusBar grid option, there is still an empty space at the bottom of my grid where the status bar should be. Upon inspecting the HTML, I found this code snippet:

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

If I remove this section entirely through the Chrome console, it disappears as desired. However, attempts to achieve the same result using CSS have been unsuccessful:

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

Ideally, I would like to find a programmatic way to accomplish this through a setting in the statusBar grid option, but I haven't found any relevant information in the ag-grid documentation.

Any assistance on this matter would be greatly appreciated. Thank you.

angulartypescriptag-grid

Answer №1

If you don't set the statusBar property in the grid options, the status bar should not show up.

Therefore, the only solution I can think of is to use CSS like this:

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

Answer №2

Even without including the statusBar grid option, I am noticing some empty space at the bottom of my grid where the status bar should be, although it appears blank.

I agree that if it's not included in the gridOptions, it shouldn't show up at all. However, I'll share what I have found, hoping it might be helpful to someone.
By the way, the markup will still exist in the DOM. So the suggested solution by Diogo Rocha would be the right approach if you want to completely hide it.

You can control 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());
}

Refer to this example in the documentation: Get Status Bar Panel Instance

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an error with Angular2 when referencing node modules

I encountered an issue when trying to use angular2 from the node_modules directory. Can anyone guide me on how to resolve this error? Is there something specific I need to include in my HTML file? I am looking for a Git repository where I can access Angu ...

node.jstypescriptangular

Having trouble with updating a Firebase database object using snap.val()

I'm trying to figure out how to update a property within the snap.val() in order to make changes to my Firebase database. function updateListItem(listItem) { var dbRef = firebase.database() .ref() .child('userdb') .child($sco ...

javascripttypescriptfirebasefirebase-realtime-database

Implementing dynamic data updates for the yAxis in a chart using Highcharts and Angular 2/4

I am currently working with a spline chart: this.chart = { chart: { type: 'spline', zoomType: 'x', animation: true, marginRight: 10, renderTo ...

angulartypescripthighchartsangular2-highcharts

Should Angular 6 developers consider storing JSON web tokens in LocalStorage or Session Storage?

After doing a lot of research, I have come across various discussions regarding the storing of JSON web tokens in different areas like local storage, session storage, and cookies. Each method has its own advantages and disadvantages that developers conside ...

angular

Angular routing is failing to redirect properly

After creating a sample Angular app, the goal is to be redirected to another page using the browser URL http://localhost:1800/demo. The index.html file looks like this: <!doctype html> <html lang="en"> <head> <title>Sample Ang ...

htmlangulartypescript

Using angular to create an external hyperlink - my inability to access external pages is frustrating

Here's the question at hand: How can I make links in HTML or TypeScript work properly? I want to include links to external pages within my app. In a user profile, I have links to the social media accounts of that user (e.g. instagram.com/sisterofclar ...

javascripthtmlcssangulartypescript

Utilize the type constant to retrieve a specific value in typescript

Is it possible to retrieve the constant value from the type with this specific definition? type Dummy = { type: "dummy" } For instance, something along the lines of Extract<Dummy["type"]> ...

typescript

Looking to transform a psql query into typeorm syntax

I am in search of data on a daily, weekly, or monthly basis. I utilized the date_trunc() function to generate such records. Although I was successful in creating a psql query, I am unfamiliar with typeorm stack and need guidance on converting it into typeo ...

node.jsdatabasetypescriptpostgresqltypeorm

How can we use Angular Table to automatically shift focus to the next row after we input a value in the last cell of the current row and press the Enter key

When the last cell of the first row is completed, the focus should move to the next row if there are no more cells in the current row. <!-- HTML file--> <tbody> <tr *ngFor="let row of rows;let i=index;" [c ...

htmlangulartypescript

Creating pagination functionality for a React Material table

Check out this Spring Boot endpoint that I use for retrieving items from the database: import React, { useEffect, useState } from "react"; // Additional imports export default function BusinessCustomersTable() { // Functionality and code impl ...

reactjstypescriptspring-bootmaterial-uireact-typescript

Template specific requirements in Angular

When I have a child component app-page-header, here's what I want to achieve: If the value of headerOptions.headerTitle is not 'Idle Disposition', then set [titleData] to equal 'headerOptions.headerTitle'. However, if headerOptions ...

angulartypescript

Integrate a post AJAX call into an Angular service for seamless functionality

I have come across an interesting scenario where I have to integrate old ajax code into a new Angular 10 application as per project requirements. Is it possible to directly run the existing ajax calls in the Angular service? Or, is there any node module ...

javascriptnode.jsangularajaxangular-services

'Mastering the implementation of promises in React context using TypeScript'

I've been diving into the world of incorporating TypeScript in React and I'm facing a challenge with implementing async functions on context. The error that's popping up reads as follows: Argument of type '{ userData: null; favoriteCoc ...

reactjstypescriptfirebasereact-nativegoogle-cloud-firestore

Angular SPA and .NET 6 API experiencing disconnect in Application Insights Map integration

Currently, I have set up an Angular 13 Single Page Application that communicates with my .Net 6 API, which in turn interacts with a Database. This entire system is currently running on my local machine. I recently incorporated the Application Insights JS ...

c#angularazure-application-insightsazure-monitor

Develop a series of sequential tests for the playwright to execute

Can someone assist me with my code? I am attempting to write a test in Playwright that navigates to the forgot password page, creates a new password, and then tries to log in using that new password. However, I am encountering an issue with retrieving the ...

javascripttypescriptplaywright

How Vue3 enables components to share props

Having recently made the switch from Vue2 to Vue3, I find myself a bit perplexed about the best approach for sharing props among multiple components. My goal is to create input components that can share common props such as "type", "name", and so on. Previ ...

typescriptvue.jsvue-composition-apivue-propsvue-options-api

Troubleshooting the Alignment Issue in Angular Material Expansion Panel Header

I have implemented an Angular 14 Material Expansion Panel as shown in the code snippet below... <mat-nav-list> <a mat-list-item role="listitem" class="list-item-setting" id="emailTemplatesId" matTooltipPosition=&quo ...

javascripthtmlangularangular-material

Using styled-components in React

I came across this interesting code snippet in the styled-components documentation. Here it is: const Button = styled.button<{ $primary?: boolean; }>` background: ${props => props.$primary ? "#BF4F74" : "white"}; color: ${p ...

reactjstypescriptstyled-components

Difficulty arises when attempting to conceal the pointer in ngx-charts without a click event being present

For the past day, I have been experimenting with the swimlane/ngx-charts library to remove the pointer from the graphs when hovered over. Our use case involves using a pie chart from this library, and the default cursor appearance when hovering over the ch ...

cssangularngx-charts

Troubles with Katex/ngx-markdown Display in Angular 16

In my Angular 16 application, I utilize the ngx-markdown library alongside Katex and other dependencies. A challenging situation arises when the backend (an LLM) responds with markdown text that conflicts with Katex delimiters during rendering. I attempte ...

angularangularjstypescriptmarkdownkatex