# Template Repeater - Rearrange items by clicking and dragging

**URL:** <https://forum.inductiveautomation.com/t/template-repeater-rearrange-items-by-clicking-and-dragging/18466>\
**Category:** Ignition\
**Created:** [June 14, 2018, 9:40am UTC](https://forum.inductiveautomation.com/t/template-repeater-rearrange-items-by-clicking-and-dragging/18466 "2018-06-14T09:40:47Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [June 14, 2018, 9:40am UTC](https://forum.inductiveautomation.com/t/template-repeater-rearrange-items-by-clicking-and-dragging/18466/1 "2018-06-14T09:40:47Z")

</div>

Hi,

One for the Java experts out there looking for a challenge!

I have a template repeater that displays recipe steps and their configuration using a dataset parameter that is initially populated via a SQL query.

I might be dreaming, but I’m wondering how difficult it would be to allow a user to click and drag the steps around as you can in other applications in order to re-order the steps? How would one achieve this, if at all remotely possible?

![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/3/3f93dedbf985b972b7a5639b427e60c6e3ece3ae.png)

Cheers!

Nick

---

<div class="post-metadata">

**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\
**Post date:** [June 14, 2018, 2:06pm UTC](https://forum.inductiveautomation.com/t/template-repeater-rearrange-items-by-clicking-and-dragging/18466/2 "2018-06-14T14:06:01Z")

</div>

I’ve done something similar, but only with a table.  
I guess you can imagine your steps as a row (which probably are).  
My table had data property bonded to SQL query:

```auto
SELECT id, sifra, folderid, sort_order, op, par1/1000.0 as par1, par2/1000.0 as par2, speed as speed, options, modifiedby, t_stamp, 0 "delete" FROM sifre_krivljenje_koraki 
WHERE sifra = '{ignitionomg/izbranaSifra}'
ORDER BY sort_order

```

I had a column named sort\_order (for you would be a step number) and I’ve changed only that value. On the table side, I had two buttons for UP and DOWN and in the buttons actionPerformed I have:

```auto
table = event.source.parent.getComponent('PowerTable')
selected_sort_order = table.data.getValueAt(table.selectedRow,"sort_order")
#UP
res = system.db.runPrepUpdate("UPDATE sifre_krivljenje_koraki SET sort_order = 2 * ? - sort_order - 1 WHERE sort_order IN (?, ?)", [selected_sort_order, selected_sort_order - 1, selected_sort_order])
system.db.refresh(table, "data")
table.selectedRow = table.selectedRow - 1

```

```auto
table = event.source.parent.getComponent('PowerTable')
selected_sort_order = table.data.getValueAt(table.selectedRow,"sort_order")
#DOWN
res = system.db.runPrepUpdate("UPDATE sifre_krivljenje_koraki SET sort_order = 2 * ? - sort_order + 1 WHERE sort_order IN (?, ?)", [selected_sort_order, selected_sort_order, selected_sort_order +1])
system.db.refresh(table, "data")
table.selectedRow = table.selectedRow + 1

```

I guess you can put the code for UP and DOWN buttons (with some modifications) inside your drag&drop events…

---

<div class="post-metadata">

**Author:** ![Stuart](https://avatars.discourse-cdn.com/v4/letter/s/cab0a1/32.png) [@Stuart](https://forum.inductiveautomation.com/u/Stuart)\
**Post date:** [June 14, 2018, 4:15pm UTC](https://forum.inductiveautomation.com/t/template-repeater-rearrange-items-by-clicking-and-dragging/18466/3 "2018-06-14T16:15:08Z")

</div>

I don’t know about drag/drop, but I was able to make something work with up/down arrows to the side of my template repeater. Here are my rough steps:

- Add a column in my database to store the templates location in the repeater (index).
- In the query used in the template repeater, add an `ORDER BY` by that order column.
- Add a checkbox (toggle button) to the template so that the user can select a template.
- Add up button on the side (outside the template repeater) that when pressed gets the selected templates order, and swaps it with the order of the template right above it.
- Add a down button that swaps the order of the selected template with the one below it. (In the database).
- Once a button is pressed, refresh the template repeater so that the change is reflected.
- I also added code to the checkbox on the template so that when a box was checked, it would de-select all the other check boxes in their respective templates.

Probably more things I’m forgetting.

---

<div class="post-metadata">

**Author:** ![Stuart](https://avatars.discourse-cdn.com/v4/letter/s/cab0a1/32.png) [@Stuart](https://forum.inductiveautomation.com/u/Stuart)\
**Post date:** [June 14, 2018, 5:05pm UTC](https://forum.inductiveautomation.com/t/template-repeater-rearrange-items-by-clicking-and-dragging/18466/4 "2018-06-14T17:05:31Z")

</div>

[Here is an example I posted of reordering table rows.](http://forum.inductiveautomation.com/t/re-order-power-table-rows-using-buttons/17978)

This uses a different method than how I approached the template repeater.

---

<div class="post-metadata">

**Author:** ![Kyle\_Chase](https://avatars.discourse-cdn.com/v4/letter/k/9de0a6/32.png) [@Kyle\_Chase](https://forum.inductiveautomation.com/u/Kyle_Chase)\
**Post date:** [June 14, 2018, 7:12pm UTC](https://forum.inductiveautomation.com/t/template-repeater-rearrange-items-by-clicking-and-dragging/18466/5 "2018-06-14T19:12:26Z")

</div>

It is possible, but it is quite involved.

Here is a video as an example. Both a free form and structured layouts.  
[https:/uploads/iatesting/original/2X/a/a1eb7b09ac6d68dd120f2e115784dfcc693863cb.mp4](https:/uploads/iatesting/original/2X/a/a1eb7b09ac6d68dd120f2e115784dfcc693863cb.mp4)