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

Hello,

I am trying to filter the datatable values based on the filter as per the snippet :
https://snippet.webix.com/ir4n83yr
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.

Tagged:

Comments

  • Hello Team,
    For the same above question, I have another similar snippet :
    https://snippet.webix.com/2lgknnym
    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

    on:{
        onChange:function(newv){
            $$("table1").filter(function(obj){
               return obj.filterName.indexOf(newv.substr(2,2)) !== -1;
            });
        }
    }
    

    Please check the sample: https://snippet.webix.com/r70xngx2

  • 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.
    https://snippet.webix.com/ir4n83yr

  • Please check
    https://blog.webix.com/cascading-comboboxes-in-webix/

    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 - https://snippet.webix.com/qv69r96p
    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:
    https://snippet.webix.com/hi9dqrph

    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

    https://snippet.webix.com/xxx7r2ih

    Related parts

    list.parse(options);
    $$("filterNameCombo").setValue(list.getFirstId());
    

    and

           "data->onStoreLoad":function(){
             $$("year").setValue(2018)
           }
    
  • 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'..it 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 : https://snippet.webix.com/c9txgi2o

  • You can remove last column before adding new one

    https://snippet.webix.com/mbr51856

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

    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

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!