3 Replies Latest reply on Jul 23, 2008 12:59 PM by Mikael Andersson

    Problems implementing an editable datatable

    zzzz8 Newbie

      I'm having issues creating an inline editable datatable using the RichFaces components. I am currently using RichFaces 3.2.0, Seam 2.0.2 GA, Facelets 1.0, and JBoss AS 4.2.2. My editable datatable has the following requirements:

      1. Inline row editing (i.e. I should be able to edit any input components on a row by row basis.
      2. Delete row functionality. I need a delete button/link component for each row that will allow me to delete that particular row
      3. Add row functionality. I need a single add row button/link that allows me to add a row to the last row of the datatable.
      4. I must be able to add the row even if the other rows fail validation.
      5. Adding the row does not remove or change the input values in the other rows.

      Unfortunately, I've been having problems getting these requirements met as a whole - and I'm wondering if this is even possible with RichFaces' current component set. I'm able to meet requirement 1 (inline row editing) with no issue. However, I cannot get the delete row functionality working (the button doesn't seem to even respond). The add row functionality works...up to a point. I am able to add a row, but it seems to change/remove the input values (of the previously entered values) of the other rows.

      Here's a snippet of my XHTML:

       <rich:dataTable id="pluPurchase"
       value="#{pluPurchaseDatamodelSet}" var="purchase"
       <f:facet name="header">Unit</f:facet>
       <h:inputText id="unit" required="true" value="#{purchase.unit}" />
       <rich:message for="unit" style="error" />
       <f:facet name="header">Unit Price</f:facet>
       <h:inputText id="unitPrice" required="true"
       value="#{purchase.unitprice}" />
       <rich:message for="unitPrice" style="error" />
       <f:facet name="header">Remove Item</f:facet>
       <a:commandButton action="#{plupurchaseDatamodel.removePlupurchase}"
       immediate="true" value="Remove">
       <s:conversationPropagation type="join" />
      <a:commandButton immediate="true"
       value="Add Purchase">
       <s:conversationPropagation type="join" />

      After I click on the "Add Purchase" button, the other rows' inputted values are wiped clean. The addPlupurchaseAction method returns null in this case. The immediate attribute does allow me to skip the validation of the other rows. Initially, the table has no rows. There is no effect after adding a row and then pressing the "Remove Item". I don't get any exceptions.

      What am I doing wrong here? Thanks!

        • 1. Re: Problems implementing an editable datatable
          Mikael Andersson Master


          When using the immediate attribute the form values won't (if i understand it correctly) get set on the backing bean (think they are kept in the uicomponent).
          I think this is the reason that you are loosing your data.

          How is your remove action able to determine which row to remove?
          Since you are using seam you might want to pass the var item in to the call reovePlupurchase(purchase).

          Do you have a rich:messages tag in the page, if not add one since that will get updated even for ajax requests.


          • 2. Re: Problems implementing an editable datatable
            zzzz8 Newbie

            I'm using the immediate attribute (immediate="true") so that it avoids the validation of the other rows. I want to allow the user to have a "half filled in" row (i.e. some input components may have some values, some may not, some may have some invalid values). The user should be able to add a row at any time, even if the other rows could possibly fail validation. I don't want to set values on the bean until the user actually clicks on another "submit" button. I understand I can remove the immediate attribute or set it to "false," but this would not meet my requirements of being able to add a row at any time.

            In terms of determining the current row, I'm using the @DataModelSelection component of Seam. Thus, I'm using @DataModel to back my list/set of datatable values. Somehow, the "delete" button just doesn't seem to work after I add a row (the datatable initially does not contain any rows). Seems like the Ajax request (when I take a look at the HTTP being passed around) doesn't even get sent. I've noticed this issue seems to crop up when I have buttons within a datatable after an ajax request - the buttons within the datatable seem to fail in sending Ajax requests. I'll try the parameter passing technique instead of @DataModelSelection tonight and see if that works.

            I do have a rich:messages component on my page. I don't see any errors/warnings pop up...

            Again, thanks for the help and any additional assistance is welcomed.

            • 3. Re: Problems implementing an editable datatable
              Mikael Andersson Master

              Afraid I can't think of a way of adding a row while keeping the partially entered data.

              You could try putting the add command button in another form. That wouldn't submit any of the stuff in the table, but again you would loose non submitted data.

              Not sure why the Remove command button stops working, you can try adding a a4j:log to the page and check what happens on the client side.

              good luck,