Make checkboxes unique

I have a page with about 1000 images on it, it is not a public page but rather an image manager for a websites content management system I have created.

Because of the large amount of images, there are many available filters to narrow down the result set.

Each image in the repeat also has a checkbox allowing the user to select that particular image to perform an action on, or a bulk action if multiple images are selected.

This is where the issue comes in, upon checking the box, it adds that id to an array, and just carries on adding more or removing from the array as different images are selected.
In this example

  1. I set a filter, server action runs, 10 results display
  2. I check image 1,3,5
  3. I remove the filter and set a different filter, server action runs and 15 results display

The problem is the new images from the new filter now already have checkboxes ticked for images 1,3,5 even though the array data still has the IDs of the correct images which are no longer being displayed.

I do not really understand why it is doing this, has anyone else come across an issue like this, any ideas how to fix. Here is my code snippet.

<dmx-array id="arr_save_for_web"></dmx-array>
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="scimagelist.data.queryImageList" id="tr-image-list">
    <tr>
        <td>
            <div class="mb-4">
                <!-- {{mil_id}} is unique for every record -->
                <div class="form-group form-check">
                    <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" id="sfwselector" dmx-bind:id="sfwselector_{{mil_id}}" name="sfwselector" dmx-bind:name="sfwselector_{{mil_id}}" dmx-on:click="sfwselector.checked ? arr_save_for_web.remove(value) : arr_save_for_web.addUniq(value)" dmx-bind:value="mil_id">Save For Web Selector
                    </label>
                </div>
            </div>
        </td>
    </tr>
</tbody>

How about adding a Key to the repeat?

1 Like

hmmm, good plan, let me try that out quick, one moment.

Not really working, but to be honest I use keys about once a year or something, any pointers on how i should use the key and apply it to that sort of data structure Ken

Just set the key property to a unique value and it does the rest. You might also experiment with the different repeat possibilities like Repeat vs Repeat Children.

1 Like

Well I did it correct then, but I am going to have to fiddle with it a bit to make is work, I used mil_id as the key which I know is different for every image, so going to have to try the different repeats.
Will let you know, thanks Ken

1 Like

Thank you, it's working now, just had to fix 1 part of my repeat, awesome.

Edit: @mebeingken, I think I will be using Key a bit more in future, I am not sure why but in my head I thought it was only for nested repeats or GroupBy stuff. That was actually pretty painless.

1 Like

Ya, when you have anything that rearranges the repeated elements, the key keeps it all in sync.

1 Like

You mean ALWAYS.
Always try to use repeat-children with a key. And always try to avoid self-repeat which does not support keys.

1 Like

I don't usually add a key unless something's not working or it seems necessary. I seem to remember someone mentioning that adding a key added some performance overhead (perhaps it was @George) - but I could have imagined it.

I seem to recall the same @TomD

I haven't read this before. Could be the case. And makes sense since it would add to dmx's work.
But this one seems necessary to identify each row correctly, specially in case of paginations, filters or some complex logic inside repeat etc. which for me are majority of the cases where repeats are in use. Hence I almost always use KEY.

I’m not quite clear when a key is needed. Looking through a few tables including sorting and pagination, I haven’t used a key and everything works fine.

You guys might be referring to this:

3 Likes