EasyUI Forum
March 28, 2024, 08:10:51 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Groups in combobox  (Read 23927 times)
carcaret
Newbie
*
Posts: 5


View Profile Email
« 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!
Logged
carcaret
Newbie
*
Posts: 5


View Profile Email
« Reply #1 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?
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #2 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
});
});
Logged
carcaret
Newbie
*
Posts: 5


View Profile Email
« Reply #3 on: May 13, 2013, 03:19:00 AM »

Thanks a lot, worked perfectly.
Logged
andrux
Newbie
*
Posts: 26


View Profile
« Reply #4 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
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #5 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>
Logged
andrux
Newbie
*
Posts: 26


View Profile
« Reply #6 on: June 15, 2013, 06:28:01 PM »

Thanks, I'll give it a try
Logged
andrux
Newbie
*
Posts: 26


View Profile
« Reply #7 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!
Logged
bluesand4
Newbie
*
Posts: 5


View Profile
« Reply #8 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).
« Last Edit: June 27, 2013, 12:56:21 PM by bluesand4 » Logged
bluesand4
Newbie
*
Posts: 5


View Profile
« Reply #9 on: July 01, 2013, 10:42:04 PM »

any help regarding my question?
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #10 on: July 02, 2013, 12:42:24 AM »

To use the group combobox, the 'valueField', 'textField' and 'groupField' should be assigned.
Logged
aswzen
Sr. Member
****
Posts: 287


Indonesian

aswzen
View Profile WWW Email
« Reply #11 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>
Logged

Regards,
Sigit

- Indonesian jEasyUI Facebook page : https://www.facebook.com/groups/jeasyuiid/
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!