Print Page - Slow rendering of combobox with many rows

Title: Slow rendering of combobox with many rows
Post by: Stefan B. on March 23, 2015, 02:52:40 AM

We use combobox to show a list of many entrys (17.000)
When click on the combobox arrow it takes 3-5 Seconds to show the list. Also every time, when klick to show the list, its takes the same time to show the list.

Questions:
1) Is there a solution to do the rendering faster?
2) Or is there a way to add first 100 entrys to the list, show the list and then add the rest of the data?

Here is my exsample: http://jsfiddle.net/5kh84uo4/2/
Test with Chrome: Performance sometimes OK
Test with Firefox: Very slow and have problems with script runtimes
Test with IE: Very slow

Title: Re: Slow rendering of combobox with many rows
Post by: jarry on March 24, 2015, 12:31:13 AM

There is no virtual scrolling feature in the combobox component. You can try to use the combogrid with virtual scroll view to populate your data rows.

Title: Re: Slow rendering of combobox with many rows
Post by: Stefan B. on March 24, 2015, 01:56:59 AM

I test the combogrid with virtual scroll view to show the data.
It works fine with the virtual scroll view.

1) But now i cannot find a exsample how to filter the rows, when the mode is set to 'local'.
* That means we load the complete datasets 20.000 and the combogrid with the virtual scoll shows only 50 Datasets.
* Now we typ a name in the combobox and now, how can we filter the comlete data to show only the values start with the text?

2) How can I use the combogrid as editor on datagrid?

Title: Re: Slow rendering of combobox with many rows
Post by: thecyberzone on March 24, 2015, 08:47:22 AM

If you want to render a Combogrid with 1000+ rows, I can suggest you just do the following :
1. Put the mode as 'remote' not 'local'
2. Now get the remote JSON formatted data by filtering the selection based on your keypressed character as follows:

Code:

<?php
include 'dbconfig.php';

[color=red]$q = isset($_POST['q']) ? strval($_POST['q']) : '';

$sql = "select * from section where section like '%$q%' ORDER BY deptcode, secode2";[/color]

$rs = mysql_query($sql) or die('not found!');
if ($rs){
	$items = array();
	while($row = mysql_fetch_object($rs)){
		array_push($items, $row);
	}
	$result["rows"] = $items;
	echo json_encode($result);
} else {
	echo json_encode(array('msg'=>'No section allocated with this user!'));
}
?>

See the red colored code for filtering remote rows.

And if you want to use ComboGrid as datagrid cell editor, this is same as you do in case of combobox, nothing special, same way you can define the editor as ComboGrid.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Stefan B. on March 23, 2015, 02:52:40 AM