Cascading combo boxes in a Datatable

Webix JS
#1

How do I dynamic load options in a combo inside the Datable for the selected row?

Here is what I want to do: When I choose “boats” in the first combo I want the second combo to update. If I choose another type on the second row I want the combo to follow.

Here is an simple example as snippet:
http://webix.com/snippet/66d8e2a1

#2

Hi,

You can update the options for the second combo, but note that it is done for the whole column (and all its rows alltogether).

So it makes sense to check the selected option in the first column when onBeforeEditStart for the second column fires and then parse the needed set of dependent options into it:

"onBeforeEditStart":function(id){
      if(id.column=="selTypeId"){
        //getting mode value
      	var modeId = this.getItem(id.row).modeId;
        
        //getting collection of dependent options 
        var options = this.getColumnConfig("selTypeId").collection;
      	//clearing collection
        options.clearAll();
        
        //parsing new options to the collection
        if(modeId == 1)
          options.parse(dataCars); 
        else if(modeId == 2)
          options.parse(dataBoats);
        else if(modeId == 3)
          options.parse(dataAirplanes);
      }
    }

http://webix.com/snippet/b9277548

#3

Thanks Helga,

OK this will be a problem with the all culoms in the row changes. I have to figure out another way to solve it, probably with an pop-up window with editors and then just show the result in the dataview,

/Ken

#4

Hi. In your example there is a bug. http://joxi.ru/12MjnW3hv83wAJ
When I start to edit cell in the second column - all other cells changed their display values (because they have integer values and on beforeEdit we have change options for full column). How I can dynamically change options for one cell? I have country column and city column. In each row I have differents countries - so I need different options for each city cell. And when I change country - I want get new cities options by ajax. It is possible? Thanks!

Datatable column suggest with extra combo
#5

Hi,

Right you are, that was not the best solution. However, you cannot define the options just for one cell, they can only be set for the whole column.

I suggest to solve this task by filtering the options of the dependent combo box before opening the editor:

"onBeforeEditStart":function(id){
      //filter the cities list to show the necessary values
      if(id.column=="city"){
      	var country = this.getItem(id.row).country;

        var options = this.getColumnConfig("city").collection;
        options.filter(function(obj){
        	return obj.country == country;
        });
      }
    }

Additionally, you can reset the city, if there isn’t the one in the chosen country.

http://webix.com/snippet/4ae0aed0

#6

It is work! Thx!

#7

What about options table without “value” field? or the table has more then two filelds. How to fill selectbox with options from that table:
var keydiscs =
[
{ “id”:“1”, “serialnumber”:“disk2015-07-08”, “key”:“1”, “keytype”:“1”, “creator”:“1”, “shredder”:“2”},
{ “id”:“2”, “serialnumber”:“disk2015-07-08”, “key”:“1”, “keytype”:“1”, “creator”:“1”, “shredder”:“2”},
{ “id”:“3”, “serialnumber”:“disk2015-07-08”, “key”:“1”, “keytype”:“1”, “creator”:“1”, “shredder”:“2”},
{ “id”:“4”, “serialnumber”:“disk2015-07-08”, “key”:“1”, “keytype”:“1”, “creator”:“1”, “shredder”:“2”},
{ “id”:“5”, “serialnumber”:“disk2015-07-08”, “key”:“1”, “keytype”:“1”, “creator”:“1”, “shredder”:“2”},
{ “id”:“6”, “serialnumber”:“disk2015-07-08”, “key”:“1”, “keytype”:“1”, “creator”:“1”, “shredder”:“2”},
{ “id”:“7”, “serialnumber”:“disk2015-07-08”, “key”:“1”, “keytype”:“1”, “creator”:“1”, “shredder”:“2”},
{ “id”:“7”, “serialnumber”:“disk2015-07-08”, “key”:“1”, “keytype”:“1”, “creator”:“1”, “shredder”:“2”},
{ “id”:“9”, “serialnumber”:“disk2015-07-08”, “key”:“1”, “keytype”:“1”, “creator”:“1”, “shredder”:“2”},
{“id”:“10”, “serialnumber”:“disk2015-07-08”, “key”:“1”, “keytype”:“1”, “creator”:“1”, “shredder”:“2”}
];
How to output any field from this table direct to selectbox in datatable?

#8

@bambus1980 by default, select/richselect/combo expects an array with the key attributes id and value. As for the html-based select, there’s nothing to do about it. But you can customize the data type for combo/richselect controls and apply it within the suggest’s body. Check the snippet:

http://webix.com/snippet/5e51cbe3

#9

thank you, it is solve my task, but, I think it will more slowly then usually.
And some questions: why using data:webix.copy(keydiscs) instead of data:keydiscs? both work equally.

#10

are there any methods to rename any field of json-data? as sample, renaming field SERIALNUMBER into VALUE?

#11

why using data:webix.copy(keydiscs) instead of data:keydiscs?

The usage of the same dataset in different widgets/controls can cause a data collision. webix.copy will prevent this.

are there any methods to rename any field of json-data?

Webix doesn’t have any built-in method, but as far as I know, it can be done via simple JS array operation.