title: Primefaces toggle color of dataGrid element by button click
body: <p>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.</p>
  
  <p>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>
  
  <pre><code>&lt;p:commandButton icon="ui-icon-pin-w" 
                                      action="#{cmsMarkedDocumentHandler.addDocument(_document)}"/&gt;
  </code></pre>
  
  <p>This is the code for my dataGrid.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;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"&gt;
  
      &lt;h:form id="docDataGridForm"&gt;
          &lt;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"&gt;  
  
              &lt;p:panel header="#{_document.shortName}" style="text-align:center"&gt;
  
                  &lt;h:panelGrid columns="2" style="width:100%" &gt;  
                      &lt;p:outputLabel value="#{labels.name}" /&gt;
                      &lt;p:outputLabel value="#{_document.name}" /&gt;
  
                      &lt;p:outputLabel value="#{labels.dateiName}" /&gt;
                      &lt;p:outputLabel value="#{_document.fileName}"/&gt;
  
                      &lt;p:outputLabel value="#{labels.aenderungsDatum} #{labels.aenderer}" /&gt;
                      &lt;m:outputDateUser valueDate="#{_document.modDate}" valueUser="#{_document.modUser}" /&gt;
  
                      &lt;p:commandLink update=":eastPanel" title="#{labels.details}"&gt;  
                          &lt;h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" /&gt;   
                          &lt;f:setPropertyActionListener value="#{_document}"   target="#{documentHandler.entity}" /&gt;  
                      &lt;/p:commandLink&gt; 
  
                      &lt;m:cmsDocumentVersionLinks value="#{_document}" newLine="true" showDate="true"&gt;&lt;/m:cmsDocumentVersionLinks&gt;
  
                      &lt;p:outputLabel value="#{labels.merken}"&gt;&lt;/p:outputLabel&gt;
                      &lt;p:commandButton icon="ui-icon-pin-w" 
                                      action="#{cmsMarkedDocumentHandler.addDocument(_document)}"/&gt;
  
                  &lt;/h:panelGrid&gt;
  
              &lt;/p:panel&gt;
          &lt;/p:dataGrid&gt;
      &lt;/h:form&gt;
  
      &lt;h:form id="createCmsDocument"&gt;
      &lt;p:outputPanel rendered="#{documentCategoryHandler.entity != null}"&gt;
          &lt;m:formButtons id="createCmSDocButton"
                          entity="#{documentHandler.entity}" 
                          renderCreate="true" 
                          renderAbort="false" 
                          renderDelete="false"
                          renderSave="false"
                          actionCreate="#{documentHandler.create()}"
                          updateCreate=":contentPanel :eastPanel"
                          rendered="true"&gt;
          &lt;/m:formButtons&gt;
          &lt;/p:outputPanel&gt;
      &lt;/h:form&gt;
  
  
  &lt;/ui:composition&gt;
  </code></pre>