2 Replies Latest reply on Jun 5, 2009 10:06 AM by Michael Kalman

    rich:dataTable question - built in sort after row data is mo

    Michael Kalman Newbie

      I have a search form which generates results to a rich:dataTable that uses built-in sorting. I can re-submit the search form, which re-constructs the object underlying the dataTable's value attribute, and the dataTable successfully shows the new search results upon reRender.

      My problem is that after I sort a column, if I subsequently perform a new search, future column sorting ceases to work. The prior sort icon display state is preserved after the new search, and subsequent clicks on any column headings no longer trigger any calls to the methods designated by the sortBy attributes (but they do still trigger calls to the method designated by the binding attribute).

      Is there a way i can continue to use built-in sorting across my searches? Should I be using ExtendedDataModel or one of it's sub-classes for this purpose? (I am not filtering, I am generating a completely new row data -- is there an appropriate non-filtering example I could look at?)

      Thanks for your help,
      -Michael

        • 2. Re: rich:dataTable question - built in sort after row data i
          Michael Kalman Newbie

          Here is my rich:dataTable. (My search form is further below). They are currently part of a very large page with many tabs.

          I will create a simplified separate page in case this does not provide enough info by itself:

          <rich:dataTable id="assignTablesDetailsTable"
           value="#{fulfillmentController.filteredReservationList}"
           var="reservation"
           binding="#{fulfillmentController.reservationUIDataTable}"
           onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
           onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
           rowKeyVar="#{reservation.reservationId}"
           sortMode="single">
           <rich:column id="mcHeader" width="55px" style="text-align:center;">
           <f:facet name="header">
           <h:outputText id="mcHeaderColumn" value="Launch MC"
           styleClass="headerText" />
           </f:facet>
           <h:outputLink
           value="#{reservation.celebrationsLink}" target="_blank">
           <h:outputText id="mclink" value="MC"/>
           </h:outputLink>
           </rich:column>
           <rich:column width="85px" style="text-align:center;" id="reservationId" sortBy="#{reservation.reservationId}">
           <f:facet name="header">
           <h:outputText id="reservationIdHeaderColumn" value="a la carte Res #"
           styleClass="headerText" />
           </f:facet>
           <h:commandLink id="resIDLink" target="_self"
           immediate="true"
           action="#{reservationController.retrieveReservation}"
           onclick="javascript:Richfaces.showModalPanel('WorkingModalPanel')"
           oncomplete="javascript:Richfaces.hideModalPanel('WorkingModalPanel')">
           <h:outputText value="#{reservation.reservationId}"/>
           <f:param value="#{reservation.reservationId}" name="reservationId" />
           <f:param value="#{reservation.productType}" name="productType" />
           <f:param value="modify" name="action" />
           </h:commandLink>
           </rich:column>
          
           <rich:column width="140px" style="text-align:left;" id="fullName" sortBy="#{reservation.multiSortFullName}">
           <f:facet name="header">
           <h:outputText id="fullNameHeaderColumn" value="Name"
           styleClass="headerText" />
           </f:facet>
           <h:outputText id="reservationfullName" value="#{reservation.fullName}" />
           </rich:column>
           <rich:column width="75px" style="text-align:center;" id="tableType" sortBy="#{reservation.multiSortTableType}">
           <f:facet name="header">
           <h:outputText id="tableTypeHeaderColumn" value="Table Type"
           styleClass="headerText" />
           </f:facet>
           <h:outputText id="tableTypeTxt" value="#{reservation.tableType}" />
           </rich:column>
           <rich:column width="60px" style="text-align:center;" id="partySize" sortBy="#{reservation.multiSortPartySize}">
           <f:facet name="header">
           <h:outputText id="partySizeHeaderColumn" value="Party Size"
           styleClass="headerText" />
           </f:facet>
           <h:outputText id="partySizeTxt" value="#{reservation.partySize}"/>
           </rich:column>
           <rich:column id="currentStatus" width="60px" style="text-align:center;" sortBy="#{reservation.multiSortCurrentStatus}">
           <f:facet name="header">
           <h:outputText id="reservationStatusHeaderColumn" value="Status"
           styleClass="headerText" />
           </f:facet>
           <h:outputText id="reservationStatus" value="#{reservation.currentStatus}"/>
           </rich:column>
           <rich:column id="sdColumn" width="25px" style="text-align:center;" sortBy="#{reservation.multiSortSd}">
           <f:facet name="header">
           <h:outputText id="sdHeaderColumn" value="SD"
           styleClass="headerText" />
           </f:facet>
          
           <h:selectBooleanCheckbox id="sdChecked" disabled="true" style="background-color:#8791C3"
           value="#{reservation.sd}"
           rendered="#{reservation.sd }" />
          
           <h:selectBooleanCheckbox id="sd" disabled="true"
           value="#{reservation.sd}"
           rendered="#{!reservation.sd }" />
           </rich:column>
          
           <rich:column id="tableNumber" width="75px" style="text-align:center;" sortBy="#{reservation.multiSortTableNumber}">
           <f:facet name="header">
           <h:outputText id="tableHeaderColumn" value="Table No"
           styleClass="headerText" />
           </f:facet>
           <h:inputText id="table" readonly="true" size="10"
           value="#{reservation.tableNumber}"/>
           </rich:column>
          
           <rich:column id="wcColumn" width="25px" style="text-align:center;" sortBy="#{reservation.multiSortWc}">
           <f:facet name="header">
           <h:outputText id="wcHeaderColumn" value="WC"
           styleClass="headerText" />
           </f:facet>
          
           <h:selectBooleanCheckbox id="wcChecked" disabled="true" style="background-color:#8791C3"
           value="#{reservation.wc}"
           rendered="#{reservation.wc}" />
          
           <h:selectBooleanCheckbox id="wc" disabled="true"
           value="#{reservation.wc}"
           rendered="#{!reservation.wc}" />
          
           </rich:column>
          
          
           <rich:column id="vipColumn" width="25px" style="text-align:center;" sortBy="#{reservation.multiSortVip}">
           <f:facet name="header">
           <h:outputText id="vipHeaderColumn" value="VIP"
           styleClass="headerText" />
           </f:facet>
          
           <h:selectBooleanCheckbox id="vipChecked" disabled="true" style="background-color:#8791C3"
           value="#{reservation.vip}"
           rendered="#{reservation.vip}" />
          
           <h:selectBooleanCheckbox id="vip" disabled="true"
           value="#{reservation.vip}"
           rendered="#{!reservation.vip}" />
          
          
           </rich:column>
           <rich:column id="paidInFullColumn" width="25px" style="text-align:center;" sortBy="#{reservation.multiSortPaidInFull}">
           <f:facet name="header">
           <h:outputText id="paidInFullHeaderColumn"
           value="Paid In Full" styleClass="headerText" />
           </f:facet>
           <h:selectBooleanCheckbox id="paidInFullChecked" disabled="true" style="background-color:#8791C3"
           value="#{reservation.paidInFull}"
           rendered="#{reservation.paidInFull}" />
          
           <h:selectBooleanCheckbox id="paidInFull" disabled="true"
           value="#{reservation.paidInFull}"
           rendered="#{!reservation.paidInFull}" />
          
           </rich:column>
           <rich:column id="ticketPickedUpColumn" width="25px" style="text-align:center;" sortBy="#{reservation.multiSortTicketPickedUp}">
           <f:facet name="header">
           <h:outputText id="ticketPickedUpHeaderColumn" value="TP"
           styleClass="headerText" />
           </f:facet>
           <h:selectBooleanCheckbox id="ticketPickedUpChecked" disabled="true" style="background-color:#8791C3"
           value="#{reservation.ticketPickedUp}"
           rendered="#{reservation.ticketPickedUp}" />
          
           <h:selectBooleanCheckbox id="ticketPickedUp" disabled="true"
           value="#{reservation.ticketPickedUp}"
           rendered="#{!reservation.ticketPickedUp }" />
          
          
           </rich:column>
          
           <rich:column id="product" width="250px" style="text-align:left;" sortBy="#{reservation.multiSortProduct}">
           <f:facet name="header">
           <h:outputText id="productHeaderColumn" value="Product"/>
           </f:facet>
           <h:outputText id="reservationProduct" value="#{reservation.product}"/>
           </rich:column>
           <rich:column id="category" width="50px" style="text-align:left;" sortBy="#{reservation.multiSortCategory}">
           <f:facet name="header">
           <h:outputText id="categoryHeaderColumn" value="Category"
           styleClass="headerText" />
           </f:facet>
           <h:outputText id="reservationCategory" value="#{reservation.category}" />
           </rich:column>
          
           <rich:column id="guestRequests" width="80px" style="text-align:center;" sortBy="#{reservation.multiSortGuestRequests}">
           <f:facet name="header">
           <h:outputText id="guestRequestsHeaderColumn"
           value="Guest Request" styleClass="headerText" />
           </f:facet>
           <h:outputText id="guestRequestsText"
           value="#{reservation.guestRequests}" />
           </rich:column>
           <rich:column id="bookingStatus" width="80px" style="text-align:center;" sortBy="#{reservation.multiSortBookingStatus}">
           <f:facet name="header">
           <h:outputText id="gueststatusHeaderColumn" value="Change Status"
           styleClass="headerText" />
           </f:facet>
           <h:selectOneMenu id="gueststatus1"
           value="#{reservation.bookingStatus}"
           binding="#{fulfillmentController.selectOneMenu}"
           disabled="#{reservation.disableReservationStatus}">
           <a4j:support event="onchange" immediate="true"
           action="#{fulfillmentController.updateReservationStatus}"
           reRender="assignTablesDetailsTable,assignTablesErrorPanel"></a4j:support>
           <f:selectItems
           value="#{fulfillmentController.selectReservationStatusItems}" />
           </h:selectOneMenu>
          
           <h:outputText id="gueststatus" value="" />
           </rich:column>
           <rich:column id="UIDisplayServiceDate" width="50px" style="text-align:center;" sortBy="#{reservation.multiSortUIDisplayServiceDate}">
           <f:facet name="header">
           <h:outputText id="servicedateLabel" value="Date"
           styleClass="headerText" />
           </f:facet>
           <h:outputText id="reservationServiceDateValue"
           value="#{reservation.UIDisplayServiceDate}">
           <f:convertDateTime pattern="MM/dd/yy" timeZone="US/Eastern" />
           </h:outputText>
           </rich:column>
           <rich:column id="UIDisplayServiceTime" width="50px" style="text-align:center;" sortBy="#{reservation.multiSortUIDisplayServiceTime}">
           <f:facet name="header">
           <h:outputText id="serviceTimeLabel" value="Time"
           styleClass="headerText" />
           </f:facet>
           <h:outputText id="reservationServiceTimeValue"
           value="#{reservation.UIDisplayServiceDate}">
           <f:convertDateTime pattern="hh:mm aaa" timeZone="US/Eastern" />
           </h:outputText>
           </rich:column>
           <rich:column id="bookingDateTimeColumn" width="100px" style="text-align:center;" sortBy="#{reservation.multiSortBookingDate}">
           <f:facet name="header">
           <h:outputText id="bookingDateLabel" value="Book Date"
           styleClass="headerText" />
           </f:facet>
           <h:outputText id="bookTimeValue"
           value="#{reservation.bookingDate}">
           <f:convertDateTime pattern="MM/dd/yy hh:mm aaa" timeZone="US/Eastern" />
           </h:outputText>
           </rich:column>
           <rich:column id="massCancelReasonColumn" width="75px" style="text-align:center;" sortBy="#{reservation.multiSortMassCancelReason}">
           <f:facet name="header">
           <h:outputText id="massCancelReasonLabel" value="Mass Cancel Reason"
           styleClass="headerText" />
           </f:facet>
           <h:outputText id="massCancelReasonValue"
           value="#{reservation.massCancelReason}">
           </h:outputText>
           </rich:column>
           <rich:column width="45px" style="text-align:center;" id="cancelReservation">
           <f:facet name="header">
           <h:outputText id="cancelReservationHeaderColumn" value="Cancel"
           styleClass="headerText" />
           </f:facet>
           <h:commandLink id="resIDCancelLink" target="_self"
           rendered="#{!reservation.disableReservationStatus}"
           immediate="true"
           action="#{reservationController.retrieveReservation}"
           onclick="javascript:Richfaces.showModalPanel('WorkingModalPanel')"
           oncomplete="javascript:Richfaces.hideModalPanel('WorkingModalPanel')">
           <h:outputText value="Cancel"/>
           <f:param value="#{reservation.reservationId}" name="reservationId" />
           <f:param value="#{reservation.productType}" name="productType" />
           <f:param value="cancel" name="action" />
           </h:commandLink>
           </rich:column>
          
           <a4j:support id="a4jsupport_tableNumber" immediate="true"
           event="onRowDblClick"
           onsubmit="javascript:Richfaces.showModalPanel('WorkingModalPanel')"
           action="#{fulfillmentController.displayAvailableTables}"
           reRender="availableTablesModalPanel,availableTablesDataTable,assignTablesErrorPanel,a4jsupport_tableNumber"
           oncomplete="javascript:Richfaces.hideModalPanel('WorkingModalPanel');#{fulfillmentController.enableInventoryPanel}?Richfaces.showModalPanel('availableTablesModalPanel'):Richfaces.hideModalPanel('availableTablesModalPanel')" />
          
          </rich:dataTable>
          </div>
          </div>
          <!-- /a4j:outputPanel -->
          </rich:panel>



          And here is my search form. fulfillmentController.searchReservations constructs a new List object that is readable through fulfillmentController.filteredReservationList (which has no connection to richfaces filtering; perhaps this was an unfortunate choice of name)


          <h:form id="searchForReservationsForm" style="margin: 0px 0px 0px 0px; padding:0; display:inline;">
          
          <table border="0" cellpadding="0" cellspacing="0" width="500px" align="left">
          <tbody>
          <tr>
           <td align="center">
           <c:forEach var="error" items="${fulfillmentController.searchValidationErrors}">
           <h:outputText
           value="${error}" styleClass="errors"
           rendered="#{fulfillmentController.validationErrors}" /><br/>
           </c:forEach>
          </td>
          </tr>
          <tr>
           <td align="center">
           <rich:panel id="searchForReservationsPanel"
           bodyClass="searchForReservationsPanelBody" headerClass="searchForReservationsPanelHeader">
           <f:facet name="header"><h:outputText id="searchForReservationsLabel" value="Search For Reservations"/></f:facet>
           <table border="0">
           <tbody>
           <tr>
           <td><h:outputText id="searchForResSelectFacilityID" value="Facility:" styleClass="searchForReservationsSelectOneLabel"/></td>
           <td>
           <h:selectOneMenu id="selectedEventSearchReservationID2" value="#{fulfillmentController.selectedVenue}" styleClass="searchForReservationsSelectOneMenu">
           <f:selectItems id="selectEventSearchReservationID2" value="#{fulfillmentController.venueOptions}" />
           </h:selectOneMenu>
           </td>
           </tr>
           <tr>
           <td>
           <h:outputText id="searchForResSelectProductID" value="Product:" styleClass="searchForReservationsSelectOneLabel"/>
           </td>
           <td>
           <h:selectOneMenu id="selectedEventSearchReservationID3" value="#{fulfillmentController.selectedEvent}" styleClass="searchForReservationsSelectOneMenu">
           <f:selectItems id="selectEventSearchReservationID3" value="#{fulfillmentController.eventOptions}" />
           </h:selectOneMenu>
           </td>
           </tr>
          
           <tr>
           <td>
           <h:outputText id="statusReservationsSelectOneLabelID" value="Status" styleClass="searchForReservationsSelectOneLabel"/>
           </td>
           <td>
           <h:selectOneMenu id="selectedSearchResStatusID" value="#{fulfillmentController.selectedSearchReservationStatus}" styleClass="searchForReservationsSelectOneMenu">
           <f:selectItems id="selectSearchResStatusID" value="#{fulfillmentController.selectSearchReservationStatusItems}" />
           </h:selectOneMenu>
           </td>
           </tr>
          
          
           <tr>
           <td><h:outputText id="searchForReservationsDateRangeOutput" value="Date:" /></td>
           <td>
           <h:inputText id="searchForReservationsFromDateInput" size="12" value="#{fulfillmentController.reservationFromDate}" >
           <f:convertDateTime pattern="MM/dd/yyyy" timeZone="US/Eastern"/>
           </h:inputText>
           <a4j:commandButton id="fromDateButton" image='../images/cal.gif'> </a4j:commandButton>
          
             <h:outputText id="searchForReservationIDFulfilment" value="to" />  
           <h:inputText id="searchForReservationsToDateInput" size="12" value="#{fulfillmentController.reservationToDate}" >
           <f:convertDateTime pattern="MM/dd/yyyy" timeZone="US/Eastern"/>
           </h:inputText>
           <a4j:commandButton id="toDateButton" image='../images/cal.gif'> </a4j:commandButton>
          
          
           </td>
           </tr>
           <tr>
           <td><h:outputText id="searchForReservationsTimeRangeOutput" value="Time:" /></td>
           <td>
           <h:selectOneMenu id="searchForReservationsTimeSelectOneMenuID" styleClass="searchForReservationsTimeSelectOneMenu" value="#{fulfillmentController.reservationFromTime}">
           <f:selectItems id="fulfilmentTimeoptions1" value="#{fulfillmentController.timeOptions}" />
           </h:selectOneMenu>
             <h:outputText id="toFulfilmentID" value="to"></h:outputText>  
           <h:selectOneMenu id="searchForReservationsTimeSelectOneMenuID1" styleClass="searchForReservationsTimeSelectOneMenu" value="#{fulfillmentController.reservationToTime}">
           <f:selectItems id="fulfilmenttimeOptions" value="#{fulfillmentController.timeOptions}" />
           </h:selectOneMenu>
           </td>
           </tr>
           </tbody>
           </table>
           </rich:panel>
           </td>
          </tr>
          </tbody>
          </table>
          <div id="location_lowerbuttons">
           <table>
           <TR >
           <td align="left" width="200">
           <!-- Cache Table Data button was here -->
           <!-- style="margin:0px 0px 0px 0px" -->
           <!-- action = fulfillmentController . cacheAssignTables -->
           </td>
           <td align="left" width="372">
           <a4j:commandButton id="rstCommandButton" value="Reset"/>
           </td>
           <td align="right" width="572">
           <a4j:commandButton id="srchCommandButton" value="Search"
           action="#{fulfillmentController.searchReservations}"
           onclick="javascript:Richfaces.showModalPanel('WorkingModalPanel')"
           oncomplete="javascript:Richfaces.hideModalPanel('WorkingModalPanel')"
           reRender="fulfillReservationTabPnl"/>
           </td>
           </TR>
           </table>
          
          </div>
          </h:form>