PrimeFaces, how to avoid concatenation of p:column in p:selectOneMenu selected value

Question

I would like to use p:selectOneMenu with custom contents with p:columns (as shown in http://www.primefaces.org/showcase-labs/ui/selectOneMenu.jsf) and I would like to show the selected value in the drop-down field with less information than the ones shown in the drop-down list of possible values.

For example, the code below should show only bnkCod after selection (e.g. '1').
Instead it shows the concatenation of bnkCod and bnkNam (e.g. '1 Bank 1').

bnkCod and bnkNam are both String and the Converter works correctly.

Can anybody help me troubleshooting the problem ?

JSF:

 <p:selectOneMenu value="#{bean.bank}" converter="bankCodeConverter" var="p">  
              <f:selectItem itemLabel="Select One" itemValue="" />  
              <f:selectItems value="#{bean.banks}" 
                             var="bank" itemLabel="#{bank.bnkCod}" itemValue="#{bank}"/>                
              <p:column>  
                  #{p.bnkCod}
              </p:column>                
              <p:column>  
                  #{p.bnkNam}  
              </p:column>  
 </p:selectOneMenu>

Bean:

List<Bank> banks = new ArrayList<Bank>();
banks.add(new Bank("1","Bank 1"));
banks.add(new Bank("2","Bank 2"));

Converter:

@FacesConverter(forClass=Bank.class,value="bankCodeConverter")
public class MeansOfPaymentConverter implements Converter {

    @Override
    public Object getAsObject(FacesContext context, UIComponent component, String value) {
        //... retrieve bean
        return bean.getBanksMap().get(value);
    }

    @Override
    public String getAsString(FacesContext context, UIComponent component, Object value) {
        if(value instanceof Bank) 
            return ((Bank) value).getBnkCod();
        else
            return null;
    }
}

I'm using PrimeFaces 3.4 and the problem shows up in both Safari 6.0 and Firfefox 18.0.1

I don't understand your question: Why are you expecting it to show only ` #{p.bnkNam}` when you've clearly specified that both fields should show by adding ` #{p.bnkCod} ` along with the `bnkName`? — kolossus, Jan 31 '13 at 00:56
Hi @kolossus, let me rephrase my question then. A drop-down list displays the selected value in a field together with a list of possible values when it gets activated, right ? I'd like to have only '#{p.bnkCod}' in the selected value, but both '#{p.bnkCod}' and '#{p.bnkNam}' inside the entries of possible values. — andrea, Jan 31 '13 at 07:03
I installed the PrimeFaces Showcase (PrimeFaces-3.5-SNAPSHOT on Mojarra-2.1.10) on my local Tomcat 7.0.25 and I've noticed a different behavior between my local installation and the live ShowCase. In the 'content with filter' seletOneMenu in http://www.primefaces.org/showcase-labs/ui/selectOneMenu.jsf, once I select the entry for messi I get 'Messi' in the selectOneMenu field value. In my local installation when I do the same I get 'Messi - 10' in the field value. So, my code is probably correct, but there's something, somewhere else, to be fixed.. — andrea, Jan 31 '13 at 08:30

score 1 · Answer 1 · answered Nov 08 '13 at 14:35

The way I found to solve this was by overwriting selectOneMenu widget js code.

1) Open primefaces jar file and look for primefaces.js under META-INF/resources/primefaces 2) Copy code of PrimeFaces.widget.SelectOneMenu into a new js file and call it from your main app page (probably a template) 3) Overwrite method setLabel with following code:

setLabel : function(a) {
  var theLabel = a;
  var labelArray = a.split('\n');
  for ( var idx = 0; idx < labelArray.length; idx++) {
    if (labelArray[idx] != '') {
      theLabel = labelArray[idx];
      break;
    }
  }
  if (this.cfg.editable) {
    this.label.val(theLabel);
  } else {
    if (theLabel == "") {
      this.label.html("&nbsp;");
    } else {
      this.label.text(theLabel);
    }
  }
}

When you use columns, label comes in the format \ncol1\ncol2\ncolN. So my workaround is to get the first non empty string after spliting the label for \n.

partlov · Answer 2 · 2013-01-30T16:23:41.830

0

Can you try something like this with columns:

<p:column rendered="#{p.bnkCod == bean.bank.bnkCod}">
  #{p.bnkCod}
</p:column>
<p:column rendered="#{p.bnkCod == bean.bank.bnkCod}">
  #{p.bnkNam}
</p:column>
<p:column colspan="2" rendered="#{p.bnkCod != bean.bank.bnkCod}">
  #{p.bnkCod}
</p:column>

Also update yor list, by adding this inside selectOneMenu:

<p:ajax update="@this" process="@this"/>

edited Jan 30 '13 at 16:23

answered Jan 30 '13 at 16:04

partlov

13,789
6
63
82

Hi @partlov, thanks for your message. I tried the solution you proposed, but what I obtained is a drop-down list with three columns where the first two are correctly filled only for the selected entry (shown also in the drop-down value) and all the other entry only have the third column filled in with their bnkCod. I'd like to have only two columns in the drop-down list (showing bnkCod and bnkNam), and only the selected entry's bnkCod in the drop-down value. – andrea Jan 30 '13 at 23:03

score 0 · Accepted Answer · answered Oct 24 '13 at 08:08

0

I could not find any solution to the problem. I therefore decided to show both values 'p.bnkCod' and 'p.bnkNam', which was acceptable enough.

answered Oct 24 '13 at 08:08

andrea

1
4

PrimeFaces, how to avoid concatenation of p:column in p:selectOneMenu selected value

3 Answers3