Dynamic Cell Class Assignment in Ag Grid

My Div's dimensions can change based on user interaction, with the div containing an ag-grid component. Initially, the div/grid loads in a compressed size, so I've applied specific classes (like small font-size, height, padding, etc.) to eliminate scrolls. However, I want these classes to be swapped out for others (large font-size, height, etc.) when the user enlarges the div, but I haven't been able to find any grid API or method to dynamically set cellClass and headerClass.

Additionally, I'm wondering if it's possible to update these options in gridOptions and load the grid accordingly?

htmlcssangularag-gridag-grid-ng2

Answer №1

To handle changes in gridSize, add an event listener for gridSizeChanged. Within the listener function, dynamically adjust CSS classes based on window/div size.

var gridOptions = {
  ...
  onGridSizeChanged: onGridSizeChanged
};

function onGridSizeChanged(params) {
  let newClass = (css class for new width)
  gridOptions.api.getColumnDef(colId).headerClass = newClass;
  gridOptions.api.refreshHeader()
}

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

Ionic - What is the correct way to import ViewController? - Uncaught (in promise): Error: ViewController provider not found

I have a Popover in my app and I want it to behave differently based on the selected item. I followed the instructions in the Ionic documentation to achieve this. Error: Uncaught (in promise): Error: No provider for ViewController! When I tried adding ...

angulartypescriptionic-frameworkionic2ionic3

Tips for changing the color of shapes when hovering over an image state

I have arranged three images in a column and applied column-count: 3; along with setting border-width for those images. Now I am curious about how to create the hover state for these images. Here is the HTML code snippet: <div class="wrap"> < ...

htmlcss

Is it possible to integrate Processing JS on top of an HTML element?

I have currently integrated Processing JS with the HTML canvas element on a website. The goal is to have the Processing JS animation run smoothly over the existing HTML elements on the page. You can check out the site at [usandthings.com][1] to get an idea ...

javascriptcsscanvasprocessingprocessing.js

Creating consistent indentation in HTML code can be achieved without the presence of any unnecessary

When I add indentation to my HTML code, it results in extra whitespace between elements on different lines. <div id="nbcntcnt"> <a href="notset.html" class="nbcntbutton" id="snbb">Overview</a> <a href="notset.html" class="nbcntb ...

htmlcssindentation

Is it possible to alter the color of an SVG icon when it is used in conjunction with <mat-icon> in Angular Material?

Trying to change the color of an svg icon displayed using Angular Material on hover has been a challenge for me. Here's my code snippet: <mat-icon svgIcon="menu"></mat-icon> The icon is visible, but when I attempt to add a class for chan ...

angularsvgangular-materialangular5

Using a simulated window object in a Jasmine unit test case

Having trouble writing a test case because I can't seem to replicate the window in unit test cases in jasmine. Here's the class I'm working with: public init(): void { this.Icon['text'] = window['SWIPE']['src&a ...

angularunit-testingjasminetddkarma-jasmine

Neglecting to automatically align text

My goal is to automatically align text based on the language, so that Arabic text starts from the right and English text starts from the left. After some online research, I discovered that I need to use dir="auto" in the tag and text-align: auto; in the CS ...

javascriptcssreactjstext-alignment

What causes materialui styles to vanish upon refreshing in nextjs?

After consulting the materialui documentation (https://material-ui.com/guides/server-rendering/), I was able to find a solution, but I am still unsure of the underlying reason. Why does the style work initially during rendering but disappear upon subs ...

cssmaterial-uinext.jsserver-side-rendering

Safari is currently experiencing compatibility issues with iPad, resulting in a malfunction

I encountered a unique issue with my most recent website project. The website is built on WordPress, and the custom theme I created is presenting an unexpected problem: Despite functioning perfectly on all browsers and devices, the site fails to display p ...

phpioscsswordpressipad

When an element with a border attribute is hovered over, it shifts position

When I hover over an li-element, I want to apply borders at the top and bottom. Here's the code snippet: #overview li:hover { background: rgb(31, 31, 31); border-top: 1px solid white; border-bottom: 1px solid white; } Check out this JSFi ...

htmlcss

What is the best way to display a div in Chrome without allowing any user interactions?

I currently have a <div> placed on top of my webpage that follows the mouse cursor. Occasionally, users are able to move the mouse quickly enough to enter the tracking <div>. Additionally, this <div> sometimes prevents users from clicking ...

javascriptjqueryhtmlcss

Solving the CSS Trick: Responsive Data Table (featuring inline editing) Display Glitch

In my quest to create a responsive table with inline editing, I turned to Chris's guide at CSS-Tricks (check it out here). To see how it all comes together, take a look at this Plunker demo. On mobile screens, the responsiveness is on point. https: ...

htmlcssangularjsdatatableresponsive-design

The image source is unable to locate the image

Adding an image to my React component is proving to be problematic as the alternative text keeps being displayed instead. In the Navbar component, this is how I am trying to include the image: <img src="../assets/images/nav_logo.png" alt=&quo ...

htmlreactjsimageimagesource

What is the method for applying a stroke-width:1 to specific sides of SVG shapes?

When setting a stroke-width: 1 on a <rect> element in SVG, typically a stroke is placed on every side of the rectangle. Is there a way to specify a stroke width on just three sides of an SVG rectangle? ...

htmlsvgvector-graphicsinkscape

The Angular template-driven form featuring Material inputs will automatically reset itself when initialized

I am currently working on a simple template-based form in my application, utilizing material form fields. I have opted for this approach instead of a reactive one. The desired functionality is to display the form only when the user clicks on a button. Up ...

angularformsangular-materialangular-forms

Encountering a DOMException while attempting to update the value of a textarea

Here is the HTML code snippet: <textarea formControlName="post-content" (keyup)="check(myText)" [(ngModel)]="myText"> </textarea> My check function looks like this: checkText(text) { // Cannot change the value of (myText) ...

angulardata-binding

Angular components that have recently been created are lacking header and footer elements

I'm not very familiar with how Angular works, but let me show you my folder structure to start off. https://i.sstatic.net/vxMR8.jpg So I've set up a dashboard-agent folder with some new components, but they look incomplete without a header and f ...

angular

CSS: Caption text below image remains on same line

I am struggling with positioning a div that contains an image and a caption. My goal is to make the caption break into a new line when it reaches 95% of the width of the image. Despite my efforts, I can't seem to achieve this. The text always pushes ...

htmlcss

Incorporate vanilla JavaScript and HTML into a Next.js application

I am facing an issue where I have a file that contains JavaScript and HTML code, which needs to be rendered within a Next.js application. The challenge is that the code in the file cannot be converted to JSX, and React Helmet does not seem to render anythi ...

javascripthtmlreactjsnext.jsreact-helmet

Issues with Bootstrap column rendering in IE11's Flex layout

I need assistance with the code below: .hero{ background:lightgrey; padding: 50px 0px; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E26 ...

htmlcssbootstrap-4internet-explorer-11