How to change the order of the primeFaces picklist buttons

Question

Is there an easy way to change the order of the sort and move buttons from the PrimeFaces picklist? For better usability i need the buttons to be in this order:

Sort:

all up
up
down
all down

and for moving:

all to the right
right
left
all to the left

I am just the one who implements a dummy page and someone else has to implement as a PrimeFaces Component what i am designing here. So i don't want it to be a impossible task for the programmer.

score 7 · Accepted Answer · answered Feb 23 '12 at 12:55

7

There is no built-in buttonTemplate feature, you can change the order with css though.

Code:

.ui-picklist-button-add {
    position:relative;
    top:25px;
}

.ui-picklist-button-add-all {
    position:relative;
    top:-40px;
}

-> This is what 'Optimus Prime' says. His answer in the Prime Faces Forum on my question

answered Feb 23 '12 at 12:55

Chris

1,092
2
19
39

your solution would surely work, too. But this one is more elegant. – Chris Feb 23 '12 at 13:21
yup , much more , that's why I gave +1 – Daniel Feb 23 '12 at 13:26

score 1 · Answer 2 · answered Jan 09 '20 at 13:45

1

I am the same problem but still got pixel issues with different screens.

Using flexbox should be better than px change:

.ui-picklist-buttons-cell{
  display: flex;
  flex-direction: column;
}

.ui-picklist-button-add {
  order:2;
}
.ui-picklist-button-add-all {
  order:1;
}
.ui-picklist-button-remove {
  order:3;
}
.ui-picklist-button-remove-all {
  order:4;
}

Example: https://codepen.io/Frank_Worker/pen/abzYmYr

answered Jan 09 '20 at 13:45

King Chun O

41
3

Cool, great to see this solution..! – Kukeltje Jan 09 '20 at 19:57

score 1 · Answer 3 · edited May 23 '17 at 12:15

1

you can try doing it with jQuery like that : JavaScript moving element in the DOM

Use firebug to find out all the classes of the buttons and its containers

for example try jQuery(".ui-picklist-target-controls .ui-picklist-button-move-top").insertAfter(".ui-picklist-target-controls .ui-picklist-button-move-top");

If want to patch the primefaces jar look at the PickListRenderer.java file look where they use the encodeButton method , and just re order the buttons...

although you will have to re patch it each time you'll want to upgrade

edited May 23 '17 at 12:15

Community

1
1

answered Feb 23 '12 at 09:56

Daniel

36,833
10
119
200

and there's no easy option for the primeFaces picklist to change that? Is it really just take the component as it is or write your own one? I'm confused they didn't consider it to be more intuitive to have the buttons ordered in another way. – Chris Feb 23 '12 at 10:44
1

they offer custom titles for the buttons and the ability to display/hide them... you can always open a new feature ticket... – Daniel Feb 23 '12 at 10:57

How to change the order of the primeFaces picklist buttons

3 Answers3