How to implement server side multicombo?

Webix JS
#1

Hi all,
how is it possible to to implement server side multicombo?

thanks

#2

Hello @codejoin ,
Just add:

  view:"multicombo",
  label:"Film",
  suggest: {
    body:{
      url:"some.php",
    }

Please take a look at the snippet:
https://snippet.webix.com/bwewyqju

#3

Thank you but I need to load by chucks, this way it loads all at once, I have kilobyte of data

#4

Hello @codejoin ,
I would suggest you use a custom proxy object, so you’ll be able to add the needed parameters depending on some condition.
However, please note that load method from the proxy acts instead of default data loading pattern, so you will need to gather parameters into the needed format (string url) by hand.
Considering the custom count, you can add it with something like:

if ( params === null ) // default initial request
params = { count:10 }
else
params.count = 10;
#5

Thanks, too complicated to me

I surfed the forum and built the following view.

It works as I expected, load 50 items at a time from the server if user swipe the list vertically

I hope I can make it as a proto but Webix lacks of documentation about that


webix.ui({
 view: "multicombo",
 id: "x_brand_items",
 name: "x_brand_items",
 label: "Brand",
 options: {
  view: "checksuggest",
  template: "#value#",
  body: {
   view: "datatable",
   css: "webix_data_border webix_header_border",
   yCount: 10,
   scroll: 'xy',
   header: false,
   autoheight: false,
   autowidth: false,
   width: 500,
   url: loadcgi(__app__.cookie) + '&__J=' + (__version__.type == 2 ? 'xxxx' : 'yyyy') + '&sort[value]=asc',
   dataFeed: function (str) {
    return this.load(this.config.url + "&filter[ffff]=" + str);
   },
   sel: function (id) {
    let curval = $$('x_brand_items').getValue();
    var arr = curval.split(",").filter(function (el) {
     return el.length != 0
    })
    var index = arr.indexOf(id.toString());
    if (index !== -1) {
     arr.splice(index, 1);
    } else {
     arr = arr.filter(el => el != id)
     arr.push(id)
    }
    $$("x_brand_items").setValue(arr.join(","));
   },
   on: {
    onBeforeSelect(i) {
     this.config.sel(i.id)
     return false
    },
    onCheck(id) {
     this.config.sel(id)
    }
   },
   select: true,
   columns: [{
    id: "$checked",
    template: "{common.checkbox()}",
    width: 50
   }, {
    id: "value",
    width: 300
   }],
  }
 }
});