Truncating big text value in p:dataTable and exporting the table with the full text

Question

I am using Primefaces 3.5 with JSF 2 and have a dataTable:

<p:dataTable id="dataTable" var="refType"
        value="#{rtmUiController.listAllRefTypes()}" paginator="true"
        rows="10" filteredValue="#{rtmUiController.filteredRefTypes}"
        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink}
                           {PageLinks} {NextPageLink} {LastPageLink} 
                           {RowsPerPageDropdown}"
        rowsPerPageTemplate="10,25,50,100" resizableColumns="true"
        emptyMessage="No reference type found.">

The table contains the following column with a big text description which is currently truncated inline and displayed next to a link to popup a dialog with the full text:

<p:column filterBy="#{refType.description}" filterMatchMode="contains">
    <f:facet name="header">
        <h:outputText value="Description" />
    </f:facet>
    h:outputText value="#{refType.description.substring(30)}" />
    <p:commandLink id="descriptionLink" value="... (full text)"
                oncomplete="descriptionDialog.show()"
                update=":tabView:form1:descriptionPanel"
                rendered="#{not empty refType.description}">
                <f:setPropertyActionListener value="#{refType.description}"
                    target="#{flash.description}" />
    </p:commandLink>
</p:column>

<p:dialog widgetVar="descriptionDialog" resizable="false"
        header="Reference Type Description">
    <p:panelGrid id="descriptionPanel" columns="1">
        <h:outputText id="description" value="#{flash.description}" />
    </p:panelGrid>
</p:dialog>

The problem now is to export the table with the full text value to PDF or any other format using the standard Primefaces dataExporter functionality from the showcase as it exports only the exact content of the table:

<h:panelGrid>
    <p:panel header="Export Table Data">
        <h:commandLink>
            <p:graphicImage id="pdfImage" value="/resources/images/pdf.png" />
            <p:dataExporter type="pdf" target="dataTable" fileName="refTypes"
                    showEffect="fade" hideEffect="fade" />
            <p:tooltip for="pdfImage" value="Export table data to PDF file"
                    showEffect="fade" hideEffect="fade" />
        </h:commandLink>
    </p:panel>
</h:panelGrid>

Please could anybody advise me:

1. What is the best approach to truncate the text to display it in dataTable?

2. And how to export the same table but already with the full text value?

Answer 1

The pure CSS solution is here: http://ovaraksin.blogspot.com.ar/2012/12/elegant-truncated-text-with-ellipses-in.html

.truncate {
    max-width: 160px;
    width: 160 px\9;
}

.truncate > div {
    width: 160 px\9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    display: block;
    position: absolute;
}

So you need just to set the style on the page:

<p:column headerText="Description" sortBy="#{user.description}" styleClass="truncate">
    <h:outputText id="desc" value="#{user.description}"/>
    <pe:tooltip for="desc" value="#{user.description}"/>
</p:column>

It is not ideal in terms of fluid behavior but it is pretty simple and it works!