I am facing speed issue problem in handsontable in mozilla browser. Whenever I am writing anything in cell then press "Enter" key to go to next cell then it is taking around 3-5 seconds to move to the next cell. I am facing this speed problem when there are so many records in a sheet.
Please help me out from this situation. To see this problem, you can go on following:
http://www.promact.semanticexcel.com/
And login with following details:
username: test
password: test
and then open "LSA_Output_2nd.txt" sheet and then try to work with this sheet then you will notice speed issue. Please have a look and let me know if any solution you have. Thanks.
I couldn't actually log into your test site, but your problem seems like a common one. Hansontable re-renders the whole table on any cell change. The best way to work around this is to limit the height of the table, then only visible rows will be rendered. See the demo page on scrolling: http://handsontable.com/demo/scroll.html
However, if you have many columns in your table, what you gain in editing performance, you lose in scroll performance, since all newly-visible rows need to be rendered when scrolling, which greatly worsens responsiveness. I'm yet to find a better alternative.
Related
I have a grid in ExtJS 6.0.2 that can be set to auto-refresh (it reloads once every ~10 seconds), but when it does, I want it to stay where it is instead of scrolling to the top each time. We have successfully used preserveScrollOnRefresh to do this with other grids, but for one particular grid, it's not working. In order to try to get it working, I decided to try calling getScrollY() before reloading the store and setScrollY() after, but that didn't work either. When I stepped through with the debugger, for some reason, getScrollY() returned 0 even when I had the grid scrolled all the way to the bottom.
Is there anything else that I can try?
it sounds like this is working for other grids in your app, so without seeing any code I'd suggest that something with that store/grid ecosystem is not configured the same as other grids in your app.
perhaps post a fiddle (fiddle.sencha.com) with an example, that may also help you find your answer if the fiddle works.
first post to StackOverflow, though I've been finding great tips for a few years here. Hope to resolve a vexing problem with handsontable.
I have an application that presents a handsontable instance with several columns whose content/format is dependent upon the value in a cell in another column. I determine the content and format of the dependent cells by way of a database query and server-side processing, the results of which are sent back to handsontable for processing in the afterChange function.
My problem is that whenever the user updates one cell in the table, ALL cells blink while the code laboriously reconsiders the formatting for ALL cells in the table. The preferred behavior would be to ONLY update the cells for which the formatting has changed, i.e., that small set which is dependent on the value that changed in the first cell. It's only these dependent cells whose contents are being changed anyway. Why redraw the WHOLE table??
I have searched and search here and elsewhere, and the closest to an answer I could find is that this is the intended behavior for the table. I don't agree...when the table is anything larger than 10 rows, the updating process is painfully slow and distracting to the user.
Any suggestions? I'm open to directly editing the handsontable js code, but would prefer to flip some flag I'm unaware of if possible.
Thanks all!
afterChange fire only one time for the cell you just updated (documentation example).
Your problem might come from an afterChange "chain reaction". The first afterChange modifies one or more related cells, triggering others afterChange and so on. If that's the problem, you can put a filter on the source parameter.
Another solution could be to work on a copy of the data to do your updates (see data binding), and once everything is fine, inject it back on the table with loadData, and ignore the loadData source in the afterChange callback.
Finally, if you still have some performance issues, you can check the performance tips, and remove any option that might slow your table (example with columnSorting)
(sorry I can't use comments to identify precisely from where your issue come...)
I'v run into an preformance releted problem with a DataGrid in an Sliverlight 4 application that I'm currently working on.
In our application we have a DataGrid which is quite huge, up to 4000 rows.
Its obviously extreamly slow to scroll a grid this big. Lets say you grab the tracker in scrollbar at the top and drag the mouse courser to the bottom. The tracker eventually reaches the bottom but it takes a few minutes.
It seams like Silverlight wants render ALL rows that it passes.
Using the ScrollToPercent method works like a charm though, so what I would like to do is to use ScrollToPercent when you release the tracker.
You follow? Lets say I grab the tracker and then I can move it up and down the scrollbar WITHOUT the view changing, but as soon as I release the tracker it should trigger a ScrollToPercent.
Did that make sense? Is this possible, or do you have a suggestion that in another way can help me solve this problem?
what does Recalculate Layout Paint mean in chrome developer tool TimeLine records? and how to improve the page performance by reduce the page Recalculate,Layout and Paint's count? can give some suggestion?thanks
Basically, they're your browser figuring out how to draw the changes that you made to the page.
Don't worry about getting rid of them -- if you did that, your site would be static.
However... ...if you want to do something that IS useful for performance, which does have to do with reflows and repaints, then batch your changes together.
Lets say that you got a job at Twitter.
And your job is to write the next version of the window that adds each twitter post to the screen.
If a user gets 250 new tweets in their timeline, and you add each one in a loop, one after the other, the browser is going to slow way down, because every time you add one, it will have to reflow (move things around to make space for the thing you added) and repaint (style everything that was affected by the addition).
A better way of doing it would be to build the list of new tweets together off-DOM (ie: with elements that aren't actually on the page right now), and then add them all at once.
This cuts down on the number of times that a browser has to figure out where everything needs to go.
#Fabricio -- Micro-optimizing might not be great, but appending hundreds of browser elements in a loop, versus putting all of them in at the same time can make a big difference.
Just ask the Twitter guys, who weren't bothering to cache their jQuery objects.
Here's a very handy list of properties and methods that trigger the layout (reflow) of a page:
http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
You want to minimize these calls as much as possible -- especially in situations where performance is critical, such as during the scroll event, or when animating large blocks of content.
You can use the "Profiles" tab and "Audits" tab to detect the performance of your code. The will give you a report about your codes.
You can reduce the page Recalculate,Layout and Paint's count by many ways.
Append many child at one time.
Hide elements before change them.
Give images and other elements height and width.
I'm just starting to use SlickGrid but I've had a lot of success creating a remote model that can interact with the paging plugin. The only problem I have seems to be a browser issue, but I'm curious if anyone knows a trick that may resolve the issue.
I'm retrieving the data page by page in my model via AJAX and updating the grid with the grid.setData() and grid.render() methods.
The problem I would like to solve is that when the length of data changes the vertical scroll bar gets really confused, unless I change the current visibility of the filter panel (grid.hideTopPanel() or grid.showTopPanel()). By confused I mean that the scroll handle in the scroll bar doesn't change size to indicate the different number of rows that are now current, and if the list grows, the scroll handle size jumps all over the place as I scroll up and down.
I'm assuming the "fix" works because it forces the browser to recalculate the view port height, but is there any way to force that to happen? Or is there a better way to do what I'm trying to do?
Ok mleibman straightened me out, what I actually was looking for was grid.updateRowCount(). I believe he will be adding a call to this in grid.setData(), but for now just make sure the 2 method calls are used together.
Have you tried grid.invalidate() ? Im my experience that forces the grid to recalculate pretty much everything. It may be more heavy-handed than you need but at least you can see if a complete invalidate solves the problem.
I figured it out. You need to call grid.resizeCanvas() after calling grid.setData(). It seems like this should be part of the grid.setData() method because a call to it will change the number of rows. But anyway, that's what you need to do.