I'm doing a React/Redux project, and need to implement a virtualized/infinite-loading list. react-virtualized seems intended to do the job, but even after reading all of the available docs and reading a number of StackOverflow posts, I haven't been able to get it working or found a clear explanation of the mechanics of how the components actually work.
The primary examples I've looked at are:
https://github.com/bvaughn/react-virtualized/blob/master/docs/creatingAnInfiniteLoadingList.md
https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#examples
The primary issues I'm running into are:
It's very unclear how the loader is triggered to make a call to loadMoreRows() in the initial load/render case. Typical scenario is that we'd design the component to initialize itself with data by calling loadMoreRows() when it's initially rendered. The config values necessary to make this happen aren't obvious.
It's not clear whether the rowCount property is intended to represent the current state of loaded rows (the number of rows in a block/page of data), or the total count of the full set of row data. And, in either case, these can't be known in advance of making the initial AJAX load call, so what's the intention for setting the initial value of rowCount?
I've tried putting the code from various examples into my project, but I never see the loadMoreRows call being made. I think what's need is a fleshed-out example that demonstrates a very typical use case of a) initially rendering an empty List, which then triggers an initial data load call; b) updating the rowCount property, and when/where to do this; c) managing the currently-loaded data set representing the current block/page of data.
Any pointers would be much appreciated.
loadMoreRows is passed as a prop to InfiniteLoader (you can see that in the examples). It isn't meant to be called manually, it is used internally by InfiniteLoader and List, and is called automatically when scrolling down.
rowCount can have both of those behaviours. Your API could tell how many items there are without fetching them all, or it could not. rowCount simply tells List how many rows there are.
So for example, let's say we have 100 stores, and our first fetch gives us the first 10. That same response should say if there are more stores to be fetched still or not. Another fetch could tell us there are 100 stores total.
With this, we could use the total of 100 as rowCount (by querying the total number of stores, without fetching them all) OR we could use 10 + 1 as rowCount, as the first fetch told us there were still more stores to be loaded yet.
What would this mean?
If we have the first 10 stores loaded, and use rowCount = 100, InfiniteLoader would display 100 rows, but only the first 10 would have any content at all, with the rest of them showing the "loading" row placeholder component. And as that 'not yet loaded' rows appear as you scroll down, InfiniteLoader would call the loadMoreRows function to, well, load more rows.
In the other hand, if we had used rowCount = 10 + 1, InfiniteLoader would display only 11 rows, with only the last one being the "loading" row placeholder component. And when loadMoreRows is called, rowCount would be items.length + 1 === 20 + 1.
Summing up
loadMoreRows isn't meant to be called manually. It is called automatically by InfiniteLoader when a row that isn't loaded is being shown in the viewport. So initially rowCount could be just 1, no row would be loaded, and loadMoreRows would be called.
rowCount could either be currentItems.length + (moreToBeLoaded ? 1 : 0) or totalItems. The difference being what is shown to the user, either "Oops, end of what is loaded, wait some for more" or "Look, these are all the items there is, but haven't been loaded yet, wait some for them to load"
Related
I am trying to create alerts based on price crossing key levels that are defined dynamically in an array(a_pocyLevel1).
My alert is firing randomly and it is firing on different yLevels defined in the array and not the yLevel that is defined in the ta.cross statement.
In addition, I get the message "The function 'ta.cross' should be called on each calculation for consistency. It is recommended to extract the call from this scope".
While I understand that it is ideal to not trigger the alert in a for loop, I do not know how to set alerts for a group of levels that are set dynamically created earlier in the script. I have no idea how many levels there are going to be to avoid the for loop so I have hit a wall.
if array.size(a_pocyLevel1) > 0
for i = 0 to array.size(a_pocyLevel1) - 1
yLevel := array.get(a_pocyLevel1, i)
if ta.cross(close, yLevel)
alert(str.tostring(yLevel) + ' Crossed')
I have an array with a few items in it. Every x seconds, I receive a new array with the latest data. I check if the data has changed, and if it has, I replace the old one with the new one:
if (currentList != responseFromHttpCall) {
currentList = responseFromHttpCall;
}
This messes up the classes provided by ng-animate, as it acts like I replaced all of the items -- well, I do actually, but I don't know how to not.
These changes can occur in the list:
There's one (or more) new item(s) in the list - not necessaryly at the end of the list though.
One (or more) items in the list might be gone (deleted).
One (or more) items might be changed.
Two (or more) items might have been swapped.
Can anyone help me in getting ng-animate to understand what classes to show? I made a small "illustation" of my problem, found here: http://plnkr.co/edit/TS401ra58dgJS18ydsG1?p=preview
Thanks a lot!
To achieve what you want, you will need to modify existing list on controller (vm.list) on every action. I have one solution that may work for your particular example.
you would need to compare 2 lists (loop through first) similar to:
vm.list.forEach((val, index)=>{
// some code to check against array that's coming from ajax call
});
in case of adding you would need to loop against other list (in your case newList):
newList.forEach((val, index)=>{
// some code to check array on controller
});
I'm not saying this is the best solution but it works and will work in your case. Keep in mind - to properly test you will need to click reset after each action since you are looking at same global original list which will persist same data throughout the app cycle since we don't change it - if you want to change it just add before end of each function:
original = angular.copy(vm.list);
You could also make this more generic and put everything on one function, but for example, here's plnkr:
http://plnkr.co/edit/sr5CHji6DbiiknlgFdNm?p=preview
Hope it helps.
I have a test case that shows that angular element.remove() removes elements from the DOM sometimes, and fails miserably at other times even though I don't see an error. Here is the JSFIDDLE.
To see it working, click the Search button (no need to put in any data in the input field). This does two things:
deletes elements above the field and
deletes any elements below the fields (nothing to delete the first time around) and adds new ones.
This is the code that should clear out the elements below the search button.
$scope.searchTargets.forEach(function(target){
var resultNode = angular.element(document.getElementById('id_' + target.name));
if(resultNode != undefined)
resultNode.remove();
Repeatedly clicking on the search shows that the number of elements below the search button keeps increasing - even though it should really be staying at 3 elements. Why does the remove() method fail here?
Take a look at this forked fiddle:
http://jsfiddle.net/wcca93qc/
You need to reset the search results during each search using $scope.searchResults = [];
I also refactored to code a bit, to merge 3 loops that basically can be done in 1 loop.
I am unable to access the store elements returned from my store. When I console.log(me.proxy.read(operation)) and expand/navigate in the console I see all of my elements. There are 1000 rows. I am using the same store for a grid and have the pageSize set to 50. Even though I can see 1000 rows when i do a console.log(me.proxy.read(operation.resultSet.records[51])) i get an undefined message. So, it appears that for some reason the number of elements I can access is only 50 as that is what my pageSize is set to.
Long story short, I am using the same store for two scenarios. I want to have paging in my grid that will show 50 rows on each page. However, I want to loop through the entire store and load an array of all 1000 rows. The reason why I want an array of all 1000 is becasue I am going to use a date field in the rows to populate my date picker from an array. I am going to disable the dates in my grid and have the datepicker display only the dates that are in my grid.
I tried to include a screen shot but I am not allowed because i am only a 3 on the reputation system.
var operation = new Ext.data.Operation({action: 'read', start: 0, limit: 1000});
var proxy = new Ext.data.proxy.Ajax({ url: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent'});
me.proxy.read(operation);
console.log(me.proxy.read(operation));
HERE IS UPDATED CODE:
I have this in my controller:
ondatesStoreLoad: function(me,records,success)
{
var s = this.getStore('dates');
for (i = 0; i < s.getCount(); i++) {
MESSAGE_ID = s.getAt(i).get('message_id');
RECIP_EMAIL = s.getAt(i).get('recip_email');
UNIX_TIME_STAMP = s.getAt(i).get('unix_time_stamp')
console.log(i,MESSAGE_ID, RECIP_EMAIL, UNIX_TIME_STAMP);
};}
This puts out all 1,000 of my records to the console but I am not sure how to put them in an array that I can use in my datepicker component. When ever i try to get the store in the datepicker it is always undefined. I suppose it is becasue the store hasn't loaded yet so there is nothing there. Not sure how to get around that. Perhaps a callback handler?
HERE IS ANOTHER UPDATE:
I added a callback in my store.load:
var store = Ext.getStore('dates');
store.load({callback: function(){
console.log(store.data.items[999].data.recip_email);
console.log(store.data.items[999].data.unix_time_stamp);}
})
That took forever to figure out but now I can access all my records and have a smaller problem to work on. At the moment i just have one element hardcoded to do a quick test.
Where do I need to put the code to get it into my date picker disableDates config? I need to put the dates into an array but for quick testing I used minDate: just to see if i could see something work but it shows up as undefined. Now i have the code in a beforrender listener but that seemingly needs to be in some other place or maybe some handler for my date picker....? is there an onload for the datepicker or something i shoudl use for this??
Why not just change the datepicker directly from that ondatesStoreLoad function? Before the loop, disable all dates in the datepicker. Then during the loop, instead of the console.log call, enable the date that was found in that record.
In theory, that should work. However, looking at the docs for Ext, I don't see a way to disable all dates, or to enable a date. You can only set which dates are disabled. But the general idea of updating the datepicker in that ondatesStoreLoad call is still what you should do.
You might need to extend the datepicker class, and add some custom methods to it to be able to enable a specific day.
I am trying to get forward and backwards pagination working for a query I have on my app.
I have started with the example at: https://developers.google.com/appengine/docs/python/ndb/queries#cursors
I would expect that example to do a typical forward/back pagination to create cursors that you can pass to your template in order to be used in a subsequent request for the page after/before the current one. But what it is doing is getting cursors for the same page, one from the beginning and the other from the end (if I have understood correctly).
What I want is a cursor to the beginning of the following page, and a cursor to the beginning of the previous page, to use in my UI.
I have managed to almost get that with the following code, based on the mentioned example:
curs = Cursor(urlsafe=self.request.get('cur'))
q = MyModel.query(MyModel.usett == usett_key)
q_forward = q.order(-MyModel.sugerida)
q_reverse = q.order(MyModel.sugerida)
ofus, next_curs, more = q_forward.fetch_page(num_items_page,
start_cursor=curs)
rev_cursor = curs.reversed()
ofus1, prev_curs, more1 = q_reverse.fetch_page(num_items_page,
start_cursor=rev_cursor)
context = {}
if more and next_curs:
context['next_curs'] = next_curs.urlsafe()
if more1 and prev_curs:
context['prev_curs'] = prev_curs.reversed().urlsafe()
The problem, and the point of this question, is that I use more and more1 to see if there is a next page. And that is not working in the backwards sense. For the first page, more1 is True, in the second page more1 is False, and subsequent pages give True.
I would need something that gives False for the first page and True for every other page. It seems like this more return value is the thing to use, but maybe I have a bad Query setup, or any other thing wrong.
Thanks everyone!
Edit: Since I didn't find a simple solution for this, I switched to using ndbpager.
There's no such thing.
You know thats theres (at least) one page before the current page if you started the query with a cursor (the first page usualy dosnt have a cursor).
A common trick to access the previous page is inverting the sort-order.
If you have a list, sorted by creationdate desc, you could take the creationdate of the first element of your current page, query for elements with creationdate < this creationdate using inverted sort order. This will return the oldest elements which are newer then the given creationdate. Flip the list of retrived elements (to bring them into the correct order again) and there you have the elements of the page before, without using a cursor.
Note: this requires the values of your sortorder beeing distinct.
In some cases, its also possible to use a prebuild index allowing random-access to different pages, see https://bitbucket.org/viur/server/src/98de79b91778bb9b16e520acb28e257b21091790/indexes.py for more.
I have a workaround and not the best solution. it is baiscally redirecting back to the previous page.
Previous
I think PagedQuery has the capability but still waiting for someone to post a more comprehensive tutorial about it.