We are trying to find a solution for displaying 10k checkboxes in the Umbraco back office that rendered with ng-repeat.
We've realized that angularJs are not able to perform more than 2500 items in ng-repeat with data-binding.
I'm thinking about rendering parts of the array during the user scrolls the page, or it will be too much for ng-repeat as well?
Are these going to be toggled by editors? Can't imagine anyone wanting to scroll through a list of 10.000 items to find the ones they want to toggle - regardless of them being lazy-loaded while scrolling, or loaded at once.
Is there no way you can categorize them, so the ones you do end up showing are the ones the editor would need to toggle?
A regular form with 10.000 checkboxes wouldn't necessarily feel sluggish — just very long, but I can only imagine that any kind of JS-powered list would be much worse... typically at least double the number of attributes in the markup alone, and eventhandlers all over...
(Sorry if this feels like a Stack Overflow knee-jerk reaction but I'm utterly fascinated by what makes 10.000 checkboxes necessary...)
Thanks for your input.
I totally agree with you that rendering thousands of checkboxes is a bad idea in any case, I can't imagine how editors will use this list.
But this is what the client asking for and change the design isn't something he would like to do.
An interesting fact that this control was built with asp web forms and it worked much better than a new one with AngularJS :)
Like Nathan says if rendering a list using ng-repeat with many items, so should use a paged result. In fact more than 500 - 1000 items are causing memory issues in the browser, because it is rendering many DOM elements.
Pagination and search/filter definitely the best idea, but the requirement is to build a list of 10k+ checkboxes on the page in 3 levels lists and nesting.
Of course, it's impossible to use for humans brains, but I have to make the browser do not freeze when it's loaded.
Thanks, it's a great idea; I've installed Angular Material virtual repeat, which works fast enough. This approach's disadvantage is that you have to change CSS to make it look as you want.
WebForms isn't an option at this point, sadly or luckily :) it would be interesting to build something in WebForms :)
Backoffice ng-repeat with thousands of items
Hi Community,
We are trying to find a solution for displaying 10k checkboxes in the Umbraco back office that rendered with ng-repeat. We've realized that angularJs are not able to perform more than 2500 items in ng-repeat with data-binding.
I'm thinking about rendering parts of the array during the user scrolls the page, or it will be too much for ng-repeat as well?
Any recommendations?
Thanks,
Alex
Hi Alex,
Are these going to be toggled by editors? Can't imagine anyone wanting to scroll through a list of 10.000 items to find the ones they want to toggle - regardless of them being lazy-loaded while scrolling, or loaded at once.
Is there no way you can categorize them, so the ones you do end up showing are the ones the editor would need to toggle?
A regular form with 10.000 checkboxes wouldn't necessarily feel sluggish — just very long, but I can only imagine that any kind of JS-powered list would be much worse... typically at least double the number of attributes in the markup alone, and eventhandlers all over...
(Sorry if this feels like a Stack Overflow knee-jerk reaction but I'm utterly fascinated by what makes 10.000 checkboxes necessary...)
/Chriztian
Hi Chriztian
Thanks for your input. I totally agree with you that rendering thousands of checkboxes is a bad idea in any case, I can't imagine how editors will use this list.
But this is what the client asking for and change the design isn't something he would like to do.
An interesting fact that this control was built with asp web forms and it worked much better than a new one with AngularJS :)
I'm thinking now about Virtual scroll as a way to go - https://github.com/stackfull/angular-virtual-scroll
Thanks, Alex
Another option - https://github.com/angular-ui/ui-scroll
Pagination and search/filter will be your friends. There's no need to display 10k items at once - human brain can manage lists of 6-8 items at time.
Like Nathan says if rendering a list using
ng-repeatwith many items, so should use a paged result. In fact more than 500 - 1000 items are causing memory issues in the browser, because it is rendering many DOM elements.I would render the list as a paged result - you can using
PagedResult<T>from Umbraco core and contruct a model with the neccessary properties. https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Core/Models/PagedResultOfT.csFurthermore you can use the
<umb-pagination>component or use infinite loading as the user scroll or via a "load more" button.Pagination and search/filter definitely the best idea, but the requirement is to build a list of 10k+ checkboxes on the page in 3 levels lists and nesting.
Of course, it's impossible to use for humans brains, but I have to make the browser do not freeze when it's loaded.
Hi Alex.
While i dont think that you can make AngularJs repeat over 500 items very fast. I still think that Angular Material would be the way to go -> https://material.angularjs.org/latest/demo/virtualRepeat
Another thing you could do, is to make a UserControl and render it with asp web forms. I know its an old way, but maybe it could save you.
Hi,
Thanks, it's a great idea; I've installed Angular Material virtual repeat, which works fast enough. This approach's disadvantage is that you have to change CSS to make it look as you want.
WebForms isn't an option at this point, sadly or luckily :) it would be interesting to build something in WebForms :)
Thanks, Alex
is working on a reply...