Exploring PrimeNG's method for expanding and collapsing groups

I'm attempting to incorporate two buttons that can be used to either expand or collapse all the groups in my code utilizing primeNG. Below is the functioning code:

PLUNKER

<p-dataTable [value]="data" sortField="room" rowGroupMode="subheader" groupField="room" expandableRowGroups="true"
    [sortableRowGroup]="false">
 <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData.room}} - INFO</ng-template>
 <p-column field="status" header="ID"></p-column>
 <p-column field="name" header="Title"></p-column>
</p-dataTable>
javascriptangulartypescriptprimeng

Answer №1

To control the display of group headers, use the expandedRowsGroups property and populate it with an array.

The expandedRowsGroups property contains values of group fields to expand a group by default.

Manage the contents of the expandedGroups array when buttons are clicked:

expandAll() {
    this.expandedGroups = [];
    this.expandedGroups.push('ROOM1');
    this.expandedGroups.push('ROOM2');
    this.expandedGroups.push('ROOM3');
}

collapseAll() {
    this.expandedGroups.pop('ROOM1');
    this.expandedGroups.pop('ROOM2');
    this.expandedGroups.pop('ROOM3');
}

Buttons for expanding and collapsing:

<button (click)="expandAll()">Expand all</button>
<button (click)="collapseAll()">Collapse all</button>

View the live example on Plunker

Answer №2

<p-dataTable #dt [value]="data" sortField="room" rowGroupMode="subheader" groupField="room" rowGroupExpandMode="multiple" expandableRowGroups="true"
        [sortableRowGroup]="false">
    <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData.room}} - INFO</ng-template>
    <p-column field="status" header="ID"></p-column>
    <p-column field="name" header="Title"></p-column>

</p-dataTable>


<button type="button" pButton (click)="expandAll(dt)" label="Expand All"></button>


<button type="button" pButton (click)="collapseAll(dt)" label="Collapse All"></button>

Make sure to include the template reference #dt in the HTML code and set rowGroupExpandMode="multiple" for multiple row groups expansion.

expandAll(dt: DataTable) {
    dt['expandedRowsGroups'] = [];
    Object.keys(dt.rowGroupMetadata).forEach((row)=>{
       dt['expandedRowsGroups'].push(row);
    });
}

expandAll(dt: DataTable) {
    dt['expandedRowsGroups'] = [];
}

https://embed.plnkr.co/0o42Jb/

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

I'm unable to import correctly using the --compiler option

Having an issue here. I'm trying to bring in the typescript compiler. I used this command: bit import bit.envs/compilers/typescript --compiler Unfortunately, it didn't work. This is the error message: bit import [ids...] import components in ...

reactjstypescriptbit.dev

Angular 6: Inconsistent performance of [(ngModel)] functionality

In my Angular 6 project, I am utilizing Bootstrap Modals to implement a specific functionality. Upon clicking the modify button, a modal window should appear with pre-filled values. Although I am using template-driven forms along with [(ngModel)], I have ...

angular

Finding a JSON file within a subdirectory

I am trying to access a json file from the parent directory in a specific file setup: - files - commands - admin - ban.js <-- where I need the json data - command_info.json (Yes, this is for a discord.js bot) Within my ban.js file, I hav ...

javascriptnode.jsjson

Vanish and reappear: Javascript block that disappears when clicked and shows up somewhere else

My goal is to make three squares randomly disappear when clicked on the page. However, I am facing an issue where some of them, usually the 2nd or 3rd one, reappear elsewhere on the page after being clicked. I have created a jsfiddle to demonstrate this: ...

javascriptjqueryhtmlcss

The server is indicating that the validation for the user has failed due to the required field "foo" not being provided in the Node.js

An error message was received with the following details: "User validation failed: email: Path email is required., display_name: Path display_name is required." The error name returned is: ValidationError. The AJAX call code snippet is as follows: f ...

javascriptnode.jsexpressmongooselodash

What is the best way to refresh a Component upon sending data to the server?

I'm in the process of developing a cross-platform application. I have a TabView Component that needs to update a tab after sending data to the server. During the initialization (ngOnInit) phase, I dynamically set the content of my tab. However, when I ...

angulartypescriptnativescriptnativescript-angular

Is there a way to verify an if-else statement in the ngStyle background property with Angular 7?

I have a collection of cards that need to be shown in a component. Each card contains a cover-image with an URL fetched from the server. In my component.html, I am using ngFor as follows: <div [style.background-image]="'url('+row.companyId?.c ...

angulartypescriptng-style

Accordion section appears on the webpage as it is loaded

I am currently working on implementing an accordion feature for my webpage. Everything is functioning correctly when I click the button, but there is one issue - the div opens automatically when the page loads. My goal is to have the div closed initially a ...

javascriptjqueryhtmlcssangularjs

The API key fails to function properly when imported from the .env file, but performs successfully when entered directly

Working with Vite has been quite an experience for my project. I encountered a situation where using my API key directly worked fine, but when trying to import it from .env file, I faced the error message in the console below: {status_code: 7, status_me ...

javascriptreactjs

Edit: "Submit a binary file with just JavaScript"

I am currently developing a Chrome application that utilizes the HTML5 Filesystem API to enable users to import and synchronize files. A challenge I'm facing is when attempting to sync image files, as they appear to become corrupted during the upload ...

javascriptajaxhtmlgoogle-chromemootools

To change the font color to red when clicked, I must create a button using HTML, CSS, and Javascript

Currently, I am utilizing CodePen to assess my skills in creating a website. Specifically, I am focusing on the HTML component. My goal is to change the font color to blue for the phrase "Today is a beautiful sunny day!" Here is the snippet of code that I ...

javascripthtmlcss

Issue with loading CSS in Angular 8 upon refreshing the page after building in production

Here is the structure of my index.html: <!doctype html> <html lang="hu"> <head> <meta charset="utf-8"> <title>WebsiteName</title> <base href="/"> <meta name="viewport& ...

angulartypescriptroutespage-refresh

Correctly inputting the 'in' statement - Avoid using a primitive value on the right side of an 'in' statement

I am currently facing an issue with my React code where I am getting the error message: The right-hand side of an 'in' expression must not be a primitive.. I am unsure about how to resolve this problem effectively: // The goal is to allow nu ...

typescript

The MUI multiple select feature is experiencing issues following the addition of a new button

I'm having trouble adding buttons below a select dropdown menu with a specific height. When I try to put the menu item inside a div, the multiple select stops working and I have no idea why. Can someone help me figure this out? Check out my CodeSandb ...

javascriptreactjsmaterial-ui

Is it time to ditch Internet Explorer for EDGE?

Have you ever noticed that when attempting to access the stackoverflow website on Internet Explorer, the tab mysteriously closes and Microsoft Edge opens with stackoverflow loaded? What is the secret behind this strange phenomenon on stackoverflow's ...

javascripthtml

What does the `Class<Component>` represent in JavaScript?

Apologies for the lackluster title (I struggled to think of a better one). I'm currently analyzing some Vue code, and I stumbled upon this: export function initMixin (Vue: Class<Component>) { // ... } What exactly does Class<Component> ...

javascriptecmascript-6vue.js

Component's state not reflecting changes after dispatching actions in Redux, though the changes are visible in the Redux DevTools

When a menu item is clicked, I execute the following code: import React, { Component } from 'react'; import 'react-dropdown-tree-select/dist/styles.css'; import { connect } from 'react-redux'; import '../../../css/tree.c ...

javascriptreactjsreduxreact-redux

Activate Gulp watcher to execute functions for individual files

I have developed a specific function that I need to execute only on the file that has been changed with gulp 4.0 watcher. For example, the current task setup looks like this: gulp.watch([ paths.sourceFolder + "/**/*.js", paths.sourceFolder + "/**/ ...

javascriptnode.jsnpmgulpgulp-4

How can I make arrays of a specific length and populate them in JavaScript?

For instance: I have over 100 locations in a single array, each with latitude and longitude values. I need to use these locations with the Google distance matrix API to find nearby shops for my users. The issue is that this API can only handle 25 destinat ...

javascriptarraysjavascript-objects

Understanding XML parsing problems

I've decided to keep the live xml/atom-feed URL private, as it's hosted on LiveJournal. However, I'm a bit confused about how this all works: let XML_URL = "https://users.livejournal.com/<username>/data/atom"; $(function(){ ...

javascripthtmljqueryxmlatom-feed