how to change second filter values depending on the selected value in first filter


I am trying to filter the datatable values based on the filter as per the snippet :
First I want to select value 2018 or 2017 from combo 'year'.
If I select 2017, then my next filter 'filterName' should only show FilterNames having '17.' in it, i.e this filter should only have values (FilterName 17.20, FilterName 17.80, FilterName 17.30). Same applicable with 2018.

Please help me with the same.



  • Hello Team,
    For the same above question, I have another similar snippet :
    Here, both the filters are combos and shown on toolbar.
    However, I am unable to show the filterNames as options for second combo 'filterNameCombo'.

    So please help me with above similar scenarios of filters.
    Anyone easier from above two is also fine.

  • edited July 2018

    Hello @JD1 ,

    You can use the onChange event to define when the value of the control is changed. And add substr() method to remove two characters (20) from the string

               return obj.filterName.indexOf(newv.substr(2,2)) !== -1;

    Please check the sample:

  • Thanks, Nastja.
    But this is not helping me to solve the issue completely.
    As per your snippet, table values are getting filtered as per combo.
    However I want to filter the values of second filter as per first combo i.e(if I select 2018 in first combo, then I want FilterName 18.10, FilterName 18.50 & FilterName 18.40 in second combo) So that when I select any of these 3 values from secondcombo(suppose FilterName 18.40), my table should get filtered and should show the rows having FilterName 18.40
    Hope I have cleared the doubt.
    You can go with the first question where I have mentioned the same thing.

  • Please check

    If you know the possible options values and their relations, the task is trivial, as you can filter options of combo from onChange of the master combo.

    If options are not known and must be taken from the datatable, you need a bit more complicated logic as here -
    The code of onchange handler collects related data from the datatable and fills the dependent combo.

  • Thank you so much, Maksim.
    Your snippet helped me a lot and finally I have got it as per below snippet:

    However, can we have default value set for combo1-'year' as '2018'. And also default value set for combo2-'filterNameCombo' as highest i.e. 'FilterName 18.50' with respective to my snippet? And can we filter the table as per these default values onload? So that as soon as I load my application, it will show results for '2018->FilterName 18.50' by default?

  • Please check the updated snippet

    Related parts



  • Thank you once again, Maksim.

    Further to this, I am trying to hide one column and want to add new column as soon as I do select any filtername.
    However, once I select 'FilterName 17.20', then one column is getting added as 'test', but as soon as I select another 'FilterName 17.80' is again adding column 'test'.

    As per my development requirement, I need to add column after selecting 'FilterName 17.20'...but as soon as I select another one i.e 'FilterName 17.80', it should add the new column but at the same time it should not show column added by 'FilterName 17.20'. So that the filter will work more precisely.

    Please refer the snippet :

  • You can remove last column before adding new one

                     onAfterSelect: function(){
                        var columns = webix.toArray($$("table1").config.columns);
                        if (this._last_added_column){
                        var id = this._last_added_column = "index"+webix.uid();
                        columns.insertAt({id ,header:"test", width:40},4);

    Also, probably it will be better to use onChange event of combo instead of onAfterSelect, as the last one occurs many times during value selection

  • JD1JD1
    edited January 30

    Need help to deal with filter for :

  • Hello,
    With few more changes, I am trying to filter the datatable. However, not able to get the required result.

    Please refer updated snippet :

    On change of firstFilter, I don't want any column insert.
    On change of secondFilter, don't want to keep columns inserted by previous-filter-value-selection.

  • Just use the separate structure for the original order of columns
    Check the updated snippet

  • Thank you so much Maksim. Webix team is really helpful all the time :smiley:

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!