refer this image:
the select list on left with 2 items (CB1, CB2) is dynamically generated.
the grid on right has dynamic repeat boxes with 2 items shown in each box from the database.
what we want to do is, on selection of CB1 from the list, the GRID on right side should filter with items which fall under CB1.
how do we set a dynamic action to run a query on selection of the one item from the list which will effect the view on the right side grid.
please help.
Hi @nshkrsh,
Thatâs easy to achieve using 2 server actions with a query in each of them.
On your page:
On the left column, there is no repeat element. It is a regular 'select' html element.
The click option needs to be set for each "option" item inside the 'select' element. But with the dynamic event click event, actual selection click event is not happenning.
So, if I click it two-three times, it eventually works, but that's of no use.
Also, there is no way to set the first item as selected for the 'select' element in UI.
So you are using a dropdown/select menu which has static values, is that right?
no, the select element has dynamic values - which is binded using server connect DB query - and is showing correct values on page load.
Then you donât need the variable on the page. Just set the select value as a value for the second server action filter.
The logic is the same as here Filtering Database Query with a Text Input but instead of using a text field you bind the select value for the filter and in the query builder you use âequalâ instead of âcontainsâ âŚ
Yes, the variable part I figured out. But the issue here is that on selecting an âoptionâ item inside the âselectâ element, the click event is not fired.
If I click the already selected option again, then the event is fired and data is generated.
This is because the event which I need to bind with is âselected/changeâ event and not the âclickâ event.
I tried using the âchangeâ event in dynamic attribute, but its broken too.
You donât need to apply any event on the select. Please remove any if added. You do not need the variable on the page as well.
Please check the link i sent you - it shows how to filter a query with a text field but it is the same except you are using a select and the condition should be âequalâ instead of âcontainsâ
Got it. No need for dynamic events.
Its working now.
One more issue left. On page load, there is no item selected by default, so the right side is blank. How to set first item as selected.
Please provide your select field code here.
<select size="16" id="listCabinet" name="listCabinet" style="width:90%" dmx-bind:options="sc_cabinets.data.q_cabinets" optiontext="Cabinet" optionvalue="Cabinet" data-msg-required=""></select>@Teodor - requesting for an update please.
In the selected value in the UI - select your server connect > data > query > binding which should generate an expression like: serverconnect1.data.query1[0].category which is the first value in the query.
If you remove the âsizeâ attribute from the select then the first record will be automatically selected.
wouldn't want to do this coz we want a select list not a dropdown.
this works just fine. thank you.
I am not saying you should remove it, just explaining how it works for a dropdown 