Setting scroll amount manually on react-virtualized table (multigrid) - javascript

We are using react-virtualized table in our app. It is an multigrid. Suppose the table has 10000 rows and the table is currently scrolled to the 5000th row. What we want it, by clicking on a button the table should jump to the first row (scroll amount should be 0)
There are existing props such as scrollToRow or functions scrollToPosition or scrollToCell of the Grid, but they help you scroll down, for example you are at the 1.row and using them you can set scroll amount to a specified value and jump to for example 100.row. But you can not go backwards, I mean scroll to first row when currently we are on the 200.
I found a temp. solution by calling:
scrollToTop = () => {
setTimeout(function() {
this.bodyGrid.bottomRightGrid.handleScrollEvent({scrollTop: 0});
}, 100);
}
But it works only when called with setTimeout which does not seem fine.
I could not find any other way to change the scroll amount manually. My scenario is, user fetches 1000 rows and scrolls down to the 800.row. Then user clicks a button and it fetches some totally different new 100 rows for example, when the table is re-rendered (datasource is updated), it still keeps scrolling at the old position, even if whole datasource is replaced with a new one. I want that the scroll position goes to start, first row. But the table remembers the old scroll position at the 800 row, but currently we have only 100 rows so it scrolls a very out of bound location and points to a wrong position.

Related

Get the very last row in a table, although it isn't scrolled into current sight

I have a table which contains many rows. Only the nth-oldest rows are visible. The newer rows are hidden and one has got to use a scrollbar to move them into sight.
I have written the following Cypress-statement:
cy.get("span.class1.class2").last().click();
It returns the last row, which is visible, when the view becomes shown. Marked red in the screenshot.
But what I like to have is the very last row in the table. Marked blue.
Is that possible with a simple Cypress-statement?
Or do I have to move the scrollbar down first?
If so: How can I scroll downwards using Cypress?
Get the parent class of that table and you could try using scrollTo()option.
cypress documentation:
https://docs.cypress.io/api/commands/scrollto.html#Syntax
Examples:
cy.scrollTo(0, 500) // Scroll the window 500px down
cy.get('.sidebar').scrollTo('bottom') // Scroll 'sidebar' to its bottom
There is another option called .scrollIntoView(), but I think in your cases the scrollTo() might help.

React.js FixedDataTable - Row heights are not evaluated when table is re-rendered - scrollbar is missing

I have dynamic data in my table. The amount of data in a cell may change. I have implemented a rowHeightGetter method to calculate the height of a row. When I add content to a cell and rerender my table, the content appears and the cell is larger, but if the additional content caused overflow, scrollbars do not show up. Please see the jsfiddle and click on a row. You'll see that you can no longer access the bottom row of the table until you click a second time.
https://jsfiddle.net/3cooper/ed7Ltc6o/1/
It appears that _calculateState() is not getting the actual row heights from the rowHeightGetter methods when it calls
var scrollContentHeight = this._scrollHelper.getContentHeight()
At this point it is getting the height of the rows by checking the rowHeight property on the table. I see in _calculateState() there are other calls that eventually call this._scrollHelper._updateHeightsInViewport() to properly get the height. Should this be done again. Just really started looking into this today - so I could be missing something obvious. Thanks.
Is there a better way to handle this?
Update:
Also, I notice that once a scrollbar appears so that the contents can scroll, if you click a row again, the table with shift down but the scrollbar will not adjust. Then once you start to scroll up the scroll jumps to the correct position and allows you to scroll the entire table correctly.

Change Datatables options through jQuery

So, I have a table using the Datatables plugin. This table has a left fixed column to start with as well. Each one of my columns has a button to 'anchor' its column from scrolling, so fixing it in place.
You can change how many left columns you have fixed in the initialization with
new FixedColumns( oTable, {
"iLeftColumns": 1
} );
or "iLeftColumns": 2 and so on.
I already have my programming set to push the column to the far left, so now i just need to overwrite the iLeftColumns accordingly. How would I go about overwriting the datatables initialization with jQuery, on the anchor button click? With one column anchor clicked, iLeftColumns would be 2, but maybe the user anchors another column and makes it 3 and so on.

jCarousel adding items from JSON object onclick, wont scroll

I have 4 or 5 JSON objects that are created dependent on a menu item being click, what I am wanting to do is,
The user clicks a menu item (Walls for example)
A navigation bar is show that show thumbnails of the choice of walls that are available, the navigation bar is long and thin (horizontal across the page), with jCArousel it should show 4 choices ad then on clicking the next button it should scroll to the next 4.
If the user then clicks Doors, the walls navigation should dissapear, the subnav (and jcarousel) should then get populated with doors.
I am not having a problem populating the jcarousel with new data, I am having a massive issue getting it to scroll once it has been repopulated.
For some reason I cannot get the Fiddle working with the JSON object, but click floors and the doors and you should get hte GIST of what I am trying to achieve.
The function is causing a problem I believe is,
function mycarousel_itemAddCallback(carousel, first, last, data)
{
// Simply add all items at once and set the size accordingly.
console.log(data);
for (i = 0; i < data.length; i++) {
$("#secondary ul").add(i+1, '<li><img src="http://placehold.it/141x75"/></li>');
}
$("#secondary ul").size(data.length);
}
Do I need re-initializze the carousel after adding new data or something?
From documentation:
reload
Reloads the carousel. This method is useful to reinitialize the
carousel if you have changed the content of the list from the outside
or want to change options that affect appearance of the carousel at
runtime.
$('.jcarousel').jcarousel('reload', {
animation: 'slow'
})

HTML5 Canvas: Draw matrix with fixed first row and first column

I am using HTML5 canvas in my application to render a large matrix (1000*1000) of cells that are either filled or not.
However I fail to keep the first column and the first row fixed while allow for scrolling the rest of the matrix. Here's a picture of what I'd like to achieve:
http://i.stack.imgur.com/24kIV.png
The scrolling could either be the CSS/browser scrollbar or a javascript_based scrolling.
Any hints on how to keep the first row and column fixed?
Update:
When scrolling to the left/right the first row should scroll too, same for up/down scrolling and the first column.
You could make a layout with three divs, each one containing a canvas, and scroll the fixed element when the main element is scrolled: http://jsfiddle.net/SjBE5/.
document.getElementById("maindiv").onscroll = ​​​​function() {
document.getElementById("topdiv").scrollLeft = this.scrollLeft;
document.getElementById("leftdiv").scrollTop = this.scrollTop;
};​

Categories