-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi ,
I have 13000 element in combobox , and it is very slow .
First I thought it might be slow in first load only . but it is slow every time user opens or select a item from it. Then i thought of "ondataloading" event similar to "listbox" component. but was not able to implement it .
I thought of to load elements on client scroll but i think it might also be slow.
Can any one help out please. Thanks in advance.
I do not understand why to load 20.000 items at ONE time!!!!. A wise web application guy had said sometimes 'Only load what you can see!'
You must implement a paging logic.
For all data where i know that it's more than 20 items i already make an own dialog.
Here are a few sample pics for a country selection box which immediatelly reduces the data all times i entered a new sign in the textbox. And the creating is very fast because it has only the pagesize data to load on initializing.
pic1 pic2 (all data) pic3 (reduced after input 'er' in textbox)
Hello nsharma,
You could use a Customizable Combobox and use paging as shown in the example below:
http://www.zkoss.org/zkdemo/combobox/customizable_combobox
Furthermore for the paging component you could retrieve only a subset of records at a time, thus the perfomance will be increased exponentially.
Best Regards,
Darksu
Hi even i have the same problem i have more than 20,000 data in combo box and more over i use a grid and it has functionality to add a new line each like containing combo box(20,000 data). adding a new line is very slow,also the page open very slow.
lstCashInvoiceGridItem->Array list ;
lstCashInvoiceGridItem=get 20,000 data in the controller;
and bind it to UI
<combobox autodrop="true" mold="rounded" buttonvisible="true" width="100px" onselect="@command('selectInvoiceGridItems' , type=each)" model="@load(vm.lstCashInvoiceGridItem)" hflex="1" focus="@bind(vm.focusItem)" selecteditem="@bind(each.selectedItems)"> <template name="model" var="item"> <comboitem label="${item.name} : ${item.listType}" <br=""> description=" Description : ${item.salesDesc}" style="@bind(item.subLevel eq 0 ? 'color:black;font-weight:bold;' : item.subLevel eq 1 ? 'text-indent:30px' : item.subLevel eq 2 ? 'text-indent:60px' : item.subLevel eq 3 ? 'text-indent:90px' : 'text-indent:120px') " /> </template> </combobox>
can any one help solving performance problem here.
Totally agree with Stephan. You have to load only needed data. If you don't want paging you may also make the combobox act like the google search box showing available selections while the user is typing characters.
Costas
Hi Terry /costas,
Thank you for your answers.
There is no problem loading 20,000 data with pagination,the problem with list box select mold. i cannot use pagination here it should be a drop down box.
i tried ROD but no effect.(both with list box and combo box as drop downs)
//Array List of objects
lstCashInvoiceGridItem=data.fillQbItemsList();//i will get 20000+ records
When i bind this to combo box in select mold(List box) or rounded in combo box ,it is slow.
<combobox autodrop="true" mold="rounded" buttonvisible="true" width="100px" model="@load(vm.lstCashInvoiceGridItem)"> </combobox>
Can you please post some code how can i achieve the performance.
Thank you
Hello iqbalmufasil,
Would you consider using a bandbox containing a listbox?
You could update the listbox with paging in order to select the name similar to autocomplete.
http://books.zkoss.org/wiki/ZKComponentReference/Input/Bandbox
Best Regards,
Darksu
Asked: 2014-12-15 06:14:52 +0800
Seen: 70 times
Last updated: Aug 17 '15