I'm currently using material-ui data grid component and find it excellent.
However, for a current feature I'm working on I need to have infinite scroll support within the DataGrid. Has anyone done this previously using material-ui data grid?
Doesn't seem like its supported out of the box reading the docs. I did come across the issue which has some suggestions in the comments.
Keen for any tips on how to use infinite scroll with material-ui data grid
Yes, easiest way is to use commercial version.
Find it here on infinite Loading section:
https://mui.com/x/react-data-grid/row-updates/
Props name is onRowsScrollEnd. This can fire a function to fetch more data.
Related
Good day!
I faced one issue with handsontable on my project
For automation we use Selenium + Java
The handsontable render only visible part of the table. It is easy to manage it by xpath/ or CSS locator. But I cant manage invisible part of the table.
For example:
//div[contains(#class,"ht_master")]//tbody/tr[5]/td[5] - the cell present on visible part of the table and I can nabage it
//div[contains(#class,"ht_master")]//tbody/tr[15]/td[5] - the cell present on hidden part and - element is not exist
Scrolling is not good approach, also change zoom also.
So maybe someone faced the same issue? How to avoid that case and how I can save all rows in collection?
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 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 wondering what the best tool is for developing a mobile UI is. My requirements are that I retain full control over the look and movement of every UI component. I think Flex might be the best way to do this but I can't tell if I'll have that level of control using their UI components.
Any links would be appreciated. Thanks!
Edit: For example, looking at the documentation I see there's a an 'enabled' field which dims the color of a container and it's children if false. Am I able to change that so, maybe a repeated bitmap pattern appears if false?
Or, if there's a sliding menu can I edit the speed and change in speed as it closes?
You can create any component you like and make it look like anything you want. You don't have to use standard components. You can reskin any components just by specifying a new skin. It's really pretty easy.
You can create custom skins for Flex, for both Spark and Halo components. You also can create custom components, either based on other existing components, or based on the base component. You could even create custom objects which are just based on Sprites or similar (if you like to have control over everything :P).
edit
In response to your updated question. Regarding the enabled/disabled property, yes, it is possible to skin that. Spark components have states, for example a Button has a up, over and down state – and an disabled state. That state is exactly what is active when the enabled property is set to false. So yes, you can skin that.
Regarding the sliding menu animation, I'm not totally sure if that would be easily possible as I believe that this is coded into the component itself and not part of the skin to decide. However even if that is the case, you could instead create your own component that basically features exactly the same functionality but has a changed animation there.
I'm not sure if the Spark skinning wouldn't be able to do this though, because what you definitely can do is creating transitions between states. So if the slide is made with different states, you'll probably be able to change the transition as well.