Create a tri state column header that sorts a repeater

Hi guys,

I’m trying to create a column header that has three states (up, down and null) that toggle through a sort action against a repeater widget below it.

On first click of the header I want a down arrow to appear and the table to sort downwards.

On second click of the header I want an up arrow to appear and the table to sort upwards.

On third click of the header I want the arrow to dissapear and the sort to be removed

Further more, there are multiple headers so if I click the first header it will sort downwards but then if I go and click another header, it must remove the sort (and hide the arrow) of the first header and apply the sort to the new header.

I tried solving this by putting the headers into a tri state dynamic panel that toggles through each three states and does all the sorting, the problem is how to get this to play with header 2, 3, 4 etc.

I also looked at selection groups across the headers but these groups only support two states (selected and deselcted) and doesn’t cater for a third state (null).

I have attached my sample file to show how far I got so far, if you click the batch id header it will sort as described above, the question is how to get this to work across headers.

table_example.rp (157.1 KB)

You might try a combination of those two approaches.

I believe any element can hold the Selected property, so try working on just single sort across columns, but use a group as the toggle element.

Next, add a second element for the arrow where it has its own selected state with the rotation you seek as the style modifier.

You’ll end up with some events like:
On select group, show arrow & update sort
On deselect group, hide arrow
On select group, if selected, select arrow
On select arrow, toggle sort direction

Best luck!

1 Like

Thanks for the feedback on this, much appreciated.

I don’t fully understand your suggestion but it’s ok because we figured it out, we basically:

  • put the up/down/null arrow into a tristate dynamic panel and grouped it to the header.

  • we then added an onlcick event to the group to set it selected to true, and then also added a set panel state to wrap the DM panel to next. then add an on load fire event to the remaining headers

  • we then added an onpanelstatechange to the DM up/down/null arrow to set to null on fire of the onload event, and then add sort up, add sort down and remove sort depending on what state This is in, and also set the panel to nul onload if This = not selected.

If anyone needs the original RP please pm me.

1 Like

I am trying to do the same exact thing and having a few challenges, I would love to look at your file if you are willing to share it?

Here you go:

table.rp (1.9 MB)

thank you! Hope I can figure it out :slight_smile: