How to work Select Dropdown Component in Form Repeat

Wappler General Need Help
1

Hello All,

I am using couple of dropdown select component in formRepeat. When I Add new row & then click on the second dropdown, the selected option in the first row dropdown changes/ resets.

Is it possible to have it work independently for each row? Requesting your help in this regards.

This is the code:

<dmx-serverconnect id="scQry_courseType" url="/api/config/creditTemplates/qryCourseTypes" noload="true"></dmx-serverconnect>
<dmx-serverconnect id="scQry_vertical" url="/api/config/creditTemplates/qryVertical"></dmx-serverconnect>

<div class="container">
    <div class="row">
        <div is="dmx-form-repeat" id="formRepeat2" dmx-bind:items="1">
            <div class="row  border-bottom border-top pt-1">
                <small id="bs5-form-group-help1" class="form-text text-muted"><b>{{'('+($index+1)+')'}}</b></small>

                <div class="col">
                    <div class="form-group mb-3">
                        <label for="select_vertical" class="form-label">Vertical *</label>
                        <select class="form-select" name="verticalID" id="select_vertical" dmx-bind:options="scQry_vertical.data.query_vertical" optiontext="courseTypeGroup" optionvalue="verticalID">

                            <option value="">Select</option>
                        </select>
                    </div>
                </div>
                <div class="col">
                    <div class="form-group mb-3">
                        <label for="select_courseType" class="form-label">Course Type</label>
                        <select class="form-select" name="courseTypeID" id="select_courseType" dmx-bind:options="scQry_courseType.data.query_courseTypes" optiontext="shortName" optionvalue="courseTypeID" dmx-on:click="scQry_courseType.load({vertical_no: select_vertical.value})">
                            <option value="">Select</option>
                        </select>
                    </div>
                </div>
                <div class="col-2 mt-3 pt-3 col-md-2">
                    <button id="btn1" class="btn btn-primary mt-0 btn-sm text-white" dmx-on:click="formRepeat2.add()">Add</button>

                </div>
2

Hello @miu

Maybe this is your problem..
Besides being on a repeat component, clicking on any select will reload again the server connect

3

Is there a way to run the server connect for each repeat row separately? Or any other approach you may know

4

Is there a reason why you need to run the server connect? Maybe you can use a datastore component

5

Hello AJ,

Try by moving the server connect scQry_courseType inside the form-repeat.

I just noticed that this SC has been set to noload="true". This will need to be loaded for the course select dropdown to work, perhaps on the update event of the first select.

6

Thanks @guptast & @franse

Moving the SC in form repeat worked.
This is the working code:

<dmx-serverconnect id="scQry_vertical" url="/api/config/creditTemplates/qryVertical"></dmx-serverconnect>


<div class="container">
    <div class="row">
        <div is="dmx-form-repeat" id="formRepeat2" dmx-bind:items="1">
            <div class="row  border-bottom border-top pt-1">
                <small id="bs5-form-group-help1" class="form-text text-muted"><b>{{'('+($index+1)+')'}}</b></small>
                 <!-- Dynamic Course Type Server Connect for Each Row -->
                <dmx-serverconnect id="courseTypeSC" url="/api/config/creditTemplates/qryCourseTypes" noload="true">
                </dmx-serverconnect>
                <div class="col">
                    <div class="form-group mb-3">
                        <label for="select_vertical" class="form-label">Vertical *</label>
                        <select class="form-select" name="verticalID" dmx-bind:options="scQry_vertical.data.query_vertical" optiontext="courseTypeGroup" optionvalue="verticalID" dmx-bind:value="verticalID">


                            <option value="">Select</option>
                        </select>
                    </div>
                </div>
                

                <div class="col">
                    <div class="form-group mb-3">
                        <label for="select_courseType" class="form-label">Course Type</label>
                        <select class="form-select" name="courseTypeID" dmx-bind:options="courseTypeSC.data.query_courseTypes" optiontext="shortName" optionvalue="courseTypeID" dmx-on:click="courseTypeSC.load({vertical_no: verticalID.value})">
                            <option value="">Select</option>
                        </select>
                    </div>
                </div>
                <div class="col-2 mt-3 pt-3 col-md-2">
                    <button id="btn1" class="btn btn-primary mt-0 btn-sm text-white" dmx-on:click="formRepeat2.add()">Add</button>

                </div>