How can I turn off Angular Grid's virtualization feature, where Angular generates div elements for the grid based on height and width positions?

Currently, I am working with an Angular grid (ag-grid) that dynamically creates div elements in the DOM to display data as the user scrolls or views different sections. As part of my testing process using Selenium WebDriver, I need to retrieve this data from the grid and compare it against the data returned from the API.

However, due to some of the div's being hidden behind Angular virtualization, WebDriver is unable to accurately capture all the data.

I am looking for a solution to force the grid to display all data at once. Is there a way to achieve this?

Answer №1

One key feature is the gridOptions.rowBuffer setting, allowing the grid to render additional rows above and below the viewport. By setting this value higher than your total number of rows, all rows will be displayed. In case of uncertainty, simply set it to 9999999.

It's worth noting that you referred to 'Angular Grid' and 'Angular Virtualisation', but the correct terms are 'Agnostic Grid' (where ag stands for AGnostic) and the virtualization technique used within the grid is specific to the grid itself, not Angular.

Answer №2

To ensure Angular instantiates the desired divs, try directly interacting with the scrollbar or panning within the scrolled area. You could also use scroll-into-view on a known instantiated object near the edge of the set to prompt Angular to instantiate the neighboring ones just outside the current view. If needed, repeat this process as necessary.

If you need further assistance, check out this informative page on scrolling to an element in Selenium: Scroll Element into View with Selenium

Answer №3

Consider changing the domLayout property to domLayout = 'autoHeight'

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

Having trouble with JavaScript in a project I'm trying to replicate

For my coding practice, I am working on a project where clicking on the images should change the main product displayed along with its color. However, nothing happens when I click on the products. Can anyone point out what I might be doing wrong? Here is ...

javascript html css

How to check off a checkbox using a jQuery function

I have a listbox displayed in my view. This listbox is using a template Listbox <div id="UsersLoad" style="width: 50%"> @Html.EditorFor(i => i.Users, "UsersForEdit") </div> UserForEdit Template (Code snippet) @model string[] @{ ...

javascript c#jquery asp.net-mvc-4 listbox

Encountered an issue while attempting to start the JavaScript debug adapter in Visual Studio

When attempting to debug my script code in Visual Studio, I encountered an error. How can I resolve this issue? ...

javascript visual-studio debugging

Unlimited Angular Digest Loop Caused by promise.then()

The issue: The usage of this.promise.then(function(){}) function within a controller method appears to lead to an infinite digest loop on $rootScope, even though the returned value remains constant. It should be noted that removing the .then() line elimina ...

angularjs promise

What is the best way to hide a <tr> element when its child <td> elements are empty?

I am facing an issue with a dynamically generated table that may have 'n' rows. If all <td> elements within a <tr> are empty, I want to hide or delete the entire row. My challenge lies in parsing through each <td> element to ch ...

javascript jquery dom

Deciphering click event parameters in an AngularJS application

Currently, I am in the process of improving a feature in an existing application that has already been deployed. Unfortunately, all the JavaScript code is minified, and I only have access to the HTML files. I need to implement a function that triggers when ...

javascript html angularjs onclick angularjs-scope

Add the Selected Value to the Title

Is there a way to dynamically add the selected value from each select element to its corresponding heading without requiring user interaction? I need this to happen as soon as the page loads. Here is an example in a jsfiddle https://jsfiddle.net/dqfvyvdt/2 ...

javascript jquery

Unexpected behavior found in certain parts of jquery due to the implementation of Ajax

Every time I try to use the ajax code on the same page or an external .js file, it seems to cause issues and prevents other parts of the code (jquery) from functioning properly. The ajax should only trigger when clicking on a specific li element with the c ...

javascript php jquery html ajax

The problem with setting headers in Node Express MySQL: Error message indicating headers cannot be set after they have been sent

I'm currently working on a project using Node.js, Express.js, and a MySQL database. I have posts stored in the database that I want to display using the Pug.js view engine. I've managed to connect to the database and render the home route success ...

javascript mysql node.js express pug

Issues with Google maps are causing multiple maps to malfunction

After incorporating some jquery code to create multiple maps upon window load, I noticed a peculiar issue with the maps - they all display the same location despite having different latitudes and longitudes set. Upon inspecting the code responsible for cr ...

javascript jquery html google-maps google-maps-api-3

Modifying an object's value before pushing it into an array in JavaScript

I've been struggling to find the right keyword to search for my issue. I've spent hours trying to figure out what's wrong, but it seems like a simple case of pushing an object into an array. The problem arises when I try to log the values of ...

javascript arrays angularjs object

Using flags to translate text on Google should not result in being redirected to another website

I have integrated Google's language picker with country flags into my WordPress template using the code below:  <a target="_blank" rel="nofollow" onclick="window.open('http://www.google. ...

javascript jquery wordpress google-translate google-translator-toolkit

Users using an iPhone are unable to adjust the scale or scroll on this website

I find myself wondering what I might be overlooking in this situation Here is the HTML code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="shortcut icon" href="../../nImg/favicon.ico" ...

iphone html css scale

Is it possible to nest ng-repeat and access $first and $last properties simultaneously

Below is the form that I am currently working with, <tbody ng-repeat="attGroup in attributesGroups"> <tr> <td class="vcenter text-right">   <a href="javascript:" ng-click="!$last && up ...

javascript jquery angularjs

Group in group, glitch in outdated browser

Facing an issue with IE6 while writing HTML/CSS code. I am looking to create dynamic divs using classes: Here is a simple example (not real-project code): .top {width: 50px;} .top.selected {background: #f00;} .mid {width: 114px;} .mid.selected {backgrou ...

html css class internet-explorer-6

Angular URL rewriting for optimal performance

Is it possible to rewrite an Angular URL like "www.mycompany.com/employee/{78}" so that when clicking on the employee and trying to open it in a new tab, it uses the base URL "www.mycompany.com/index.html/employee/78"? <rule name="main rule 2" stopProc ...

angularjs url-rewriting

When the wireframe property is set to true, the react-three-renderer will only render geometry using the <meshBasicMaterial>

I am new to using the three.js library along with react-three-renderer. I have encountered a problem where only geometry renders when the wireframe property is set to true. If the wireframe property is false (which is the default setting), I expect the mes ...

javascript reactjs three.js

The function GetURLParameter(sParam) is displaying %20 as blank space in the webpage

I am facing an issue with a code that pulls URL parameters into the landing page. The problem is that it is including white spaces as %20. For example, if my URL parameter is: example.com/?title=my website, it would display my%20website on the page inste ...

javascript jquery

Automating website navigation using dynamic waiting with Selenium and Scrapy

Recently, I successfully developed a web scraper using Python and Selenium. Initially, I relied on fixed time-outs to load the page while making use of Ajax calls to retrieve data. However, I discovered that Selenium offers a built-in function called WebDr ...

python selenium web-scraping scrapy

How can I use Ajax code to send data to a PHP page and receive the results as a JSON-encoded multidimensional array containing information on each item?

Apologies for the unconventional question title. What I am trying to accomplish is managing two tables in my database: a hotel table (table1) and a room type table (table2). My goal is to allow customers to customize their travel packages by changing hote ...

javascript php jquery json ajax

CSSer Q&A