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).
Related
This question has been asked before over the years, but the solution proposed to just flip the dataset does not address the issue with the column headers not being fixed. Consequently, when scrolling, the headers disappear to the left. The real solution should be implemented in the control itself. So either I find a control that offers that or I will have to code the whole control myself. I'm wondering if that control already exist. Side note : I need this control to work smoothly with many records.
I decided to create a brand new control that implement the grid from scratch, using gdi+ to draw the cells. Much more flexible and also waaaay faster rendering. Implementation is still on the way.
I am using a com.vaadin.flow.component.grid.Grid in my Vaadin 14 sample app. I have added an extra header row and introduced a toggle button for changing its visibility.
Unfortunately, this led me deep down to com.vaadin.flow.component.grid.ColumnLayer, which is not visible.
I have also considered dropping the header cell contents and re-adding them. However, this just leaves a full-height row behind. I have also thought about applying some CSS, but could not find a way to, without altering the official source code.
Can anyone help with a more appropriate solution than building my own Grid version (by forking the official implementation)? This feels like pretty common grid functionality to me...
To whom might be interested about this...
I have used the dirty workaround mentioned the link shared by Tatu Lund.
However, that only works for GridSingleSelectionModel.
For GridMultiSelectionModel, the underlying implementation is rather strange.
For example, I complemented the GridSingleSelectionModel workaround with setting visibility to false on the Un/Select All checkbox the GridMultiSelectionModel generates. This seems to have a listener on it and automatically hides the checkboxes generated by the GridMultiSelectionModel on each row. Which is similar to GridNoneSelectionModel, so unusable if you need to be able to select items.
Unfortunately, I have trusted that Vaadin 14 should be pretty mature by now, but as I explore it I find myself in the position to rather choose version 8, for instance.
It's not the first issue of this kind and, that being said, I am not sure I understand why is Vaadin releasing new major versions every so often, while they don't seem to be able to deliver a comprehensive, stable and reliable option to their adopters. Vaadin 8 is almost 5 years old, and it looks like no later version is even close to it.
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 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/
I'm in need of some pointing in the right direction here...
I have a site with a couple of different content types. I want to display this content in a book-like layout. The book should be of a fixed width and height and the pages should be populated with as many nodes as can fit. It should be in two columns, with the left column being filled before the right one.
How should i approach this?
I have been thinking about a few solutions, don't know which are possible and which one is best or which i can combine.
I could just create a view that selects more nodes than is need. Then check how long the nodes is in the theming layer and throw away the nodes that aren't needed. Pagers need to be fixed too.
Use panels in combination with views to display one view in two columns, if this is possible. Need a way to determine the amount of nodes that is displayed on each page, based on content length.
Write a plugin/handler for views so that i can select an amount of nodes that has an maximum, predetermined, max content length.
Write a new display-style for views that shows content in two columns with fixed heights.
Write a custom module, leave views and panels out of it and do everything myself with db_queries.
Would appreciate and guidance a lot. Not looking for a finished solution, i'm not afraid to code and i will contribute back if i create something that someone else can use (like a views plugin). Just need someone to guide me in the right direction :)
The hardest thing will be to figure out how much content you need to fill out the space. There's not really a good way to do that either since, it will depend on both the markup and the styles.
The best solution I can think of is loading the nodes with javascript, or maybe just have them available as javascript variables. That way you could insert the nodes to your page one by one. You could then in the JS see the heights of all the nodes in total, and once that height is bigger than x, you only need to remove the last inserted node.
It's not a perfect solution, but I think you should look at doing this with JavaScript. The only problem is, that it wont degrade gracefully very well.
Drupal help you build fast, and it looks like promising but fails to fullfil the needs of client, designer also programmer. You need to write one module page, and some functions.
5th solution you gave has little trouble than others. Write a function that to have "teaser like" behavior, I will return formatted node according to its type. Don't lay on drupal's teaser system. If teasers will have different heights, add height to teaser function.
I don't have a direct answer, but have a few things for you to think about.
It sounds to me like what you are looking for is a combination of a CSS3 Multicolumn Layout (see http://www.quirksmode.org/css/multicolumn.html for example) and limiting the displayed content to a fixed height.
My first thought would be to create a single view that gets more than you need, display it using CSS3 columns, and set overflow: hidden; for the container, so that the extra text is just hidden.
If you need to get more particular, you may need to dig in to the views rendering system to limit the total number of nodes based on how many characters have been rendered.
But since your desired constraint is more visual than data-oriented, I think that the most practical approach will be to use javascript to detect the text height and state of overflow.
There are some things that are unclear about your requirements. What is the purpose of the 2 content types? Does one display on the left and the other on the right? Or are these just 2 different content types that should behave the same way, but we're only seeing one content type at a time on a given page? What should happen with the overflowed content? Should it appear dynamically on page 2, then 3, then 4, and so on?
One parting thought: Maybe load ALL the content that you want to page through, directly to the browser. Maybe have it start off hidden. Then use javascript to display it, formatted into columns, and use javascript to handle the paging as well.