Is it possible to add Row Action on right hand side of each row?

  • 1
  • Question
  • Updated 3 years ago
I have a page to show List of all available open events in a table. I am trying to display a button against each row. On click of the button it should open up popup page where user can book for the event.

I could manage to achieve this by adding 'Row Action' (that display as a button 'Book Event' using css) where it shows button against each row and on click it opens up a popup allowing user to enter their details.

But we want these buttons 'Book Event' (Row Action) to show on right hand side of the page against each row, instead of left side of the table row. Is it possible to show on right hand side or is there any other way I can display button against each row?
Photo of Pavithra

Pavithra

  • 440 Points 250 badge 2x thumb

Posted 3 years ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
You can move the td element using javascript. I think that's probably the easiest way.
Photo of Pavithra

Pavithra

  • 440 Points 250 badge 2x thumb
How do I move the td element. Do you have any examples please?
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,704 Points 20k badge 2x thumb
Honestly don't know yet. Just know it's possible. Google teaches everytime that it's possible.
Photo of Pavithra

Pavithra

  • 440 Points 250 badge 2x thumb
I got it thank you.

Below code for reference:
$('tr').each(function(){
    $('td:first',this).remove().insertAfter($('td:last',this));
});
Photo of Pavithra

Pavithra

  • 440 Points 250 badge 2x thumb
It moves the td, but the popup doesn't work. :(
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hello Pavithra -

I haven't tried this and not 100% sure it would work but given the code you have above, the problem that you are using remove() where you would want to use detach().

remove() will completely remove the element from the DOM along with any data and event listeners associated to that element.  Skuid uses element data and event listeners to trigger and support the beahvior on the action (e.g. onClick, popup definition, etc.)

If you want to relocate the element, try using detach() instead.  

Hope this helps!
Photo of Pavithra

Pavithra

  • 440 Points 250 badge 2x thumb
Awesome! It worked really well.. Thank a heaps...
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Now that you've done this, I can being able to create row actions and place pretty anywhere in the table as well.

Very cool and useful.