Cascading combo boxes in a Datatable

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:


  • edited March 2015


    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:

            //getting mode value
            var modeId = this.getItem(id.row).modeId;
            //getting collection of dependent options 
            var options = this.getColumnConfig("selTypeId").collection;
            //clearing collection
            //parsing new options to the collection
            if(modeId == 1)
            else if(modeId == 2)
            else if(modeId == 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,


  • Hi. In your example there is a bug.
    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!

  • edited November 2015


    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:

          //filter the cities list to show the necessary values
            var country = this.getItem(id.row).country;
            var options = this.getColumnConfig("city").collection;
                return == country;

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

  • It is work! Thx!

  • 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?

  • @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:

  • 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.

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

  • 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.

Sign In or Register to comment.