Hi,
I have an igTreeGrid where a subset of the rows have a timer, ticking down to 0. The way I have implemented, I have called
setInterval(tickExpirations, 1000)
Inside the tickExpirations function, I essentially compare the current system time with an expiration time, take the diff, create a string ("00:02:00"), and update the igTreeGrid using updating feature. Then I call commit. This is being done for all rows that need updates to their timer.
However, this is causing the page to be slow or unresponsive if there are many timers.
Can you please advise if there is an alternate way to update the grid that is not as expensive? I've uploaded screenshot of Google Chrome profiler.
Thanks!
Hello C R,
Thank you for posting in our forum.
Could you provide some additional information like:
How many records and columns does your TreeGrid contain?
How many rows on average are updated each second?
In general what happens when you update a row is that the underlying data record in the data source is updated and the specific row is re-rendered based on the new values.
If you’re updating all of the rows or a big portion of them then the re-rendering of the rows might take some time.
If that’s the case you can enable Virtualization or the Paging feature in order to limit the number of records rendered at a time.
For more details and tips on improving the performance you can refer to:
http://www.igniteui.com/help/igtreegrid-overview#performance
If paging or virtualization are enabled, only the currently visible rows will be rendered. If you update a row that is outside of the current data view no immediate re-rendering will occur. The row will be rendered only once you scroll it into view and will reflect the applied change.
I hope you’ll find this information useful. I’m looking forward to your reply.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://ko.infragistics.com/support
Thanks Maya I will expore the virtualization options.
We have 40 columns defined, but only 20 visible most of the time.
On average we would have about 200-300 rows by end of day, but this issue happens even if we have 20 rows, and 10 of them have timers ticking.
Note that if you modify directly the dataView() the related DOM elements in the grid would not be updated with the changes out of the box.Are you perhaps calling the dataBind() method on each update? That re-renders the whole grid so it would not be recommended to call it too many times on a timer.
Let me know if there’s anything else I can help you with.
Hi Maya,
I found a workaround for the issue. Instead of updating the dataSource and calling commit, I am instead modifying the dataView directly. The dataView returns an array of objects, and I just modify the properties representing the timer. I profiled in Chrome, and see a big performance gain.
I'll keep you updated.
If you could share a small sample that demonstrates the exact scenario or some code snippets of the relevant code I might have some additional suggestions.
Let me know if there’s anything else I can help you with in the meantime.
Thanks for your input, I noticed I was calling commit on every row change. Now I am just calling commit once on every call to tickExpirations. As a result I was able to gain some performance.
Still looking at other ways to squeeze performance.
From the description you’ve provided it sounds like only about 10 records are being updated in a second which should not cause a big delay.
I’ve created a small sample with a similar setup where on each second 10 out of the 20 records get updated, however I didn’t notice any performance issues. I’ve attached it for your reference.
Could you check if perhaps your tickExpirations function is called more times than you expect or if more records are being updated in your scenario?
If you can share a small sample that demonstrates the exact scenario that would also help.