1 Reply Latest reply on Jan 28, 2009 7:23 PM by Nick Belaevski

    Problem with rich:extendedDataTable on Modal Panel

    Milind S Newbie

      Hi,
      I am facing a problem when I use rich:extendedDataTable on Modal Panel. The problem is when modal panel is shown, I want to reRender the extendedDataTable. However when I re-render the modal panel on showing, it is not getting dispalyed. If I do not re-render it is getting displayed but the data table is blank.

      Following is the code.

      1. main.xhtml - In main.xhtml, there is a button "Show Panel". When I press this button I am expecting a modal panel to be displayed. See the "reRender" property of button in following code. If I use reRender="HeaderDetailsPanel", modal panel is displayed but data table is not populated. If I use reRender="HeaderDetailsPanel, RowListPanel" or reRender="ModalPanel2" the modal panel is not getting displayed.

      <a4j:commandButton id="showPanel" value="Show Panel" style="position:absolute; left:180px; top:150px; height:23px;" action="#{bean.testAction}" oncomplete="Richfaces.showModalPanel('ModalPanel2',{width:1000, height:600});" reRender="HeaderDetailsPanel">
       </a4j:commandButton>


      2. Modal panel code which is part of main.xhtml
      <rich:modalPanel id="ModalPanel2" height="600" width="970">
       <f:facet name="header">
       <h:outputText value="Test Panel" />
       </f:facet>
      
       <f:facet name="controls">
       <span style="cursor: pointer"
       onclick="javascript:Richfaces.hideModalPanel('ModalPanel2')">X</span>
       </f:facet>
       <rich:panel id="HeaderDetailsPanel">
       <ui:include src="HeaderData.xhtml" />
       </rich:panel>
       <rich:panel id="RowListPanel">
       <ui:include src="DataList.xhtml" />
       </rich:panel>
      </rich:modalPanel>


      3. DataList.xhtml
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <f:view contentType="text/html"
       xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:a="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:s="http://jboss.com/products/seam/taglib">
      <html>
      <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <title>AAAA</title>
       <link rel="shortcut icon" href="#{request.contextPath}/favicon.ico"/>
       <a:loadStyle src="resource:///stylesheet/theme.xcss"/>
       <a:loadStyle src="/stylesheet/theme.css"/>
       <ui:insert name="head"/>
      </head>
      <body>
       <div>
       <rich:panel id="SchedChTbl">
       <h:form id="Event" styleClass="edit">
      
       <f:facet name="header">Event Search Results</f:facet>
       <h:outputText value="The Event search returned no results." style="font-weight:bold"
       rendered="#{empty EventList.retrieveEventlist()}"/>
      
       <rich:extendedDataTable height="400px" rendered="#{not empty bean.retrieveEventlist()}"
       width="950px"
       value="#{bean.retrieveEventlist()}" var="sch">
       <rich:column id="schedtime" size="120" sortable="true" sortBy="#{sch.schedTime}" filterBy="#{sch.schedTime}" filterEvent="onkeyup" label="SCHED_TIME">
       <f:facet name="header"><h:outputText styleClass="headerText" value="SCHED_TIME" /></f:facet>
       <h:outputText value="#{sch.schedTime}" />
       </rich:column>
       <rich:column id="materialid" sortable="true" sortBy="#{sch.materialId}" filterBy="#{sch.materialId}" filterEvent="onkeyup" label="MATERIAL_ID">
       <f:facet name="header"><h:outputText styleClass="headerText" value="MATERIAL_ID" /></f:facet>
       <h:outputText value="#{sch.materialId}" />
       </rich:column>
       <rich:column id="titleid" size="100" sortable="true" sortBy="#{sch.title}" filterBy="#{sch.title}" filterEvent="onkeyup" label="TITLE">
       <f:facet name="header"><h:outputText styleClass="headerText" value="TITLE" /></f:facet>
       <h:outputText value="#{sch.title}" />
       </rich:column>
       <rich:column width="100px" id="trafficid" sortable="true" sortBy="#{sch.trafficId}" filterBy="#{sch.trafficId}" filterEvent="onkeyup" label="TRAFFIC_ID">
       <f:facet name="header"><h:outputText styleClass="headerText" value="TRAFFIC_ID" /></f:facet>
       <h:outputText value="#{sch.trafficId}" />
       </rich:column>
      
       </rich:extendedDataTable>
      
       </h:form>
      
       </rich:panel>
      
      </div>
      </body>
      </html>
      </f:view>


      Could someone help me?

      Thanks in advance.


        • 1. Re: Problem with rich:extendedDataTable on Modal Panel
          Nick Belaevski Master

          Hello,

          I guess the problem is because DataList.xhtml has a composition of an independent view including f:view tags, DTD reference, html and body tags. Please try to remove all that and check.

          Here is my working example (JSP):

          <?xml version="1.0" encoding="UTF-8"?>
          
          <jsp:root version="2.1" xmlns:jsp="http://java.sun.com/JSP/Page"
           xmlns:c="http://java.sun.com/jsp/jstl/core"
           xmlns:f="http://java.sun.com/jsf/core"
           xmlns:h="http://java.sun.com/jsf/html"
           xmlns:rich="http://richfaces.org/rich"
           xmlns:a4j="http://richfaces.org/a4j">
          
           <jsp:directive.page contentType="text/html;charset=UTF-8"
           pageEncoding="UTF-8" />
           <jsp:output omit-xml-declaration="no" doctype-root-element="html"
           doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
           doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
          
           <f:view>
           <html xmlns="http://www.w3.org/1999/xhtml">
           <body>
           <rich:modalPanel id="panel" width="850" height="500">
          
          
           <h:form>
           <a4j:commandButton value="close"
           oncomplete="#{rich:component('panel')}.hide()" />
          
           <rich:extendedDataTable id="table" value="#{forum5Bean.lotOfData}"
           var="item" width="580px" height="400px">
           <rich:column>
           <f:facet name="header">
           <h:outputText value="Flag" />
           </f:facet>
          
           <h:outputText value="#{item} - #{forum5Bean.time}"></h:outputText>
           <rich:toolTip mode="client">
           <h:outputText value="Tooltip" />
           </rich:toolTip>
           </rich:column>
          
           </rich:extendedDataTable>
           </h:form>
          
          
           </rich:modalPanel>
           <h:form>
           <a4j:commandButton value="submit" reRender="table"
           oncomplete="#{rich:component('panel')}.show()" />
           </h:form>
           </body>
           </html>
           </f:view>
          </jsp:root>