Primefaces dataTable column width , color scheme , checkboxes functionality

Question

I am new to primefaces and jsf and facing a few problems using it.

Following is the code i am using in jsf

<p:dataTable id="plazaId" var="plaza" value="#{coverageBean.plazaDataModel}" selection="#{coverageBean.selectedPlaza}" rowIndexVar="rowIndex" width="100%" border="0" cellspacing="0" cellpadding="0" >
            <p:column id="name" headerText="Select" selectionMode="multiple"
                    style="width:18px" />
            <p:column id="plazaName" headerText="Plaza's" style="width: 50%"  bgcolor="#dcdcdc">
                <h:outputText value="#{plaza.name}" bgcolor="#dcdcdc"></h:outputText>
            </p:column>
            <p:column id="plazaDirect" headerText="Directo" style="width: 10%"  bgcolor="#dcdcdc">
                <h:outputText value="#{plaza.direct}" bgcolor="#dcdcdc"></h:outputText>
            </p:column>
          </p:dataTable>

I have checked the Beans and backend. They are all correct.

The issues are :

• I like to change the width using percentage in this table . But its not working.
• I like all the rows to be of the same color. But its showing alternate colors (white and blue)
• And is there a way to make the checkbox of simple html style . But its a little fancy.

Could anyone help with any of there problems. Thanks in advance

Answer 1

I like to change the width using percentage in this table . But its not working.

You have syntax issues with your JSF view. Their is no bgcolor attribute of h:outputText , this is a style attribute.

<h:outputText value="#{plaza.name}" headerText="Plazas" style="bgcolor: #dcdcdc;" />

This is also true for the p:column component as well...

<p:column id="plazaName" headerText="Plaza's" style="width: 50%; bgcolor: #dcdcdc;">

This also should fix your background color issue.

And is there a way to make the checkbox of simple html style . But its a little fancy.

This would actually be quite difficult to do. The p:selectBooleanCheckbox is really a styled div with javascript events attached to it. Within this div is a hidden input type="checkbox" that exists as the form element that gets posted back. You can't do this without tinkering with javascript and stylesheets that I know of.

Answer 2

1. As of today, this is not possible. Refer to http://code.google.com/p/primefaces/issues/detail?id=2801

2. It is to do with styling. Define style as required.

3. It is to do with styling. Define style as required.