Is there a way to re-render (update) the contents of a smart-select (without closing/re-opening) while it is open?
Reason:
- I have a list of items with checkboxes.
- If I click a button (or whatever) inside the smart-select, I want to change the states of ALL checkboxes at once, without closing the smart-select.
There was an initSmartSelects
method in F7v1, but that’s missing now.
How would I change all states from within the smart-select?
1 Like
You mean inside of smart select page or other container? You can just toggle all checkboxes. When smart select is opened it has $containerEl
Dom7 element with the ss page or popup. So you can just toggle all checkboxes like:
smartSelect.$containerEl.find('input').prop('checked', true).trigger('change');
Last .trigger('change')
required to trigger change event so SS understand it need to emit events further, e.g. to Vue component
hi @nolimits4web
I meant from inside the smart-select container (while it’s visible on screen).
I tried it as you showed, but ran into an stack-overflow when triggering the update.
This is mainly because the smart-selects values are based on a reactive property-array.
If I exclude the .trigger('change')
, it works, but the values are not recognized (as you said).
That’s why I thought, there might be an API for this…
So right now I’m doing it like this (which works fine):
mySmartSelect.$containerEl.find('input').prop('checked', true);
mySmartSelect.setValue(newValuesArray);
this.$emit('changed', mySmartSelect.getValue());
1 Like