I am trying to getText from a column in ag-grid table using Katalon Studio. This column is at the end of the table and not visible until scrolled. I have tried using Katalon keywords Scroll to Element and Scroll to position but the scroll is not happening, I can easily getText from the column if I scroll the table manually but otherwise the getText fails with msg "Unable to find element".
How do I achieve this through automation using Katalon?
Kindly please guide me.
Thanks in advance.
ag-grid uses DOM virtualistaion to vastly improve rendering performance.
As the user scrolls horizontally or vertically, the grid dynamically updates the DOM and renders the additional cells that are required while also removing the cells that are no longer in view.
That is the reason, the elements are not present when you don't scroll them into view.
If you anyways want to load the columns for the rows, you can turn off column virtualisation by setting suppressColumnVirtualisation=true at grid level.
Keep in mind that this has performance cost associated with it.
Reference: Column Virtualisation
Related
Is there any way through Selenium or Javascript to perform a horizontal scrolling in MUI table?
Due lazy loading it's impossible to perform Actions to element that does not exist, i.e. element I'm looking for that's not in the DOM yet.
Example of situation:
Imagine I have columns from A...Z but only A...F are visible and in the DOM and column Z will be in the DOM only after scrolling to the end of right side.
I already tried increasing scrollHeigh in a scrollable element (.MuiDataGrid-virtualScroller) in order to perform scrolling. It increases without exception, but does not perform a real scrolling.
I also tried scrollIntoView to last cell/column but it's not enough to lazy loading call rendering for next column.
Scroller element does not accept sendKeys, though. Hence no Keys.RIGHT acceptable.
I'm trying to add a popover on a button but the placement isn't good.
Here is a screenshot :
You can expriment it here : https://stackblitz.com/edit/ngx-translate-example-ruqwa7
I've been able to find the problem but not the solution.
The user clicks on the delete button
Html for the popover is appended in the html. But there is nothing in the body because translations aren't calculated yet (I'm trying to understand why)
a function calculates the required positioning
translations are loaded (too late)
What I noted that was interesting
In the stackblitz, I made en "emulation" without the datatable (with the red square). In this case it works because the translations are loaded before the position calculation is done
Without translation, by hardening the content, there is no positioning problem.
Why is the position calculation done after loading the labels? This is obviously due to the ngx-datatable. Because without the datatable, the position is correct.
I need to be able to animate drag and drop in my vertical list. I used vuedraggable, wrapped my list in a transition-group and it all worked sweet. Until I fetch new data from the server. Now because of the introduction of transition-group for a split second the old data and the new data live together in the DOM causing the expansion of the list and pushing subsequent div down and back up.
This is kind of expected per the docs:
the DOM operations for insertion and/or removal will be executed
immediately on next frame (Note: this is a browser animation frame,
different from Vue’s concept of nextTick).
Regardless of being able to drag and drop the element, if we were to fade in/fade out the new/old elements they will co-habitate for the time of the animation, which is not great as seen in this pen
Anyway to fade out, change the data, then fade in the new one, while maintaining the height of the list?
Note that without fade the problem is still obvious:
Pen of my issue: click the switch data button to see the issue.
Turns out it's pretty know issue. By reading through this thread and toying with this example, i was able to achieve something to my liking by using:
list-leave-active {
display: none;
}
Resulting Pen
A css fix may be to wrap the contents within a box of some height and set overflow hidden.
So, even when new elements co-exist the jump in scrollbar can be avoided.
I have a dgrid table which is very long one, and there is horizontal scroll bar, I want to know if there is a way to make first 2 or 3 columns fixed (always displayed) and apply horizontal scrollbar to the rest ?
Yes, dgrid supports this with ColumnSet. From the documentation:
The ColumnSet module provides functionality which divides a grid's columns into multiple distinct sets, each of which manage their columns' horizontal scrolling independently. This makes it possible to keep certain columns in view even while others are scrolled out of viewing range.
You can find demos and example in the dgrid site.
I'm trying to implement a sort of drag functionality into my app. As a simplistic example imagine I have a 2x2 square of buttons, so four buttons total. Clicking a button will perform some other functionality however I want when they hold and drag one of these buttons for it to do something else (ideally if you drag one button and drop it while in the space of another button the two buttons will swap places, as long as I can get dragging and dropping working the swap should be easy).
I've done some research and followed a few tutorials but seemed to get errors at one step or another with all of those. It seems ListViews and GridViews have some drag and drop functionality in them already , but I had trouble properly arranging my buttons (there are many more than four and they are in very specific positions, like a diagram) inside these views, let alone getting drag and drop working with them.
How would I go about doing this? Ideally I could just tag these buttons as draggable, and then on a drag-drop event check for a drop position, then if the position is valid perform a swap method. I just can't seem to figure out how to make them draggable or how to have an event that checks a drop position.
Thanks.
Easy peasy, create a custom control that looks the way you want it to, set ManipulationMode to TranslateX|TranslateY, handle manipulation delta events to update positioning with something like a Canvas or TranslateTransform and when manipulation completes - either make it click or animate to the new position. From my experience - getting any other manipulations to work with a regular Button class just isn't working and since a button is a really simple control - it is easier to create your own than try to extend the existing one in such cases.