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.
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.
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
Hello,
With few more changes, I am trying to filter the datatable. However, not able to get the required result.
Please refer updated snippet : https://snippet.webix.com/9rbt7sec
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 