rich:dataGrid borders issue rich faces 4

1
votes

We are upgrading from jsf 1.2 to jsf 2. We are using apache myfaces 2.1 and rich faces 4.3.

The issue is i am not able to get borders around <rich:dataGrid> component. I have seen posts describing how to remove the borders but no one specifies how to get borders. It seems that borders are by default rendered earlier (they were coming when rich faces 3 is used ) but after upgrading to rich faces 4 , ther are not rendered by default. Following is the xhtml snippet. 

<rich:dataGrid value="#{bean.getListValues}"  var="value" columns="1" rowKeyVar="index" id="qsns"
style="border-bottom-width:10px;">


        <h:panelGrid id="qsn#{index+1}"  border="10" columns="2">

                   <h:outputText value="qsn #{index+1}"/>
                   <h:selectOneMenu value="#{value.qsn}">
                 <f:selectItems value="#{bean.qsnPool}" />
                </h:selectOneMenu> 


                <h:outputText value="Answer"/>                                            
                    <h:inputText value="#{value.answer}"/>


        </h:panelGrid>  


</rich:dataGrid>

I also tried setting borders explicitely for panelGrid (border="10") in above snippet.
and to rich:dataGrid (border-bottom-width:10px), but it is not working as specified in url according to url : http://docs.jboss.org/richfaces/latest_4_2_X/Component_Reference/en-US/html/chap-Component_Reference-Tables_and_grids.html#sect-Component_Reference-Tables_and_grids-richlist

Can anyone please help ?

3
jsf-2richfaces

3 Answers

1
votes

The border-bottom-width:10px; isn't working because the border-bottom-style is none.

The borders around <rich:datagrid> aren't defined on one element. The left and top borders are defined on the datagrid, class rf-dg. The bottom and right are defined on the grid cells, class rf-dg-c. You'll have to overwrite the classes if you want to change all the borders.

1
votes

I am able to get the desired behavoiur by following changes 

.tableClass1 .rf-dg-c{   
      border: 1px solid #000;
}
table.tableClass1.rf-dg{     
     border-collapse:collapse;
}


<rich:dataGrid value="#{bean.getListValues}"  var="value" columns="1" rowKeyVar="index" id="qsns"
styleClass="tableClass1">

        <h:panelGrid id="qsn#{index+1}"  border="10" columns="2">

                 <h:outputText value="qsn #{index+1}"/>
                 <h:selectOneMenu value="#{value.qsn}">
                    <f:selectItems value="#{bean.qsnPool}" />
                 </h:selectOneMenu> 


                 <h:outputText value="Answer"/>                                            
                 <h:inputText value="#{value.answer}"/>


        </h:panelGrid>  

</rich:dataGrid>

With above style classes and xhtml code , borders are perfectly rendered.

First style sheet renders borders for grid cells and second style sheet collapses the space between adjacent cell borders (since cellspacing attribute doesn't work for rich:dataGrid)

The above selectors apply only to local <rich:dataGrid> , that means not affecting globally for all <rich:dataTables>

0
votes

The border attribute is not doing much, try using CSS styling:

 <h:panelGrid style="border: 1px solid #000;"> ...

Or use CSS via classes:

<h:panelGrid styleClass="myClass"> ...

In your CSS:

.myClass {
  border: 1px solid #000;
}