6 Replies Latest reply on Nov 30, 2007 12:10 PM by Paulo Manabe

    Change row background color after onclick event

    Paulo Manabe Newbie

      Hi all,

      I'm trying to create a datatable with onclick capabilities. When user click on row, a4j:support tag get the row data, set into list selectedRow and rerender the datatable, but I would like to change the row selected backgroundcolor. How can I do this?

        • 1. Re: Change row background color after onclick event
          Paulo Manabe Newbie

           

          <a4j:support id="ajaxSupportId" onsubmit="changeRowColor(this);" event="onRowDblClick" reRender="profitCenterTable" action="#{bidOfferAdjustment.testAction}"/>

          but when datable rerender, the row background color lost the color set.



          • 2. Re: Change row background color after onclick event
            Paulo Manabe Newbie

            Here the javascript

            function changeRowColor(row){
             row.style.backgroundColor = '#000000';
             }


            I couldn't understand why datatable didn't keep the color set before submit...

            Thanks in advance!

            • 3. Re: Change row background color after onclick event
              Dmitry Demyankov Novice

              Try using oncomplete instead of onsubmit.

              • 4. Re: Change row background color after onclick event
                Paulo Manabe Newbie

                it doesn't work because when I select a second row, the first one doesn't keep the background color.....

                • 5. Re: Change row background color after onclick event
                  Dmitry Demyankov Novice

                  It wont work that way.. as I understand after reRendering you've got a new table and it doesn't know anything about styles of previous table.. maybe you could solve your problem using rich:jQuery..

                  • 6. Re: Change row background color after onclick event
                    Paulo Manabe Newbie

                    I changed the selection with checkbox, but the problem stil happens. datatable keeps only the last row that I clicked, keeping only one row selected.

                    take a look into my datatable

                    <t:div style="margin-left:5px; padding-top:12px;text-align:center;">
                     <richfaces:dataTable id="profitCenterTable" width="600" border="1" var="pftData" rows="10" binding="#{searchResource.searchResourcesBean.dataTable}"
                     value="#{searchResource.searchResourcesBean.profitCenterData}" rendered="true" headerClass="table_hl_center" cellpadding="0"
                     cellspacing="0" rowClasses="grey_11" styleClass="contentResultTable"
                     onRowMouseOver="this.style.backgroundColor='#ABC8E2'" onRowMouseOut="this.style.backgroundColor='#FFFFFF'">
                    
                     <f:facet name="header">
                     <richfaces:columnGroup>
                     <richfaces:column>
                     <t:outputText value="" />
                     </richfaces:column>
                     <richfaces:column>
                     <t:outputText value="Code" />
                     </richfaces:column>
                     <richfaces:column>
                     <t:outputText value="Name" />
                     </richfaces:column>
                     <richfaces:column>
                     <t:outputText value="Owner" />
                     </richfaces:column>
                     <richfaces:column>
                     <t:outputText value="Legal Entity" />
                     </richfaces:column>
                     <richfaces:column>
                     <t:outputText value="Source System" />
                     </richfaces:column>
                     </richfaces:columnGroup>
                     </f:facet>
                    
                     <richfaces:column>
                     <t:selectBooleanCheckbox value="#{pftData.selected}" styleClass="table_hl_center" />
                     </richfaces:column>
                    
                     <richfaces:column>
                     <h:outputText value="#{pftData.code}"/>
                     </richfaces:column>
                    
                     <richfaces:column>
                     <h:outputText value="#{pftData.name}"/>
                     </richfaces:column>
                    
                     <richfaces:column>
                     <h:outputText value="#{pftData.owner}"/>
                     </richfaces:column>
                    
                     <richfaces:column>
                     <h:outputText value="#{pftData.legalEntity}"/>
                     </richfaces:column>
                    
                     <richfaces:column>
                     <h:outputText value="#{pftData.sourceSystemID}"/>
                     </richfaces:column>
                    
                     <a4j:support id="ajaxSupportId" reRender="profitCenterTable" event="onRowClick" action="#{searchResource.selectProfitCenterRow}" />
                     </richfaces:dataTable>
                    
                     <richfaces:spacer height="20" />
                    
                     <richfaces:datascroller align="center" for="profitCenterTable" maxPages="3" styleClass="grey_11" selectedStyle="font-weight:bold;"
                     renderIfSinglePage="false" fastStep="3" fastControls="hide" boundaryControls="hide">
                    
                     <f:facet name="previous">
                     <t:graphicImage value="/images/previous.gif" border="0"/>
                     </f:facet>
                     <f:facet name="next">
                     <t:graphicImage value="/images/next.gif" border="0"/>
                     </f:facet>
                    
                     </richfaces:datascroller>
                     </t:div>


                    here is my backing bean

                    public class ProfitCenterResource {
                    
                     private boolean selected;
                     private int id;
                     private String code;
                     private String name;
                     private String owner;
                     private String legalEntity;
                     private String sourceSystemID;
                    
                     public ProfitCenterResource(int id,String code,String name,String owner,String legalEntity,String sourceSystemID){
                     this.id = id;
                     this.code = code;
                     this.name = name;
                     this.owner = owner;
                     this.legalEntity = legalEntity;
                     this.sourceSystemID = sourceSystemID;
                     }


                    and here my action to change selected row
                    public String selectProfitCenterRow(){
                    
                     ProfitCenterResource pft = (ProfitCenterResource) searchResourcesBean.getDataTable().getRowData();
                     boolean status = !pft.isSelected();
                     pft.setSelected(status);
                     System.out.println(pft.getCode());
                    
                     return "";
                     }