How to show water mark in filter in primefaces?

Question

I have filters for columns.

Here i want to show water mark in filter (As Shown in figure in red circle)

I am using prime faces 3.4

I have tred this

<h:form id="parametersListForm" prependId="false">      
    <p:dataTable id="parameteresList" value="#{parameterController.lstParameter}" 
                     var="parameters" selectionMode="single"  
                     selection="#{parameterController.selectedParameter}" 
                     styleClass="tnt-main-table"> 

            <p:ajax event="rowSelect" update=":parameterDetailsForm"
                    listener="#{parameterController.onParametersRowSelect}" />

      <p:column id="colomnRefType" filterBy="#{parameters.beRefType}" 
                 headerText="#{msgs['parameters.beRefType.label']}"
                 filterMatchMode="contains">
                                <h:outputText value="#{parameters.beRefType}"/>
            <p:watermark value="Ref Type" 
                         forElement= ":parameteresList:colomnRefType_filter">
             </p:watermark>
        </p:column>
      </p:dataTable>              
    </h:form>

How can I achieve this?

Answer 1

There is an attribute forElement of p:watermark for that. The specifications state that forElement should contain jquery selector of the html input component. But according to these threads here and here, the forElement should strictly be only the client ID of the html input component.

So you can do following:

<p:dataTable id="battingStyleTable" ... ... ..>

    <p:column id="myColumn"
        filterBy="#{battingStyle.battingStyleString}" 
        filterMatchMode="contains">

        <f:facet name="header">Name</f:facet>
        <h:outputText value="#{battingStyle.battingStyleString}" />

        <p:watermark value="Watermark text"
            forElement='battingStyleTable:myColumn_filter'></p:watermark>
        <!-- Please note that the prependId of my form is false, and id of the datatable is battingStyleTable and id of the column is myColumn. Thats why the id of the textfield of the filter will be battingStyleTable:myColumn_filter. Please change it accordingly. If you can't do prependId="false" to your form then you must include form id in the start also, like myFormId:myDatatableId:myColumnId_filter -->
    </p:column>
    ...............
    ..........
    ................
</p:dataTable>