3 Replies Latest reply on Jan 17, 2009 4:38 PM by Gabriel Gomez

    dataTable dataScroller saveState Problem

    Gabriel Gomez Newbie

      Hi everyone,

      Sorry if this has already been asked, but when I searched the forum I couldn't find any response about the problem.

      BACKGROUND:
      I'm using rich:datatable and rich:datascroller to visualise and "check" information maintained on my managedBean. dataTable shows each row of information and user must check (h:selectBooleanCheckbox) to mark row as associated.

      PROBLEM:
      If user checks rows (Clicks on different selectBooleanCheckbox) in one page of the dataTable, then moves to other pages of the datatable and then returns to original page then all checks are gone.

      How do I "save the state" of what has been done on each page of the datatable?

      Plan B is to put an action on every selectBooleanCheckbox and force the update on the backingBean, searching the list and upgrading to TRUE or FALSE (whatever the case may be) each row but... if there’s "lots" of rows, the process could take too long :S

      Any advice that can point me in the rigth direction would be greatly appreciated :D

      Thanks in advance

      Sorry if this a noob question :P

      P.S: If you need my BackingBean or anything else, please let me know


      This is my XHTML page

      
      <?xml version="1.0" encoding="ISO-8859-1" standalone="yes" ?>
      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:c="http://java.sun.com/jstl/core"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core">
      
      <ui:composition template="/Views/Template/desktop.xhtml">
       <h:form id="formAsociacionItemHijo">
       <rich:modalPanel id="asociacion_ko" minHeight="100" minWidth="250"
       height="140" width="250" zindex="2000">
      
       <rich:panel header="ADVERTENCIA" style=" height : 110px;">
      
       <h:panelGrid id="cancelar_modificacion" columns="2">
       <h:graphicImage value="/images/warning.png" />
       <h:outputText value="Desea cancelar sin guardar" />
       <a4j:commandButton value="Aceptar"
       oncomplete="javascript:Richfaces.hideModalPanel('asociacion_ko')"
       action="#{asociacionItemsMBean.actionCancelarAsociarItems}"
       immediate="true" />
       <a4j:commandButton value="Cancelar"
       onclick="javascript:Richfaces.hideModalPanel('asociacion_ko')"
       immediate="true" />
       </h:panelGrid>
       </rich:panel>
       </rich:modalPanel>
      
      
       <a4j:jsFunction id="cambioLista" name="cambioLista"
       action="#{asociacionItemsMBean.cargarListaItemsAsociados}"
       reRender="listaItems">
       </a4j:jsFunction>
      
       <!-- FIN DECLARACION DE FUNCIONES -->
      
       <rich:panel id="panelCentral" header="Asociar Items Hijos"
       style=" height : 500px;">
      
       <a4j:keepAlive beanName="asociacionItemsMBean"></a4j:keepAlive>
      
       <rich:spacer height="10" />
      
       <rich:panel id="itemPadre" header="Informacion Item Padre">
       <h:panelGrid id="panelgridModal2" columns="2">
      
       <h:outputText value="Lista:" style="FONT-WEIGHT: bold;" />
       <h:outputText value="#{asociacionItemsMBean.nombreLista}"
       id="nombre_lista" style=" width : 246px;" />
      
       <h:outputText value="Nombre:" style="FONT-WEIGHT: bold;" />
       <h:outputText value="#{asociacionItemsMBean.itemPadre.nombreItem}"
       id="nombreItem" style=" width : 246px;" />
      
       <h:outputText value="Descripcion:" style="FONT-WEIGHT: bold;" />
       <h:outputText
       value="#{asociacionItemsMBean.itemPadre.descripcionItem}"
       id="descripcionItem" style=" width : 246px;" />
       </h:panelGrid>
       </rich:panel>
      
       <rich:spacer height="10" />
      
       <rich:messages passedLabel="Data is allowed to be stored."
       layout="list" styleClass="texto_mensaje">
       <f:facet name="header">
       <h:outputText value="Entered Data Status:"></h:outputText>
       </f:facet>
       <f:facet name="infoMarker">
       <h:graphicImage value="/images/passed.gif" />
       </f:facet>
       <f:facet name="errorMarker">
       <h:graphicImage value="/images/error.gif" />
       </f:facet>
       </rich:messages>
      
       <!-- COMBOBOX SELECCION DE LISTAS -->
      
       <h:panelGrid id="panelgrid" columns="2">
       <h:outputText value="Seleccione una lista" />
       <h:selectOneMenu id="coleccionList"
       value="#{asociacionItemsMBean.idLista}" onchange="cambioLista()">
       <f:selectItems id="itemSeleccionado"
       value="#{asociacionItemsMBean.coleccionListas}" />
       </h:selectOneMenu>
       </h:panelGrid>
      
       <rich:spacer height="10" />
      
       <!-- TABLA QUE LISTA LOS ELEMENTOS DE LA LISTA SELECCIONADA -->
      
       <rich:dataTable id="listaItems"
       onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
       onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
       var="item" rows="10"
       value="#{asociacionItemsMBean.listaItemsAsociados}" width="100%">
      
       <f:facet name="header">
       <rich:columnGroup>
       <rich:column colspan="4">
       <h:outputText id="tituloTabla"
       value="Contenido lista: #{asociacionItemsMBean.nombreLista}"
       style="FONT-WEIGHT: bold;" />
       </rich:column>
      
      
       <rich:column breakBefore="true">
       <h:outputText value="Nombre" />
       </rich:column>
       <rich:column>
       <h:outputText value="Descripcion" />
       </rich:column>
       <rich:column>
       <h:outputText value="Asociar" />
       </rich:column>
       </rich:columnGroup>
      
       </f:facet>
      
       <rich:column>
       <h:outputText value="#{item.nombreItem}" />
       </rich:column>
      
       <rich:column>
       <h:outputText value="#{item.descripcionItem}" />
       </rich:column>
       <rich:column>
       <h:selectBooleanCheckbox value="#{item.seleccionado}" />
       </rich:column>
       <f:facet name="footer">
       <rich:datascroller page="#{asociacionItemsMBean.paginaAsociacion}"
       for="listaItems" />
       </f:facet>
       </rich:dataTable>
      
      
       <h:panelGrid id="panelGridBotones" columns="2">
      
       <a4j:commandButton value="Guardar asociaciones"
       action="#{asociacionItemsMBean.actionAsociarHijosAPadre}" />
      
       <a4j:commandButton value="Cancelar"
       onclick="Richfaces.showModalPanel('asociacion_ko',{width:200, top:200})"
       immediate="true" />
       </h:panelGrid>
      
      
       <rich:messages passedLabel="Data is allowed to be stored."
       layout="list">
       <f:facet name="header">
       <h:outputText value="Entered Data Status:"></h:outputText>
       </f:facet>
       <f:facet name="infoMarker">
       <h:graphicImage value="/images/passed.gif" />
       </f:facet>
       <f:facet name="errorMarker">
       <h:graphicImage value="/images/error.gif" />
       </f:facet>
       </rich:messages>
      
       </rich:panel>
       </h:form>
      </ui:composition>
      </html>
      
      




        • 1. Re: dataTable dataScroller saveState Problem
          Gabriel Gomez Newbie

          Solved it

          Don’t know if this is the way it should be... but it works.

          Added onClick to selectBooleanCheckBox than points to a a4j:jsFunction

          <h:selectBooleanCheckbox value="#{item.seleccionado}"
           onclick="setCambioSeleccion()" />
          

          a4j:jsFunction calls an action that could do something if i needed... but in my case does nothing

          <a4j:jsFunction id="setCambioSeleccion" name="setCambioSeleccion"
           action="#{asociacionItemsMBean.actionCambiarSelectBooleanCheckBox}">
           </a4j:jsFunction>
          


          Oddly enough... it works fine and dataTable now saves state of dataTable when scrolling with dataScroller

          Sorry if this is just too dumb a solution or the worst thing to do… but since I got no responses… I activated my “Max Powerâ€�(from the Simpsons) programming mode.


          • 2. Re: dataTable dataScroller saveState Problem
            Nick Belaevski Master

            rich:datascroller has ajaxSingle="true" by default. That means that any external component won't be processed by AJAX request that is issued by the ajax-single component. Set it false and try.

            • 3. Re: dataTable dataScroller saveState Problem
              Gabriel Gomez Newbie

              nbelaevski

              Thanks for your reply.

              Yep, that did the trick. DataTable is now saving selectBooleanCheckbox state.