Combo, richselect and multiselect controls can be highly customized because they are comprised of the following components:
The combination is called suggest list that can be accessed from the control configuration, which allows for setting a number of custom options.
Suggest list is described in detail separately.
All the functionality described below is shown in this sample:
Related sample: Advanced options for select controls ('combo' and 'richselect')
Option data may contain any properies instead of/in addition to default id-value pairs (still, id attribute is mandatory).
Options attribute is used in another way - it houses list configuration, dataset and template to render this dataset properly:
view:"combo", value:2, options:{
template:"#name#",
data:[
{ id:1, name:"Banana" },
{ id:2, name:"Papai" },
{ id:3, name:"Apple" }
]
The same can be used for default options, moreover, extra text or HTML can be added:
view:"combo", value:2, options:{
template:"Extra #value#",
data:[
{ id:1, value:"Banana" },
{ id:2, value:"Papai" },
{ id:3, value:"Apple"}
]
Options data may as well contain multi-line text with html tags. In this case, the height of a parent component (here:toolbar) should be increased:
view:"richselect",
options:[
{ id:1, value:"Here can be some long multi line content <ul><li>item1 <li> item 2</ul>"},
{ id:2, value:"Papai" }
]
When a custom template is used for a combo box, filtering should be redefined as well, since by default combo popup is filtered by value property.
Options attribute houses configuration of a suggest list in use while its body attribute houses a popup list:
view:"combo", value:1, options:{
filter:function(item, value){
if(item.name.toString().toLowerCase().indexOf(value.toLowerCase())===0)
return true;
return false;
},
body:{
template:"#name#",
data:[
{ id:1, name:"Banana"},
{ id:2, name:"Papai"}
]
}
}
The easiest way to load options from server is to set a link to the necessary script right in the options attribute:
view:"richselect", value:"2", options: "server/data.json"
For extra customization, see below how to define options dynamically.
The controls feature special Api to work with their parts:
var popup = richselect.getPopup(); //popup object
var list = richselect.getPopup().getList(); // list object
Options can be redefined like any other property:
combo.define("options", [ {id:1, value:"Apple"}, {id:2, value:"Banana"} ]);
combo.refresh();
Options are parsed to popup list under Webix data loading rules:
var list = $$("combo1").getPopup().getList();
var new_options = [
{ id:1, name:"Germany"},
{ id:2, name:"Great Britain"}
];
list.clearAll();
list.parse(new_options);
Options can be loaded by Ajax as well:
webix.ajax().get("server/data.php", function(text, data){
var options = data.json();
var list = $$("combo1").getPopup().getList();
list.clearAll();
list.parse(new_options);
});
Options are loaded to popup list under Webix data loading rules:
var list = $$("richselect2").getPopup().getList();
list.clearAll();
list.load("server/data.json");
Options list can be synchronized with either other component data or Datacollection data:
$$("my_combo").getPopup().getList().sync($$("list1")); //pushes this data into combo popup
Related sample: Get Popup View
Data syncing is described in the related article.
You can attach functions to list under the common Events Handling pattern:
view:"combo", value:1, options:{
body:{
data:[
{ id:1, value:"Banana"},
{ id:2, value:"Papai"},
{ id:3, value:"Apple"}
],
on:{
'onItemClick':function(id){
webix.message("Clicked: "+this.getItem(id).value);
}
}
}
Still, to catch changes in the combo/richselect, it's better to use the related onChange event.
The dimensions of a popup list as well as its position in relation to a master control can be customized via suggest/options configuration object.
view:"combo", options:{
fitMaster:false,
body:{
yCount:7
}
}
Read more about it in the corresponding documentation article.
Back to top