New API: onScrollEndReached (x/y)

[alexkrolick]

A prop that takes a callback for reaching the end of the scrolling area would be useful for infinite scroll/autopagination

[scamden]

actually the grid's default data-model can handle scroll virtualized to the server. the suggested model is to load just id's to represent each row or at least to know the row count ahead of time (even with huge data sets this is usually doable) and then fetch the full objects as the grid asks for them. the ReactGrid takes a loadRows prop which is (rowIndexes : number[]) => void and expects you to populate the data for those rowIndexes if that makes sense. (the indexes are in the data space, that is to say they don't include the header)

[scamden]

if you really want to do something on scroll the grid does fire numerous events through it's eventLoop; one is 'grid-cell-scroll'. currently this has to be bound directly through the grid object but i have been considering adding event props like react does (on-grid-cell-scroll={} etc)

[alexkrolick]

Ok, I can look into loadRows; however, a prop that fires when the end is reached is more useful in the case where the full number of rows is unknown or only known approximately.

[scamden]

Makes sense. Wouldn’t be hard to add either. I will mention that adding or removing rows is a lot more expensive than changing the data on those rows because it forces the grid to recalculate a bunch of its internal models. I’ll go ahead and implement this feature when I get I chance though but just wanted to give that warning for your info.

…

On Mon, Jan 22, 2018 at 5:52 PM Alex ***@***.***> wrote: Ok, I can look into loadRows; however, a prop that fires when the end is reached is more useful in the case where the full number of rows is unknown or only known approximately. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#5 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABE5mPv4HPSShMhbKj7ZPO8Q1RNQSjxHks5tNTtmgaJpZM4Re1HJ> .

[yashshah12]

Hey, I am a colleague of @alexkrolick and I was wondering if there is a timeline as to when this feature will be into the next release?

[scamden]

well as i told @alexkrolick this feature is not the recommended way to virtualize the data in the grid, so i would strongly recommend taking the approach i mentioned near the top of this issue. if you're dead set on following a different approach i can prioritize this though as it won't take terribly long. let me know.

[alexkrolick]

To clarify, is this how it works:

1. Initial data load (total = total item count)
2. Create row data structure for fetched data
3. Fill in up to total with empty data
4. Get ref to grid (see README)
5. Attach loadRows to a function that fetches (endIndex - startIndex) more rows and changes the data in place (have to be careful with React's setState and immutability here I think).

What is the page size for the loadRows method? Is it configurable?

[scamden]

@alexkrolick that's close ya. there's no need for a grid ref or to fill empty data. you can do it like this

1. initital data load get total item count
2. create total row objects
3. pass a function to loadRows prop that when called fetches the data associated with the supplied row indexes
4. when the data comes back from the fetch either put it on the data field of the correct row object you created, or you can pass all the data you know about directly to the data prop of react grid as a two dimensional array where data[row][col] = gridDataResult;

The paging is an optimized algorithm that loosely tries to fetch twice the current viewport size (in rows). I'd be open to discussing tweaks to this, but it worked very nicely for us over at salesforceiq, so i'd recommend trying it first to see how it performs for you.

[alexkrolick]

Oh, there's a loadRows prop 😁 ... https://github.com/gridgrid/grid-react-adapter#props-and-formats

The query is relatively expensive (it's filtered Elasticsearch data), so I think making fewer would be better.

[scamden]

haha :) ya we also used elastic search. so your filter is on the fetch of the actual row data? obviously not suggesting you rearchitect your entire stack haha, but our approach was to run the filter on the ids only query and then fetch the data directly from those ids. that way you only have to run the filter query once, instead of on every scroll. just musing really as it's probably not a feasibly quick change. def interested to discuss how you'd like the paging to work in an ideal world. maybe open an issue for that specifically?

…

On Tue, 23 Jan 2018 at 11:50 Alex ***@***.***> wrote: Oh, there's a loadRows prop 😁 ... https://github.com/gridgrid/grid-react-adapter#props-and-formats The query is relatively expensive (it's filtered Elasticsearch data), so I think making fewer would be better. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#5 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABE5mKP4e1slcrKHZ2NreRJsUJFHp95zks5tNjf-gaJpZM4Re1HJ> .

[scamden]

oh i see how it would be easy to miss in the types. the reactgridprops interface extends from the gridopts interface so it has every field there as a prop as well. i'll add it to the docs.

[alexkrolick]

run the filter on the ids only query

We could do that, it's not a big change for us right now.

I can open a separate issue for infinite-scroll use cases, for now I think we can try this.

[scamden]

nice! ya def faster i think, but that's my humble opinion

…

On Tue, 23 Jan 2018 at 12:51 Alex ***@***.***> wrote: run the filter on the ids only query We could do that, it's not a big change for us right now. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#5 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABE5mHDhfDLhidNpCKZ5WyVysD5AMPmoks5tNkZZgaJpZM4Re1HJ> .

[yashshah12]

Hey @scamden, I see the loadRows in the readme and I passed that props to the component, but it didnt call my function. I am just wondering if that function is implemented cause I am looking at your code, and I dont see that loadRows prop being used.

[scamden]

load rows is used directly by the grid so it's passed along in opts to the grid create method. it definitely should be calling you. can you post a code snippet?

…

On Fri, 26 Jan 2018 at 12:53 Yash Shah ***@***.***> wrote: Hey @scamden <https://github.com/scamden>, I see the loadRows in the readme and I passed that props to the component, but it didnt call my function. I am just wondering if that function is implemented cause I am looking at your code, and I dont see that loadRows prop being used. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABE5mC4iVT6eL3GlvpGapm451xDbvkNfks5tOjsygaJpZM4Re1HJ> .