CODEWITHSUNDEEP
javascriptjquerycssangularag-grid
MadCatm2
MadCatm2

Reputation: 1001

Add a class to expanded row using vanilla JS

In my angular application I am attempting a workaround because the ag-Grid api getRowClass() is not working at intended. All I need to do is add a css class to an expanded row and remove it when the row is collapsed.

The original method using ag-Grid api that does not work looks as follows:

setRowNode(params) {
    this.gridOptions.getRowStyle = (params) => {
        if(params.node.expanded) {
            return { background: 'red' };
        }
    }
}

Ideally I would be able to selected the DOM and append a class to it. I tried this with some JQuery and it worked, but for obvious reasons I do not want to have JQuery in this app. I wrote something along these lines:

$('.ag-row[row="'+params.node.id+'"]',self.api.grid.gridPanel.eBodyContainer).addClass('ag-row-focus');

How would I fulfill this req using vanilla JS?

Upvotes: 1

Views: 300

Answers (1)

Boulboulouboule
Boulboulouboule

Reputation: 4207

You can do it by creating a custom directive, like this one : 

//row-focus.directive.ts

import { Directive, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: '[appRowFocus]' // you can target classes, id etc.: '.grid-Holdings' for example
})
export class RowFocusDirective {
  @HostBinding('class.ag-row-focus') isFocused = false;

  @HostListener('click') toggleOpen() {
    this.isFocused = !this.isFocused;
  }
}

Import this directive on your module, and then attach the directive to your elements : 

// your-component.component.ts :

<div class="row" appRowFocus>

These elements will toggle the ag-row-focus on click. You can add different @HostListener for other events.

Upvotes: 1

Related Questions