How to make Dropdowns Work Per Row in Repeat Table?

Wappler General Need Help
1

I have created a repeat table for managing user roles. The issue is when a different role is selected in second/other row, it resets the select options for every other row.

I tried to include the SC inside the table repeat, however, it is still not working as expected.

What I want is:

  1. Each row should have its own independent set of users for the selected role.
  2. Changing a role in one row should only reload the users for that row.

Requesting your help in resolving this issue.

Below is the code of my table:

<div class="row">
                            <div class="col">
                                <div class="table-responsive">
                                    <table class="table small">
                                        <thead class="small">
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">Role</th>
                                                <th scope="col">User</th>
                                                <th scope="col">Department</th>
                                                <th scope="col" class="text-center">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody is="dmx-form-repeat" id="formRepeat1" dmx-bind:items="1">
                                            <div class="row  border-bottom border-top pt-1"><dmx-serverconnect id="sc_qryRoles" url="/api/institute/addDeptUsers/qryRoles" noload="true"></dmx-serverconnect><dmx-serverconnect id="sc_qryInstUsers" url="/api/institute/addDeptUsers/qryInstUsers" noload="true"></dmx-serverconnect>
                                            </div>
                                            <tr>
                                                <th scope="row">{{$index+1}}</th>
                                                <td>
                                                    <div class="col">
                                                        <select id="sel_role" class="form-select" name="roleID" dmx-bind:options="sc_qryRoles.data.query_roles" optiontext="instRoleName" optionvalue="roleID" dmx-on:click="sc_qryRoles.load({inst_id: inp_institutionID.value})">
                                                            <option value="">Select</option>
                                                        </select>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="col">
                                                        <select id="sel_user" class="form-select" name="userID" dmx-bind:options="sc_qryInstUsers.data.query_instUsers" optiontext="firstName+' '+lastName" optionvalue="userID" required="" dmx-on:changed="sc_qryInstDepartments.load({inst_id: inp_institutionID.value})" dmx-on:click="sc_qryInstUsers.load({inst_id: inp_institutionID.value, role_id: sel_role.value})">
                                                            <option value="">Select</option>
                                                        </select>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="col">
                                                        <select id="sel_department" class="form-select" name="instDepartmentID" dmx-bind:options="sc_qryInstDepartments.data.query_instDept" optiontext="deptName" optionvalue="instDeptID">
                                                            <option value="">Select</option>
                                                        </select>
                                                    </div>
                                                </td>
                                                <td class="text-center">
                                                    <button id="btn_add" class="btn btn-sm btn-outline-primary me-2" dmx-on:click="formRepeat1.add()" dmx-bs-tooltip="'Add New Row'" data-bs-trigger="hover" data-bs-placement="bottom"><i class="fas fa-plus"></i></button><button id="btn_delete" class="btn btn-sm btn-outline-danger" dmx-on:click="formRepeat1.remove($index)" dmx-bs-tooltip="'Delete Row'" data-bs-trigger="hover" data-bs-placement="bottom"><i class="fas fa-trash-alt"></i></button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
2

I'm not sure this is necessarily the best way but I would use dmx-bind:name to make sure it's unique (bind the ID of the row?) and then use a dmx-on:changed as you have it where the SC is loaded and sends the value of the row. Then use a success to reload the data so it updates on the page.

3

Thank You @sitestreet for your help.
I could get it working by placing the SC in the cell where the select component is & giving the SC dynamic ID using $index.
I hope this is the correct approach. Others can share a better solution or improvement from what I have done.

 <div class="row">
                            <div class="col">
                                <div class="table-responsive">
                                    
                                    <table class="table small">
                                        <thead class="small">
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">Role</th>
                                                <th scope="col">User</th>
                                                <th scope="col">Department</th>
                                                <th scope="col" class="text-center">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody is="dmx-form-repeat" id="formRepeat1" dmx-bind:items="1">


                                            <tr>
                                                <th scope="row">{{$index+1}}</th>
                                                <td>
                                                    <div class="col">
                                                        <select id="sel_role" class="form-select" name="roleID" dmx-bind:options="sc_qryRoles.data.query_roles" optiontext="instRoleName" optionvalue="roleID" dmx-on:click="sc_qryRoles.load({inst_id: inp_institutionID.value})" dmx-on:changed="serverconnect.load({inst_id: inp_institutionID.value, role_id: value})">
                                                            <option value="">Select</option>
                                                        </select>
                                                    </div>
                                                </td>

                                                <td>
                                                    <dmx-serverconnect dmx-bind:id="sc_qryUsers_{{$index}}" url="/api/institute/addDeptUsers/qryInstUsers" dmx-param:inst_id="" dmx-param:role_id="" noload="true"></dmx-serverconnect>
                                                    <div class="col">
                                                        <select id="sel_user" class="form-select" name="userID" dmx-bind:options="serverconnect.data.query_instUsers" optiontext="firstName+' '+lastName" optionvalue="userID" required="" dmx-on:changed="sc_qryInstDepartments.load({inst_id: inp_institutionID.value})">
                                                            <option value="">Select</option>
                                                        </select>
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="col">
                                                        <select id="sel_department" class="form-select" name="instDepartmentID" dmx-bind:options="sc_qryInstDepartments.data.query_instDept" optiontext="deptName" optionvalue="instDeptID">
                                                            <option value="">Select</option>
                                                        </select>
                                                    </div>
                                                </td>
                                                <td class="text-center">
                                                    <button id="btn_add" class="btn btn-sm btn-outline-primary me-2" dmx-on:click="formRepeat1.add()" dmx-bs-tooltip="'Add New Row'" data-bs-trigger="hover" data-bs-placement="bottom"><i class="fas fa-plus"></i></button><button id="btn_delete" class="btn btn-sm btn-outline-danger" dmx-on:click="formRepeat1.remove($index)" dmx-bs-tooltip="'Delete Row'" data-bs-trigger="hover" data-bs-placement="bottom"><i class="fas fa-trash-alt"></i></button>
                                                </td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                  ```
1 Like
4

That looks pretty good to me.

1 Like