Search code examples
datatablejsf-2richfaces

Issue re-rendering a <ui:include /> in Richfaces 4.0

I am using richfaces 4.0 final. I have a page where I am including another facelet using 

<ui:include src="#{bean.selectedPage}" />

The String selectedPage is set on a button click. When button is clicked, the page is changed and panel surrounding the above code is re-rendered using "render" attribute. The facelet has a datatable. eg:

<rich:dataTable>
    <f:facet name="header">
        <rich:columnGroup>
            <rich:column>
                <h:outputText value="hello" />
            </rich:column>
        </rich:columnGroup>
    </f:facet>
</rich:dataTable>

The css for this datatable is not included. Could someone help me resolve this issue ? I have added all required jars. This following is a snippet of my web.xml

<context-param>
    <param-name>org.richfaces.enableControlSkinning</param-name>
    <param-value>true</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.enableControlSkinningClasses</param-name>
    <param-value>false</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.skin</param-name>
    <param-value>blueSky</param-value>
</context-param>
<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.html</url-pattern>
</servlet-mapping>

The strange part is the skin is loaded for other components like <a4j:commandButton /> . Issues appear only for datatable.

Solution

  • I have faced this before. AFAIK, richfaces loads the CSS for components on demand. Since your page is loaded dynamically, Richfaces never loads the css cause it never knows. (mentioning hard coded page name,framework already knows what component's css to render,and so it does, as you mentioned in your comment). The only solution I could find for this was to include a rich:dataTable in your parent page (i.e. the page in which you are including this facelet with <ui:include>) and set its style to display:none. This way the framework includes the rich:dataTable css before-hand. I know its not a perfect solution, but I couldn't find a better one!