Print Page - Groups in combobox

Title: Groups in combobox
Post by: carcaret on May 10, 2013, 03:06:12 AM

Hi!

I was trying to accomplish something with combobox but not sure how to do it.

Let's say I have a combobox with 12 options, and let's say those options are divided into 3 groups, so 4 options per group.

What I'd like to do is prior to the first option of each group, add the name of the group, and make it not selectable, so it'd look like this:

Group1 (not selectable)
Option11
Option12
Option13
Option14
Group2 (not selectable)
Option21
Option22
Option23
Option24
Group3 (not selectable)
Option31
Option32
Option33
Option34

I've tried to play with 'onLoadSuccess' event and the 'formatter', but not sure how to do it correctly, any suggestion?

Thanks!

Title: Re: Groups in combobox
Post by: carcaret on May 10, 2013, 05:02:36 AM

Forgot to say that I'm retrieving the options via AJAX, and then I wanted to add de group names via javascript. Is that possible?

Title: Re: Groups in combobox
Post by: stworthy on May 10, 2013, 08:29:29 AM

Here is the example shows how to achieve the group item in combobox.

Code:

var data = [
	{group:'Group1',items:[
		{value:'v11',text:'Option11'},
		{value:'v12',text:'Option12'},
		{value:'v13',text:'Option13'},
		{value:'v14',text:'Option14'}
	]},
	{group:'Group2',items:[
		{value:'v21',text:'Option21'},
		{value:'v22',text:'Option22'},
		{value:'v23',text:'Option23'},
		{value:'v24',text:'Option24'}
	]}
];
function loadFilter(data){
	var dd = [];
	for(var i=0; i<data.length; i++){
		var group = data[i].group;
		dd.push({
			group:group,
			text:group
		});
		dd = dd.concat(data[i].items);
	}
	return dd;
}
function onLoadSuccess(){
	var groupItems = $(this).combobox('panel').find('div.combobox-item:has(span.combobox-group-text)');
	groupItems.removeClass('combobox-item');
}
function formatter(row){
	if (row.group){
		return '<span class="combobox-group-text" style="font-weight:bold">'+row.group+'</span>';
	} else {
		return '<span style="padding-left:10px">'+row.text+'</span>';
	}
}

$(function(){
	$('#cc').combobox({
		data:data,
		loadFilter:loadFilter,
		formatter:formatter,
		onLoadSuccess:onLoadSuccess
	});
});

Title: Re: Groups in combobox
Post by: carcaret on May 13, 2013, 03:19:00 AM

Thanks a lot, worked perfectly.

Title: Re: Groups in combobox
Post by: andrux on June 15, 2013, 11:40:05 AM

Great, this thread helped me get the group feature working!

I would like to ask something about this, though, how do you add also items with no group?

I tried a couple variations including the one below but they don't work, I get a Cannot read property 'value' of undefined error.

Code:

var data = [
	{group:'Group1',items:[
		{value:'v11',text:'Option11'},
		{value:'v12',text:'Option12'},
	]},
	{group:'Group2',items:[
		{value:'v21',text:'Option21'},
	]},
	{value:'gl',text:'Groupless'},
];

Thanks for any help

Title: Re: Groups in combobox
Post by: stworthy on June 15, 2013, 06:26:41 PM

The group combobox will be supported in version 1.3.4. The updated combobox plugin can be downloaded from http://www.jeasyui.com/easyui/plugins/jquery.combobox.js. Please refer to this example http://www.jeasyui.com/demo/main/index.php?plugin=ComboBox&theme=default&dir=ltr&pitem=Group%20ComboBox or the code below.

Code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/combobox.css">
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/plugins/jquery.combobox.js"></script>
	<script>
		var data = [{
			"value":"f20",
			"text":"Firefox 2.0 or higher",
			"group":"Firefox"
		},{
			"value":"f15",
			"text":"Firefox 1.5.x",
			"group":"Firefox"
		},{
			"value":"f10",
			"text":"Firefox 1.0.x",
			"group":"Firefox"
		},{
			"value":"ie7",
			"text":"Microsoft Internet Explorer 7.0 or higher",
			"group":"Microsoft Internet Explorer"
		},{
			"value":"ie6",
			"text":"Microsoft Internet Explorer 6.x",
			"group":"Microsoft Internet Explorer"
		},{
			"value":"ie5",
			"text":"Microsoft Internet Explorer 5.x",
			"group":"Microsoft Internet Explorer"
		},{
			"value":"ie4",
			"text":"Microsoft Internet Explorer 4.x",
			"group":"Microsoft Internet Explorer"
		},{
			"value":"op9",
			"text":"Opera 9.0 or higher",
			"group":"Opera"
		},{
			"value":"op8",
			"text":"Opera 8.x",
			"group":"Opera"
		},{
			"value":"op7",
			"text":"Opera 7.x",
			"group":"Opera"
		},{
			"value":"Safari",
			"text":"Safari"
		},{
			"value":"Other",
			"text":"Other"
		}];
	</script>
</head>
<body>
    <input class="easyui-combobox" name="browser" style="width:280px;" data-options="  
                data:data,  
                valueField:'value',  
                textField:'text',  
                groupField:'group'  
            ">  

</body>
</html>

Title: Re: Groups in combobox
Post by: andrux on June 15, 2013, 06:28:01 PM

Thanks, I'll give it a try

Title: Re: Groups in combobox
Post by: andrux on June 16, 2013, 07:40:08 PM

Thank you, stworthy, it worked! All I needed was to use the combobox.js file you suggested!

Title: Re: Groups in combobox
Post by: bluesand4 on June 27, 2013, 10:34:47 AM

Hi,
Thanks for the example which helped me a lot.

I would like to know how I can set the valueField (i.e. what will be displayed in the combobox after the user selects an option) to be a mix of the group name & the item name (e.g. Grp1-item1).

Title: Re: Groups in combobox
Post by: bluesand4 on July 01, 2013, 10:42:04 PM

any help regarding my question?

Title: Re: Groups in combobox
Post by: stworthy on July 02, 2013, 12:42:24 AM

To use the group combobox, the 'valueField', 'textField' and 'groupField' should be assigned.

Title: Re: Groups in combobox
Post by: aswzen on January 13, 2017, 08:58:58 AM

How to achieve it thru html ? thank you..

[UPDATE] sorry got it

<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: carcaret on May 10, 2013, 03:06:12 AM