poor performance on TwinColSelect with large set of items

Hi there, I encountered performance issue on TwinColSelect with more than 4000 items.
Here is a short piece of test code to demonstrate the problem.

First put some items to right side select box, then try to click on some items in right side select box.
The reflection of the selection in right side box will take one or two second.
The left side select box doesn’t have this problem. It looks like the problem is coming from client side.

I tested with Vaadin 6.4.7 on Chrome, Firefox, Opera, Safari and IE7. Surprisingly, IE7 responds faster than other browsers despite longer initial web page loading time.


public class VtestApplication extends Application {
    private static final long serialVersionUID = -2175845887990894815L;
    @Override
	public void init() {
		Window mainWindow = new Window("Vtest Application");
		TwinColSelect s = new TwinColSelect();
		for(int i = 0; i< 5000; i++)
		{
		    s.addItem(""+i);
		}
		mainWindow.addComponent(s);

        setMainWindow(mainWindow);
	}
}

Hi,

I guess there is not that much we can do to make those native list select elements to scale better in browsers. For that many rows I’d suggest the following:

Compose a TwinColSelect clone on the server side using WrappedField (see Directory and CustomField add-on), layouts, two tables and and two buttons. The solution should scale very well with even much larger row counts, because of the lazy loading tables. Also you could implement drag and drop support between available options and the chosen ones, so the usability might also be better.

Then next step would be to share it in the Directory with an open source license and win an iPad from our competition :slight_smile:

cheers,
matti

Hi,

I don’t have a solution for the performance issue for you right away or any reason why it happens. I just have to ask this out of curiosity: What is the use case where you want to show more than 4000 items in a TwinColSelect and how does a user use that application without getting lost?

Hi Artur, I am working in semiconductor manufacturing industry. And thank you guys providing this great framework, we are using Vaadin intensively in our fab.

There is one web application I developed for reviewing electrical test result. I use TwinColSelect for user to select some parameters from a big list. Along with the TwinColSelect, there are a TextField and few Buttons to help user to filter the list.
It works just fine, until we got a new type of test result from a vendor that contains more than 4k parameters.

I will try to implement what Matti suggested.

Best Regards,
Huo Chunpeng
GLOBALFOUNDRIES Singapore

Thanks, Matti. Instead of using the CustomField, I replaced the TwinColSelect with a CustomComponent wrapping 2 tables.