Determine the minimum height for rows without compromising the automatic height feature in Ag-grid

My goal is to set a minimum height of 40px for each ag-grid row while allowing dynamic height for rows exceeding this minimum.

      this.gridOptions = {
        /* rowHeight : 40, */
        headerHeight: 100,
        pagination: true,
        enableSorting: true,
        enableColResize: true,
        rowDeselection: true,
        suppressHorizontalScroll: false,
        autoHeight: true
      };

gridOptions.autoHeight enables dynamic height adjustments, but setting gridOptions.rowHeight or using getRowHeight(params) to establish a default minimum height overrides the autoHeight feature. Is there a solution to this issue?

javascriptheightrowag-grid

Answer №1

Successfully tackled this issue and sharing the solution for anyone facing similar challenges:

I identified a few adjustments that needed to be made:

  1. The version of ag-grid I was using (13.1.2) did not fully support the autoHeight feature. Updated ag-grid to version 18.1.2 and ag-grid-vue to 18.1.0 (leveraging Vue.js).
  2. I misused the autoHeight option. It required utilizing autoHeight: true; when configuring each column affecting row height, rather than in gridOptions.

Implementing these changes effectively adjusted row heights based on content.

  1. Introduced rowHeight: 40px; in gridOptions to establish a minimum row height post autoHeight implementation.

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

Transform post-back into PHP using JSON for Ajax posting

Currently, I am facing a challenge in integrating a Codeigniter application into Wordpress using a plugin. The trouble arises when the control encounters an issue while confirming the data for a new appointment. VIEW <div id="wizard-frame- ...

javascriptphpajaxwordpresscodeigniter

What could be causing the malfunction of this setTimeout function? Another related question to consider

I recently implemented a script on one of my pages, but I noticed that the setTimeout function doesn't seem to be triggering. Currently, it's just set up to display an alert as a test. I suspect that the issue might be related to a meta refresh t ...

javascripthtmlsettimeout

Exploring the wonders of Ajax with different endpoints for retrieving data

On our server, we have an endpoint set up like this: app.get('/A/:A_Id/B/:B_Id/C?', callbackFunction); When I enter the URL "http://xx.xx.xx.xx:3000/A/1/B/1/C?startTimeUtc=03:00:00&endTimeUtc=05:00:00", the server successfully returns data ...

javascriptjquerynode.jsajax

Enhance the functionality of your Rails application by implementing Ajax or jQuery to asynchronously load table elements separately from the page

Currently, I am facing an issue with a page that displays a list of user sites. The problem lies in the fact that I am making an API call for each site to check its status, which is causing the page to load very slowly. To address this issue, I would like ...

javascriptjqueryruby-on-railsajaxcoffeescript

Struggling with deploying Next.js on Vercel

Encountered an issue while trying to deploy a project on Vercel. The error message is as follows: fileName: comps/Navbar.js imported as import Navbar from "./Navbar"; 16:36:51 ModuleNotFoundError: Module not found: Error: Can't reso ...

javascriptnpmdeploymentnext.jsvercel

Uploading files with ExpressJS and AngularJS via a RESTful API

I'm a beginner when it comes to AngularJS and Node.js. My goal is to incorporate file (.pdf, .jpg, .doc) upload functionality using the REST API, AngularJS, and Express.js. Although I've looked at Use NodeJS to upload file in an API call for gu ...

javascriptnode.jsangularjsrestexpress

The Javascript setTimeout Function Prolongs Its Operation

Currently, I have a web app index page that performs two main tasks. Firstly, it geocodes the user's location and stores it in a JavaScript variable called "variableToSend." Secondly, it sends this data to mySQL using a PHP script after a delay of 10 ...

javascriptsettimeout

Displaying only one modal at a time with Bootstrap 3

The code snippet below is used to trigger my newsletter modal: $(window).load(function(){ if (sessionStorage.getItem("is_seen") === null) { setTimeout(function(){ $('#newsletter_modal').modal('show&ap ...

javascriptjquerytwitter-bootstrap

Encountering a frustrating internal server error 500 when attempting to insert values from JavaScript into SQL Server within Visual Studio

Here is a JavaScript code that calls a C# webmethod: var _data = { '_mStart': document.getElementById("St_Period").value, '_mEnd': document.getElementById("En_Period").value }; $.ajax({ type: "POST", url: "maps.aspx/my ...

c#javascriptjqueryajaxjson

Issue: The value of an object is not defined (evaluating '$scope.inputcode.password')

HTML Form: <form ng-submit="mylogin()"> <div class="list"> <label class="item item-input"> <span class="input-label">Username</span> <input type="text" ng-model="inputcode.username"> ...

javascripthtmlangularjsionic-framework

Modify the MUI time picker to display as a digital clock inside a DateTimePicker widget

I need to update my MUI DateTimePicker component to use the DigitalClock time picker instead of the Analog Clock picker. The current component has two steps, first picking the date from a calendar and then selecting the time. This change is only necessary ...

javascriptreactjstypescriptdatetimematerial-ui

Tips for maintaining the same identifier, content, or text despite changes in the DOM

I am curious about a situation where the ID of a div is changed from 1 to 34, but when clicked on, the attribute still returns 1 instead of 34. I apologize for any language errors, thank you. $(document).on('click','.edit_btn:eq(0)& ...

javascriptphpjqueryhtmllaravel

Every form submission leads to an increment in the number of ajax calls being made

When attempting to submit my form using ajax, I encountered an issue with the code. Initially, the ajax call does not trigger on the first click. I have to click it a second time for the ajax to work. Additionally, with each submission, the number of aja ...

javascriptphpajaxformstwitter-bootstrap

How can Navbar values in a React application be dynamically updated depending on the user's login status?

As someone new to React, I am exploring the correct approach to building a Navbar that dynamically displays different links based on a user's login status. When a user logs in, a cookie loggedIn=true is set. In my Navbar component, I utilize window.se ...

javascriptreactjs

Assuring and receiving a response object as null when using the .then method

Working with json data retrieved from a web service myService.getData() .then(function(data, status, headers, config){ alert(data.length); }... While I can successfully retrieve and inspect data through the browser console wit ...

javascriptangularjsangular-promiseangular-http

Having trouble selecting a radio button in React JS because it's marked as read-only due to the check attribute

In my scenario, I have a child component with radio buttons. The questions and radio buttons are populated based on the data, with each set consisting of one "yes" and one "no" option. I am attempting to automatically check all radio buttons that have a v ...

javascriptreactjsradio-group

Integrating component names into a tag in React

I've encountered a similar issue before, but unfortunately, the suggested solutions aren't working for me. I suspect it might have something to do with how I am conditionally rendering components. Essentially, I have a selection of choices for th ...

javascriptreactjsreact-redux

cross-domain ajax response

Imagine a unique scenario that will pique the interest of many developers. You have a JavaScript file and a PHP file - in the JS file, you've coded AJAX to send parameters via HTTP request to the PHP file and receive a response. Now, let's delve ...

javascriptphpjqueryajax

What is the best way to retrieve the value when hovering over a specific location in d3.js?

How can I display the value at the corresponding place while hovering over a line or bar chart using d3.js? var toolTip = svg.selectAll("path") .append("svg:title") .text(getMouseoverData(data) ); function getMouseoverData(d) { return d; } Currentl ...

javascriptbackbone.jsangularjsd3.jsjavascript-framework

When a timeout is triggered, the AngularJS Promise is not being cancelled

In my endeavor to incorporate a simple timeout feature into my promise, I set out with the intention that if I do not receive a response within 1 second, the request should be terminated. The code should not hang for a response nor execute any code intende ...

javascriptangularjspromisetimeout