Arranging ng-grid by a hidden column

Imagine having an array of objects structured like this:

{
  name: ...
  age: ...
  dept: ...
}

Now, if you want to display these objects in an ng-grid with only columns for name and age, you can set it up like this:

columnDefs: [{field:'name'...},{field:'age'...}

Additionally, if you wish to group them by dept without actually displaying the dept column, it might seem tricky. Trying to add groups: ['dept'] to the grid options may not work as expected.

Some solutions involve using gridOptions.groupBy, but sometimes this can lead to errors like undefined is not a function when gridOptions is a plain object.

So, the burning question is: Can you effectively group an ng-grid with a non-displayed column?

Answer №1

After some creative thinking, I managed to work around the issue at hand. I specified the 'group by' column as usual, but I made the width, minWidth, and maxWidth all equal to 0. On top of that, I disabled the resizeable feature.

Answer №2

Here is an example of using

$scope.gridOptions = {
    columnDefs: [ {field:'name'...}, {field:'age'...}, {field:'dept', visible:false }],    
    groups: ['dept']
}

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

What is the best way to pass cookies between domain and subdomain using nookies?

Recently, I've been facing some challenges with sharing cookies between my app and website while using nookies. Below is the code snippet from my app.mydomain.com file: //setCookies to main domain setCookie(null, 'jwt', login ...

Mastering the Art of Writing an Ajax Post Request

I am attempting to transmit an image URL to a node.js server from some JavaScript using the Ajax POST method. My expectation is for the server to respond with some text, but I'm encountering issues and unsure where the problem lies. Below is the relev ...

Stop the bootstrap accordion from expanding when a button in its header is clicked

Currently, I am facing an issue with two action buttons located in the header of an accordion. Here is the setup: https://i.sstatic.net/HU2Kp.png Whenever I click on one of these buttons, it toggles the accordion's state. I have attempted to use e.p ...

Optimal method for transforming the values of an object or array in JavaScript

I have a group of values that need to be transformed into new values using a legend. The process might sound confusing at first, but it will become clear shortly. To achieve this, I've relied on associative arrays or objects in JavaScript to serve as ...

Having trouble with the active class in vue-router when the route path includes "employees/add"?

I'm currently developing a project using Vue and implementing vue-router for navigation. A peculiar behavior occurs when the route changes to /employees - only the Employees menu item is activated. However, when the route switches to /employees/add, b ...

Angular - Electron interface fails to reflect updated model changes

Whenever I click on a field that allows me to choose a folder from an electron dialog, the dialog opens up and I am able to select the desired folder. However, after clicking okay, even though the folder path is saved in my model, it does not immediately s ...

Matching words with their meanings - exploring storage possibilities

I want to create a system to store vocabulary words and their translations in an organized manner... One idea I had was to use an associative array where each object represents a word and its translation. var vocab = []; vocab.push({"chinese" : "Nǐ", "e ...

The Access-Control-Allow-Headers request header field is not permitted as per the Access-Control-Allow-Headers directive

When trying to send files to my server using a post request, I encountered the following error: Error: Request header field Content-Type is not allowed by Access-Control-Allow-Headers. After researching the issue, I added the necessary headers: $h ...

Slow CSS :hover animations in the most recent release of Chrome

I recently upgraded my browser from chromium version 67 to the latest Chrome version 79. However, I noticed that after the upgrade, the CSS transitions on my website have become very laggy and unresponsive. Surprisingly, everything works perfectly fine on ...

gulp-open not functioning properly following the use of createWriteStream

I am utilizing gulp, gulp-eslint, and gulp-open to generate a report detailing ESLint outcomes. The linting and file creation processes function correctly; however, the task aimed at opening the file containing my report encounters issues. gulp.task(&apos ...

Animation displayed on page load before running

Is there a way to ensure that my animation runs smoothly without any lag or jankiness, either while the page is loading or immediately after loading? I have attempted to preload the images using a preload tag in the header of my HTML, but unfortunately, t ...

Function not activating with ng-keypress event

As a newcomer to AngularJS, I've been working on implementing ng-keypress events in my project. Despite referring to various blogs and following the instructions provided, it seems like my code is not functioning as expected! <div ng-app="myAp ...

Bespoke search functionality using AJAX and tags in WordPress

I have created a custom search form in my WordPress theme that looks like this: <form role="search" class="form" method="get" action="<?php echo home_url('/');?>"> <input type="search" id="keyword" class="inp-search" onclick="sh ...

Select any menu option to return to the one-page layout and then scroll down to find the location

I'm wondering if there is a way to navigate back from an external page to a specific section on my one-page website with a fixed menu? On my one-pager website, I have a fixed menu that includes a "apply for a job" button. When clicked, it takes users ...

Seeking out the index of each instance of a specific element within an array using Ramda.js techniques

I am currently attempting to locate the index of all occurrences of both Header and Footer within an array. var arr = [ 'data', 'data', 'data', 'data', 'Header', 'data', 'data', 'd ...

The isolate scope variable is becoming undefined within the link function

When working with a directive that takes a data object and a function in its isolate scope, I encountered an issue. Inside the link function, I declared a method to be triggered on a button click event. The problem is that while the value passed to the me ...

Discovering the file names of JavaScript files within a context path and dynamically loading them

I am currently working on a Struts application where I need to dynamically load a JSP file with its corresponding JavaScript file upon menu selection. Although the functionality is working smoothly, I am facing an issue in loading the JavaScript file along ...

Checking the parameters passed to a function in Typescript: A step-by-step guide

Currently, I am working with Typescript and then transpiling my TS code into JavaScript. However, I have encountered an issue that I am struggling to resolve. The error message I am facing is as follows: Error Found in TypeScript on Line:2 - error TS230 ...

What is the most effective way to reset the state array of objects in React JS?

I'm facing a challenge in resetting an array of objects without having to rewrite the initial state value again. Initial state const [state, setState] = useState([ {name: 'abc', age: 24}, {name: 'xyz', age: 20} ]) Is there a metho ...

The http url on an iPad in the src attribute of an HTML 5 video tag is malfunctioning

Having trouble loading a video on iPad using an http URL in the src attribute of an HTML5 video tag. Both static and dynamic approaches have been attempted, but it works fine on web browsers. Here is an example of the code: Static: <!DOCTYPE html ...