CODEWITHSUNDEEP
jsfprimefacestogglebackground-colorcommandbutton
LStrike
LStrike

Reputation: 1648

Primefaces toggle color of dataGrid element by button click

I would like to change the background color of an datgrid element by clicking on a commandbutton. I have no idea at the moment how to do this.

When I click on the following button, the element of the grid item is added to a list and I want to change the color of the panel item to (for e.g. yellow), so that the user could see, this element is marked. 

<p:commandButton icon="ui-icon-pin-w" 
                                    action="#{cmsMarkedDocumentHandler.addDocument(_document)}"/>

This is the code for my dataGrid.

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:m="http://java.sun.com/jsf/composite/components/mmnet">

    <h:form id="docDataGridForm">
        <p:dataGrid id="docDataGrid" 
                value="#{cmsDocumentSearchHandler.documentList}" 
                var="_document" 
                columns="2"
                rows="10"   
                lazy="true" 
                paginator="true"  
                paginatorPosition="bottom"
                paginatorAlwaysVisible="false"
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                rowsPerPageTemplate="5,10,15,20,25,50">  

            <p:panel header="#{_document.shortName}" style="text-align:center">

                <h:panelGrid columns="2" style="width:100%" >  
                    <p:outputLabel value="#{labels.name}" />
                    <p:outputLabel value="#{_document.name}" />

                    <p:outputLabel value="#{labels.dateiName}" />
                    <p:outputLabel value="#{_document.fileName}"/>

                    <p:outputLabel value="#{labels.aenderungsDatum} #{labels.aenderer}" />
                    <m:outputDateUser valueDate="#{_document.modDate}" valueUser="#{_document.modUser}" />

                    <p:commandLink update=":eastPanel" title="#{labels.details}">  
                        <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />   
                        <f:setPropertyActionListener value="#{_document}"   target="#{documentHandler.entity}" />  
                    </p:commandLink> 

                    <m:cmsDocumentVersionLinks value="#{_document}" newLine="true" showDate="true"></m:cmsDocumentVersionLinks>

                    <p:outputLabel value="#{labels.merken}"></p:outputLabel>
                    <p:commandButton icon="ui-icon-pin-w" 
                                    action="#{cmsMarkedDocumentHandler.addDocument(_document)}"/>

                </h:panelGrid>

            </p:panel>
        </p:dataGrid>
    </h:form>

    <h:form id="createCmsDocument">
    <p:outputPanel rendered="#{documentCategoryHandler.entity != null}">
        <m:formButtons id="createCmSDocButton"
                        entity="#{documentHandler.entity}" 
                        renderCreate="true" 
                        renderAbort="false" 
                        renderDelete="false"
                        renderSave="false"
                        actionCreate="#{documentHandler.create()}"
                        updateCreate=":contentPanel :eastPanel"
                        rendered="true">
        </m:formButtons>
        </p:outputPanel>
    </h:form>


</ui:composition>

Upvotes: 1

Views: 1360

Answers (1)

jekennedy
jekennedy

Reputation: 1272

I had a similar requirement so I designed this solution.

In your cmsMarkedDocumentHandler class, use a HashSet to keep track of what is clicked:

    private Set<Document> selectedDocuments = new HashSet<Document>();
    // this will hold the currently selected document
    private Document document = new Document();

Your addDocument would be modified to toggle the elements on this HashSet:

public void addDocument() {
    // your other business logic
    if(this.selectedDocuments.contains(document)) {
        this.selectedDocuments.remove(document);
    } else {
        this.selectedDocuments.add(document);
    }
}

Need a new method to determine what CSS class applies to the current element in grid:

public String getStyleClass(final Document document) {
    if(this.selectedDocuments.contains(document)) {
        return "documentSelected";
    } else {
        return "";
    }
}

The primefaces code would look like this:

<p:dataGrid id="docDataGrid" value="#{cmsMarkedDocumentHandler.documentList}" columns="7" var="_document">
    <p:panel id="document-#{document.id}" styleClass="#{cmsMarkedDocumentHandler.getStyleClass(_document)}">
        <p:commandLink process="@this" action="#{cmsMarkedDocumentHandler.addDocument}" value="Add Document" update="@parent">  
            <f:setPropertyActionListener value="#{_document}" target="#{cmsMarkedDocumentHandler.document}" />  
        </p:commandLink>                                    
    </p:panel>
</p:dataGrid>

When the commandLink is clicked, addDocument will put the _document into the HashSet (or remove it if it's already there) then the update attribute of commandLink will cause the @parent to refresh, which calls getStyleClass to apply the appropriate selected/notselected class. Good Luck!

Upvotes: 1

Related Questions