I need to implement a lazy loading table in FLEX i.e load the table data once user starts scrolling down.
Something like this : http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableDataTable.jsf?c=scrollableDataTable&tab=usage
Is there a ready made component available in FLEX to handle such requirement. If so can I have a look of that in any FLEX showcase or demo site?
Regards,
Satya
Short answer, no, there are no default components that does this behavior out of the box. However, you can code it. Since the DataGrid is data driven, you can update the dataProvider property with new data when the user scrolls to the bottom of the DataGrid. You'll need to figure that out on your own.
However, this behavior is not something I would agree with from a User Experience standpoint. I would seek another way for the user to get to the data they want, like pagination, loading all the data at once (if possible), maybe have a searching functionality or filtering. It really depends what you're trying to accomplish.
Its sometimes referred to as data-paging. James Wards has a very good demo is on Tour De Flex under Flex 4.5 for a DataGrid
Two example for lazy loading for Flex 4:
http://www.jamesward.com/2010/10/11/data-paging-in-flex-4/
http://www.tricedesigns.com/2011/10/26/infinitely-scrolling-lists-in-flex-applications/
Related
Is there any way to have multiple instances of a store?
I am actually trying to fill a grid layout with thumbnails (which contain buttons and other stuff).
I want to outsource the items in a separate component, using its own instance of the same store.
I don't know if that's even a good solution. It's the only one i came up with so far.
Anyone has a better idea how to solve this?
What is important to me, is that each thumbnail is loaded when its component is rendered. While it is loading it should display a loading spinner.
It's not a good approach. The purpose of the state is to exist once and be available to all.
What you need is state that holds a collection of FileState (or whatever you want to call it) which has all the info it needs, including bool IsLoading.
Is it possible to force Vaadin 8 grid to load all rows eagerly from backend? Currently it shows only records visible on the screen and fetches next rows on grid scrolling.
You could use grid.setHeightByRows(totalNumberOfItems); This will cause the grid to show all elements at once, without a scrollbar.
No, the lazy loading behavior is hardcoded into Grid: https://github.com/vaadin/framework/blob/master/client/src/main/java/com/vaadin/client/widgets/Grid.java#L7222-L7224
Edited to add, based on the comment below: not quite hardcoded, but you will still need client-side changes to implement a non-lazy loading Grid (and, as far as I can tell, nobody has actually tried it before).
I am looking for some advice in regards to getting a very quick display of our reports. The problem I am working with is I receive an XML data structure that defines our layout. The report can be anywhere from 2 to 3 pages to perhaps 20 to 30. So to make the report display as quickly as possible I would like to just render the visible portion of the report. Here are the issues I need to overcome to accomplish this and I am looking for some advice how how to accomplish this.
To get a better visualization, Think of this like a word document. The reports have sections and I want to be able to get them to display as quickly as possible.
1) Of course I do not know the height of the child components I will be adding. Is there any techniques where I can determine if the components I am adding are not include in the view port and could I trigger off scroll bar movement.
2) I was thinking of adding estimation to the children components and then using that to set the height of the parent container. then when I receive scroll bar move event, I would check if the child components have been added to the parent and if not add them. Is there anyway to get the height of a component without rendering it?
3) Does Flex support anything built in that will accomplish this.
Any other techniques would be welcome. Basically I want to get the report displayed to the user as quickly as possible and delay the rendering of components that are off the screen.
Any suggestions would be welcomed. Thanks in advance.
Added Info.
Hard to provide code since I have not coded it yet. Let me try and expand with some details. I have a Parent Container where I take the some XML and using the XML creating children components based on the information in the XML. Right now when we do this it can take a long time to render a long report. What I want to do is to reduce the rendering time by delaying the rendering of those children objects. I have looked into things like the creation policy and createDeferredContent, but not sure if this is the right way to go. Guess the general problem I need to attack is how to do you stop rendering objects once you are outside the parents viewport. What I want is an item renderer like functionality but there is no similarity between the children. Perhaps a picture might be useful (will add as soon as I get to 10 points)?
Use spark List with useVirtualLayout turned on. This is what it does.
There is always similarity between children, but if you can't find it, you can use an itemRendererFunction.
I have an AdvancedDataGrid which Im attemping to update with data from a web service that I poll once very 10 seconds. Im using a HierarchicalData object to provide data to the grid. The update seems to work fine, except that on each update, any nodes that were expanded are collapsed when the grid is refreshed. Stranger still, when I dig down into the bowels of the thing and look at the contents of the HierarchicalCollectionView that backs the grid, I can see that the openNodes property correctly contains the nodes that I opened, but those nodes are not shown as open on the grid...the state seems inconsistent. Any help would be much appreciated!
I try and steer clear of that component. I think your best bet is to extend it and implement the functionality you need (you will probably end up overriding a good amount of logic to get what you need).
You already know that you can utilize the openNodes property...
I know this answer doesn't help you immediately, but you will thank yourself later if you take the time to roll out your own component.
I'm currently building an application that is presenting tabular (fetched from a webservice) data and have squirted it into a datagrid - seemed the most obvious way to present it on screen.
I've now come across a few limitations in the datagrid and wonder how I might move forward. As a relative newcomer to flex development I'm a little lost.
A few things I am wanting to do.
The data is logically split into groups and I would like to be able to have subheadings in the grid whenever I move to a new group.
I would like to be able to highligh individual cells based on their content relative to other values in the row - ie highlight the cell with the highest value in the row.
Is this possible with the standard datagrid?
I'm actually using the try-before-you-buy version of flex builder at the moment but I have ordered Flex Builder 3 Pro - which is on its way to me. I understand there is an 'advanced datagrid' control in this version - perhaps that will support some of what I wish to do?
Alternatively - is there another way of building custom tabular data?
stay the hell away from Adobe's AdvancedDataGrid. You will learn quickly it has many shortcomings, you will think you are better than it and override a few things here, tweak a few things there, but in the end the ADG will absolutely destroy you. Heed my call and avoid this at all costs. The ADG was outsourced by Adobe to their failed Indian team that has sense been disbanded, it alone counts for over %30 of the entire flex framework, and their are horrible deeply rooted issues that are better off starting over at this point. STAY AWAY FROM THE ADVANCDEDDATAGRID AT ALL COSTS!!!!!
The DataGrid is the best bet for that, but also check out the AdvancedDataGrid (here are some AdvancedDataGrid Demos with Source from FarataSystems).
(source: flexicious.com)
Both the DataGrid and AdvancedDataGrid are notoriously hard to customize, and everything you'd like to do is pretty advanced, so it will take a while to get going, but you can do it eventually.
There's no other way to build tabular data unless you start doing some advanced things with some of the data visualization libraries out there.
Good luck,
Lance