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

Problem with rich:extendedDataTable on Modal Panel

smilind Jan 28, 2009 1:18 PM

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

nbelaevski Jan 28, 2009 7:23 PM (in response to smilind)

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>