Documentation

Advanced Configuration of Popup Selectors

Combo, richselect and multiselect controls can be highly customized because they are comprised of the following components:

  • Webix list from which templating and loading rules, item sizes and look-and-feel are taken;
  • Webix popup from which popup size and behaviour are taken.

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')

Changing 'options' structure and template

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"  }
]

Related sample:  Select Boxes

Changing Filtering Pattern (combo only)

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"}
        ]
    }
}

Serverside Options

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.

Getting Popup and List objects

The controls feature special Api to work with their parts:

var popup = richselect.getPopup(); //popup object
var list = richselect.getPopup().getList(); // list object

Combo box Api reference

Richselect Api reference

Defining Options Dynamically

Defining options data through the control:

Options can be redefined like any other property:

combo.define("options", [ {id:1, value:"Apple"}, {id:2, value:"Banana"} ]);
combo.refresh();

Parsing options into a popup list

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);
});

Loading options into a popup list

Options are loaded to popup list under Webix data loading rules:

var list = $$("richselect2").getPopup().getList();
list.clearAll();
list.load("server/data.json");

Syncing options with a DataCollection

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.

Attaching events to a popup list

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.

Sizing/positioning of a popup list

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