3 Replies Latest reply on Sep 20, 2007 7:58 AM by Ilya Shaikovsky

    Updating a row in dataTable

    dev aaa Newbie

      I am using Rich faces to display a dataTable.
      There are many rows in it, with a colum 'Actions'.

      <rich:dataTable
      onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
      onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
      cellpadding="0" cellspacing="0"
      width="550" border="0" value="#{CreateBean.urlList}" var="urlList1" binding="#{CreateBean.dataTable}" >
      <f:facet name="header">
      <rich:columnGroup >
      <rich:column >
      <h:outputText value="URL" />
      </rich:column>
      <rich:column>
      <h:outputText value="Actions" />
      </rich:column>
      </rich:columnGroup>
      </f:facet>
      <rich:columnGroup>
      <rich:column styleClass="style9"><h:outputText value="#{urlList1}" ></h:outputText></rich:column>
      <rich:column>
      <h:graphicImage value="../images/tab_actions_edit.gif" alt="Edit" />

      </rich:column>
      </rich:columnGroup>
      </rich:dataTable>

      The user can edit any row of the table.
      When the user clicks on 'Edit ' button. Only the particular row should become editable. The url should be displayed in the editable format.

      Can somebody suggest how it can be achieved.

      Thanks in advance

        • 1. Re: Updating a row in dataTable
          Viacheslav Garmash Newbie

          If don't stick on Ajax this task become rather simple: you could just replace outputText elements in the some row with inputText ones using ActionListener on "Edit" link. You also should show "Save" button for this row. Then by ActionListener on "Save" button you could save data into Model layer and replace inputText elements back with outputTexts.

          • 2. Re: Updating a row in dataTable
            dev aaa Newbie

            Thanks a lot for your input.

            I am new to JSF. It would be very nice if you can just detail out the Action Listener(replace outputText elements in the same row with inputText ones using ActionListener on "Edit" link).

            Thanks once again for your time.

            • 3. Re: Updating a row in dataTable
              Ilya Shaikovsky Master

              The simpliest example I can provide after a few minutes of work under my excisting table :

              <rich:dataTable value="#{capitalsBean.capitals}" var="cap">
               <rich:column>
               <a4j:outputPanel id="row1">
               <h:inputText value="#{cap.name}" rendered="#{cap.checked}"></h:inputText>
               <h:outputText value="#{cap.name}" rendered="#{not cap.checked}"></h:outputText>
               </a4j:outputPanel>
               </rich:column>
               <rich:column>
               <a4j:outputPanel id="row2">
               <h:inputText value="#{cap.state}" rendered="#{cap.checked}"></h:inputText>
               <h:outputText value="#{cap.state}" rendered="#{not cap.checked}"></h:outputText>
               </a4j:outputPanel>
               </rich:column>
               <rich:column>
               <h:selectBooleanCheckbox value="#{cap.checked}">
               <a4j:support event="onclick" reRender="row1,row2">
               <a4j:ajaxListener type="org.ajax4jsf.ajax.ForceRender"></a4j:ajaxListener>
               </a4j:support>
               </h:selectBooleanCheckbox>
               </rich:column>
               </rich:dataTable>
              


              My bean is session scoped. (Or should be saved through keepAlive)

              In general :
              1) checkBox fire an ajax request. It inverts its state. And corresponding rendered attributes - changes to inverted,

              So its pretty simple as you can see.