Accessing parent from nested repeat child component

Wappler General Need Help
1

I am trying to manipulate a table to include ‘invisible’ cells to accommodate colspan not being supported by DataTables however I’ve run into a roadblock that I hoped someone might be able to help with…

I have a repeat children expression on the table body which gives the required number of table row elements and have added another repeat children element on the table row tag to produce the required td elements. This all works fine but to get the relevant record to show in the cell I need the $index from both the row and tbody expressions.

If I use a dmx-repeat on the row I can access parent.$index to get the tbody index but, because my case uses the repeat children component

<tbody is="dmx-repeat" id="repeat1d1" dmx-bind:repeat="cond_admincentre.route_admmanage.conditional_formproj.sc_formproj.data.r_unallocbyryear.max('rowsreq')">
         <tr id="repunllocrows" is="dmx-repeat" dmx-bind:repeat="cond_admincentre.route_admmanage.conditional_formproj.sc_formproj.data.rep_acforms">
                  <td class="py-0" dmx-bind:colspan="$value.count()">
                             <span dmx-text="vc: {{$value.count()}} di:{{$index}} pdi:{{parent.$index}} dpdi:{{$parent.$index}} "></span>
                  </td>
                  <td class="d-none" dmx-repeat:invcells2="$value.count() > 1 ? $value.count() -1 : 0">
                  </td>
          </tr>
</tbody>

you can’t seem to navigate to the parent.
I have tried parent.$index with no success - can you do this with repeat children?

The difficulty is that I need the repeat to apply to the cell that shows the data and has a colspan value as well as producing the relevant quantity of hidden cells - hence why the repeat children (not repeat) is required.

2

You can create a variable in the parent repeat, set its value to $index and access its value in the nested one.
The variable value will be available in the current repeat scope only. Example:

<tbody is="dmx-repeat" id="repeat1d1" dmx-bind:repeat="cond_admincentre.route_admmanage.conditional_formproj.sc_formproj.data.r_unallocbyryear.max('rowsreq')">

<dmx-value id="parentIndex" dmx-bind:value="$index"></dmx-value>
         
<tr id="repunllocrows" is="dmx-repeat" dmx-bind:repeat="cond_admincentre.route_admmanage.conditional_formproj.sc_formproj.data.rep_acforms">
                  <td class="py-0" dmx-bind:colspan="$value.count()">
                             <span dmx-text="vc: {{$value.count()}} di:{{$index}} pdi:{{parentIndex.value}} dpdi:{{parentIndex.value}} "></span>
                  </td>
                  <td class="d-none" dmx-repeat:invcells2="$value.count() > 1 ? $value.count() -1 : 0">
                  </td>
          </tr>
</tbody>
1 Like
3

That’s what I thought but it seems that it gets stripped out as tbody doesn’t allow anything other than tr children:

image
image1394×376 74.9 KB

leads to:
image

4

What is the expression used in this nested repeat? I see some groupbytoarray('formyear') - what is this?

5

That’s a custom formatter - the data works as a repeat expression (not repeat child) and can be parsed fine in console using dmx-parse

6

Can you check if it works with a regular repeat expression, as i tested locally with nested repeats and it works fine.

7

So tried it with just numbers for the repeat expressions:

<table class="table">
                    <thead>
                        <tr>
                            <th scope="col">1</th>
                            <th scope="col">2</th>
                            <th scope="col">3</th>
                            <th scope="col">4</th>
                            <th scope="col">5</th>
                        </tr>
                    </thead>
                    <tbody is="dmx-repeat" id="repeat1d1" dmx-bind:repeat="10">
                        <tr class="d-none">
                            <td>
                                <dmx-value id="parentIndex" dmx-bind:value="$index"></dmx-value>
                            </td>
                        </tr>
                        <tr id="repunllocrows" is="dmx-repeat" dmx-bind:repeat="5">
                            <td class="py-0">
                                <span dmx-text="var: {{parentIndex.value}} vc: {{$value}} di:{{$index}} pdi:{{parent.$index}} dpdi:{{$parent.$index}} rdi: {{repeat1d1.$index}}"></span>
                            </td>
                        </tr>


                    </tbody>
                </table>

and removed everything else from the page
still can’t access the parent when both are repeat child (is=“dmx-repeat”) elements

image
image1115×552 35.1 KB

As you can see, I’ve worked out that I can put the variable in a hidden row but it doesn’t alter the issue that I can’t access a parent repeat child from within another repeat child. I’m also

8

You can’t access the values using $parent that’s why you need to use a variable in the main repeat and call its value in the nested repeat to access parent properties.

9

OK, that’s a shame - it looks like hidden row it is

10

No, you don’t need a hidden row. Just a variable inside your parent repeat.

11

But it gets stripped out in the browser:

12

Have used this setup many times, and it works well.
What looks wrong here is that you have HTML (the variable) between TABLE & TR tags, which is not allowed. Move the variable inside TD tag and see if that works.

Another suggestion: set a KEY on the repeat. Always do that on repeat-children components.

13

Thanks Siddhant,
Unfortunately, if I move the variable within the TD it is then inside the repeat child that prevents it seeing the parent repeat child.

The table generally works well, it is just because of needing the colspan attribute and DataTables then needing hidden columns to compensate making it more difficult than it should be…

14

OH. I missed the part that your TR is again a repeat-children.
Some funky JS is the direction I am leaning towards now, to get the parent's $index.

Maybe try this: create another TR>TD, put the variable in there, and keep the TR hidden with CSS.

15

@bpj did you ever figure this out. Same thing appears to be happening to me. Trying to access the $index of the parent loop from a dynamic loop to make the columns. The variable doesn't seem to be getting set and is gone in the Dom.

Would love to see your work around if you have one.

-Twtich