8 Replies Latest reply on Mar 3, 2008 4:36 PM by henry katz

    scrollableDataGrid inside a modalPanel?

    Matthew Lieder Apprentice

      Has anyone tried putting a scrollableDataGrid inside of a modalPanel? I've had zero luck so far -- the scrollableDataGrid just appears as an empty white box when inside the modalPanel.

        • 1. Re: scrollableDataGrid inside a modalPanel?
          Aleksej Yanul Newbie

          hi IGx89
          Thank you for submitting the issue, we'll check that:
          http://jira.jboss.com/jira/browse/RF-1126

          • 2. Re: scrollableDataGrid inside a modalPanel?
            Maksim Kaszynski Apprentice

            Currently, scrollabledataTable is built using visual dimensions of HTML elements. So if it is contained within invisble div (modal panel), it just cannot initialize properly.

            I suggest you to reRender scrollableDataTable once modalPanel is opened.

            • 3. Re: scrollableDataGrid inside a modalPanel?
              Matthew Lieder Apprentice

              That gets things closer to working (text displays in the whiteness), but the grid header only appears for a split second before disappearing and then throwing a JavaScript error :(

              • 4. Re: scrollableDataGrid inside a modalPanel?
                siew_edward Newbie

                IGx89,

                Did you figure out the problem with the header disappearing from the table? I am having the same problem when trying to re-render the scrollable datatable. Furthermore, the vertical scroller doesn't work properly - seems like some overlapping problem between the cell and the scroller.

                Thanks in advance.

                Ed.

                • 5. Re: scrollableDataGrid inside a modalPanel?
                  Matthew Lieder Apprentice

                  Unfortunately no; I just had to settle for a normal dataGrid with paging :/

                  • 6. Re: scrollableDataGrid inside a modalPanel?
                    Arbi Sookazian Master

                     

                    "IGx89" wrote:
                    That gets things closer to working (text displays in the whiteness), but the grid header only appears for a split second before disappearing and then throwing a JavaScript error :(


                    I was able to reproduce this using the following xhtml:

                    <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                     xmlns:s="http://jboss.com/products/seam/taglib"
                     xmlns:ui="http://java.sun.com/jsf/facelets"
                     xmlns:f="http://java.sun.com/jsf/core"
                     xmlns:h="http://java.sun.com/jsf/html"
                     xmlns:rich="http://richfaces.ajax4jsf.org/rich"
                     xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
                     xmlns:c="http://java.sun.com/jstl/core"
                     template="layout/template.xhtml">
                    
                    
                    
                    <ui:define name="body">
                    
                     <script type="text/javascript">
                     function showPanel() {
                     Richfaces.showModalPanel('mpNote',{width:450, top:200});
                     }
                     </script>
                    
                    
                     <rich:modalPanel id="mpNote" minHeight="200" minWidth="450" height="500" width="500" zindex="2000">
                     <h:form>
                    
                     <rich:scrollableDataTable id="sdt1" value="#{noteAction.getNoteLogList()}" var="myRow" width="500px">
                    
                     <rich:column>
                     <f:facet name="header">NoteText</f:facet>
                     <h:outputText value="#{myRow.noteText}"/>
                     </rich:column>
                    
                     <rich:column>
                     <f:facet name="header">TimeStamp</f:facet>
                     <h:outputText value="#{myRow.timeStamp}"/>
                     </rich:column>
                    
                     </rich:scrollableDataTable>
                    
                     <rich:dataTable value="#{noteAction.getNoteLogList()}" var="myRow">
                    
                     <rich:column>
                     <f:facet name="header">NoteText</f:facet>
                     <h:outputText value="#{myRow.noteText}"/>
                     </rich:column>
                    
                     <rich:column>
                     <f:facet name="header">TimeStamp</f:facet>
                     <h:outputText value="#{myRow.timeStamp}"/>
                     </rich:column>
                    
                     </rich:dataTable>
                     </h:form>
                     </rich:modalPanel>
                    
                     <a4j:form>
                     <a4j:commandButton value="show" onclick="showPanel();" reRender="sdt1"/>
                     </a4j:form>
                    
                     <BR/><BR/>
                    
                     <h:form>
                     <rich:scrollableDataTable value="#{noteAction.getNoteLogList()}" var="myRow" width="500px">
                    
                     <rich:column width="1000">
                     <f:facet name="header">NoteText</f:facet>
                     <h:outputText value="#{myRow.noteText}"/>
                     </rich:column>
                    
                     <rich:column>
                     <f:facet name="header">TimeStamp</f:facet>
                     <h:outputText value="#{myRow.timeStamp}"/>
                     </rich:column>
                    
                     </rich:scrollableDataTable>
                     </h:form>
                    
                    </ui:define>
                    </ui:composition>


                    • 7. Re: scrollableDataGrid inside a modalPanel?
                      Ilya Shaikovsky Master

                      Fixed in trunc (3.2.0 snapshots)

                      • 8. Re: scrollableDataGrid inside a modalPanel?
                        henry katz Newbie

                        Hi,

                        I have a scrollabledatatable within a modalpanel using 3.20 snapshot and still have to resize something to get the scrollabledatatable to display it's rows. This is not the main issue, however. I have instrumented the sdt with a a4j:support to detect click and grab the selection. The selection is being fired according to my log4j but the selection is empty? Here's some excerpts:

                        <ui:composition 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:c="http://java.sun.com/jstl/core"
                         xmlns:rich="http://richfaces.org/rich"
                         xmlns:a4j="http://richfaces.org/a4j">
                        
                         <rich:modalPanel autosized="true" height="400" id="searchResultsPanel">
                         <f:facet name="header">
                         <h:outputText value="Deployment Records"/>
                         </f:facet>
                         <f:facet name="controls">
                         <h:graphicImage value="/images/close.gif" style="cursor:pointer" onclick="javascript:Richfaces.hideModalPanel('searchResultsPanel')"/>
                         </f:facet>
                         <rich:scrollableDataTable rowKeyVar="rkv" value="#{dBCrudBean.myDataList}" var="sel" id="deployResultTable" selection="#{searchTblBean.selection}">
                         <a4j:support event="onRowClick" action="#{searchTblBean.takeSelection}" reRender="searchoutputpanel" onclick="javascript:Richfaces.hideModalPanel('searchResultsPanel')"/>
                         <rich:column>
                         <f:facet name="header"><h:outputText value="Req Id"/></f:facet>
                         <h:outputText value="#{sel.relrequest}"/>
                         </rich:column>
                         <rich:column>
                        ...
                        ...
                        
                         <h:outputText value="#{sel.functionalimpact}"/>
                         </rich:column>
                         </rich:scrollableDataTable>
                         </rich:modalPanel>
                        </ui:composition>


                        Here is the relevant output from console log in JBDS:

                        INFO: BEFORE APPLY_REQUEST_VALUES 2
                        [2008-03-03 16:16:39,912 261440] com.ml.beans.SubCompntBean.getSubcomplist(SubCompntBean.java:156) - subcomplist before size = 3
                        [2008-03-03 16:16:39,912 261440] com.ml.beans.SubCompntBean.getSubcomplist(SubCompntBean.java:160) - subcomplist after size = 3
                        [2008-03-03 16:16:39,912 261440] com.ml.beans.DBCrudBean.log(DBCrudBean.java:555) - getting my datalist, size = 4
                        [2008-03-03 16:16:39,912 261440] com.ml.beans.SearchTblBean.setSelection(SearchTblBean.java:45) - selection size = 0
                        Mar 3, 2008 4:16:39 PM org.exadel.jsf.PhaseTracker afterPhase
                        INFO: AFTER APPLY_REQUEST_VALUES 2
                        Mar 3, 2008 4:16:39 PM org.exadel.jsf.PhaseTracker beforePhase
                        INFO: BEFORE PROCESS_VALIDATIONS 3
                        Mar 3, 2008 4:16:39 PM org.exadel.jsf.PhaseTracker afterPhase
                        INFO: AFTER PROCESS_VALIDATIONS 3
                        Mar 3, 2008 4:16:39 PM org.exadel.jsf.PhaseTracker beforePhase
                        INFO: BEFORE UPDATE_MODEL_VALUES 4
                        Mar 3, 2008 4:16:39 PM org.exadel.jsf.PhaseTracker afterPhase
                        INFO: AFTER UPDATE_MODEL_VALUES 4
                        Mar 3, 2008 4:16:39 PM org.exadel.jsf.PhaseTracker beforePhase
                        INFO: BEFORE INVOKE_APPLICATION 5
                        [2008-03-03 16:16:39,927 261455] com.ml.beans.SearchTblBean.getSelectedDeploys(SearchTblBean.java:62) - selected deployes: 0
                        [2008-03-03 16:16:39,927 261455] com.ml.beans.SearchTblBean.getSelection(SearchTblBean.java:40) - selection has 0
                        [2008-03-03 16:16:39,927 261455] com.ml.beans.SearchTblBean.takeSelection(SearchTblBean.java:52) - selection size = 0
                        Mar 3, 2008 4:16:39 PM org.exadel.jsf.PhaseTracker afterPhase
                        INFO: AFTER INVOKE_APPLICATION 5
                        Mar 3, 2008 4:16:39 PM org.exadel.jsf.PhaseTracker beforePhase
                        INFO: BEFORE RENDER_RESPONSE 6


                        Here are some relevant excerpts from the SearchTblBean:
                         public List <CharmsDerived> getAllDeploys() {
                         synchronized (this) {
                         if (allDeploys == null) {
                         DBCrudBean searchdata = (DBCrudBean)FacesUtil.getRequestMapValue("dbCrudBean");
                         allDeploys = (List<CharmsDerived>)searchdata.getMyDataList();
                         }
                         }
                         return allDeploys;
                         }
                        
                         public SimpleSelection getSelection() {
                         logger.info("selection has " + selection.size());
                         return selection;
                         }
                        
                         public void setSelection(SimpleSelection selection) {
                         logger.info("selection size = " + ((selection != null) ? selection.size() : 0));
                         this.selection = selection;
                         }
                        
                         public String takeSelection() {
                         getSelectedDeploys().clear();
                         Iterator<SimpleRowKey> iterator = getSelection().getKeys();
                         logger.info("selection size = " + ((selection != null) ? selection.size() : 0));
                         while (iterator.hasNext()){
                         SimpleRowKey key = iterator.next();
                         logger.info("takeSelection found key " + key.intValue());
                         getSelectedDeploys().add(getAllDeploys().get(key.intValue()));
                         }
                         return null;
                         }
                        
                         public ArrayList<CharmsDerived> getSelectedDeploys() {
                         logger.info("selected deployes: " + ((selectedDeploys != null) ? selectedDeploys.size() : 0));
                         return selectedDeploys;
                         }
                        
                         public void setSelectedDeploys(ArrayList<CharmsDerived> selectedDeploys) {
                         this.selectedDeploys = selectedDeploys;
                         }


                        Any suggestions for where the selection went? It clearly is firing? The use case is a search form retrieves the records from database and displays into modalpanel. User picks individual record from modalpanel SDT selection and views detailed record in edit form to update.

                        Insights appreciated.

                        Regards,
                        Henry