What is the best way to toggle the visibility of multiple column groups in Ag-Grid community using dynamic

I am seeking to replicate a basic version of the sidebar found in Ag-Grid Enterprise. The goal is to use JavaScript to gather all column groups within a grid and then provide a checkbox for each group to toggle visibility.

While I am aware that individual columns can be hidden using 

gridApi.setColumnsVisible(['col1','col2'], false)
, as demonstrated in this question, my preference is to hide entire column groups simultaneously. Is there a straightforward method to accomplish this without manually hiding each column?

If the process needs to be done on a per column basis, is there an efficient way to retrieve the columns within a specific column group?

javascriptag-gridag-grid-js

Answer №1

If you want to access a specific group, you can utilize the getColumnGroup method and provide the groupId. This will retrieve the desired group.

function toggleColumns(
    keys: (string | Column)[],
    show: boolean
): void;

The toggleColumns function accepts an array of either string or Column objects

You have two options available. The first option involves iterating through the children to generate an array of column names, which can then be passed to the function using the string[] approach.

const columns = gridApi.getColumnGroup('ColGroup').getChildren().map((column) => column.colId)
gridApi.toggleColumns(columns, false)

Alternatively, you can use the getLeafColumns method which returns an array of Column instances. This can be used with the Column[] approach

toggleColumns(gridApi.getColumnGroup('ColGroup').getLeafColumns(), false)

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

How can we determine the remaining balance in the user's wallet after making purchases using JavaScript?

There are three arrays containing data from the back-end, with unknown names or products. The task is to calculate the total amount spent by the user and how much money is left in their wallet. In case the user runs out of money, they can take a loan which ...

javascriptajaxapi

HTML5 Mouse Canvas

Here's a simple example of what's happening: function handleClick(event) { ... } canvas.addEventListener("click", handleClick, false); function drawRectangle(x, y) { context.fillRect(x, y, 16, 16); }; ...

javascripthtmlcanvas

Refreshing Slickgrid: Updating grid data with data fetched from an AJAX source

Within the app I am developing, there exists a data grid alongside select boxes that allow users to set filters. Upon selection of these filters, an AJAX call is made to retrieve a new array of data from the server. The challenge I currently face is wipin ...

javascriptjqueryajaxslickgrid

Tips for maintaining previously accessed data when utilizing useQuery

I am currently working on incorporating a GET request using useQuery from the react-query library. Below is the relevant code snippet: import queryString from "query-string"; import { useRouter } from "next/router"; const { query } = ...

javascriptreactjsnext.jsreact-querytanstackreact-query

`How to Merge Angular Route Parameters?`

In the Angular Material Docs application, path parameters are combined in the following manner: // Combine params from all of the path into a single object. this.params = combineLatest( this._route.pathFromRoot.map(route => route.params) ...

javascriptangulartypescriptrxjs

Disable the draggable feature upon clicking the button

I am currently working on a code challenge where I need to disable the draggable functionality of all divs styled with .myDivs when the user clicks the 'Remove Draggable' button. You can view my progress in this JSFiddle: http://jsfiddle.net/adri ...

javascriptjquery

JavaScript Array Multiplication Theory

I am working with 2 arrays list1 = ["x","y"] list2 = [ ["5","6","7"],["20","21","22"]] My goal is to create an array of objects like this: [ {list1: x , list2: 5}, {list1: x , list2: 6}, {list1: x , list2: 7}, {list1: y , list2: 20}, {list1: y , l ...

javascriptarraysreactjsecmascript-6javascript-objects

Ways to leverage the power of Reactivity APIs in Vue.js

In my Vue application, I am trying to create a Drop Down Menu by using a variable called "showDropDown". The idea is to use a v-if directive to check if the value of showDropDown is true, and then display the menu accordingly. Additionally, I want to imp ...

javascriptvue.jsvuejs3

Implementing ID-based filtering for an array of objects with React

Struggling with filtering an object in an array of objects by its ID using React. Here's the scenario: The app is a Notes app that stores each note with its Title, Text, and created date, utilizing the ID as the key. Currently, I'm working on c ...

javascriptarraysreactjsfiltermodal-dialog

What steps should I take to resolve the issue with this error message: Error: listen EADDRINUSE

How can I resolve the following issue? system: gulp npm windows issue: ... Oh no. Encountered error listen EADDRINUSE 127.0.0.1:35729 ... Error: listen EADDRINUSE 127.0.0.1:35729 at Object._errnoException (util.js:1021:11) at _exce ...

javascriptangularjsgulp

What separates $(document).ready() from embedding a script at the end of the body tag?

Can you explain the distinction between running a JavaScript function during jQuery's $(document).ready() and embedding it in the HTML within script tags at the bottom of the body? Appreciate your insights, DLiKS ...

javascriptjqueryhtml

Is there a way to prevent the background color from filling the entire container?

In the visual representation provided below, there is a header element consisting of a back arrow and a name. The arrow container has been assigned flex: 1, while the arrow and name containers have been set to flex-start and flex-end respectively. This co ...

javascriptreactjsreact-nativeexpo

Using Selenium to stream audio directly from the web browser

For my current project, I am utilizing Selenium with Python. I have been exploring the possibility of recording or live streaming audio that is playing in the browser. My goal is to use Selenium to retrieve the audio and send it to my Python application fo ...

javascriptpythonhtmlseleniumaudio

Interceptors in axios do not trigger when making requests through a PHP proxy

I am currently working on a React app that will be interacting with services hosted on a remote server. During development on my local machine using the react-scripts server at localhost:3000, I disable CORS in the browser and have no issues with axios f ...

javascriptphpreactjsproxyaxios

What is the process of transforming a String into a Function prototype in JavaScript?

Recently, I encountered a JavaScript object containing key-value pairs with functions as values: var serial = { open: function(a, b) { // do something.. }, close: function (a,b) { // do something } } Due to certain requirements, I had ...

javascriptangularjs

Discovering ways to examine a React tree, view the props and state of components on Internet Explorer 11

After installing the React Developer Tools extension for Firefox and Chrome, I have been able to successfully utilize them. However, my struggle lies in not being able to locate a similar extension for Internet Explorer 11. Unfortunately, my application i ...

javascriptreactjsgoogle-chromeinternet-explorerreact-devtools

Slower CSS rendering as Javascript finishes its tasks

I am currently dealing with a jQuery plugin that is quite large and complex, but I will not be sharing it here to keep things simple. The issue I am facing is relatively straightforward, so I will focus on the essential code snippets: There is a click eve ...

javascriptjquerycssclickpseudo-element

AngularJS allows for the creation of cascading dropdown selects, where the options in the second select

I'm struggling to access the version data stored in the server model, but it's not cooperating. My suspicion is that when the page loads, the initial data from the first select isn't available yet because it hasn't technically been sel ...

javascriptangularjsangular-ngmodelng-optionsangularjs-ng-model

Error: The "render" method is not available for the IncomingMessage object

While working on a basic application using node.js and express, everything seems to be in order except for this error that keeps popping up: res.render("aggregatedCostList",{ ^ TypeError: Object #<IncomingMessage> has no method 'render&ap ...

javascriptnode.jsexpress

Notification of failed fetch in backbone

We are experiencing a problem with our backbone application. Our goal is to show a notification to the user when a fetch fails (due to timeout or general error). Instead of displaying an error message on a new page, we want to overlay a dialog on top of th ...

javascripthtmlbackbone.js