+ Start a Discussion
philbophilbo 

How to embed HTML symbols (e.g. ' ' or '↑') into a bound tag

Hey,

I have a VF page, containing the following fragment:

<apex:column id="colId" ondblclick="myVSFn(id)" headerondblclick="myVSFn(id)">
  <apex:facet name="header">{!myColHdr}</apex:facet>
  <apex:outputText value="{!iObj.Field__c}"/>
</apex:column>

...This is embedded within a dataTable that populates this column in the usual way.    I'm trying to bind the column header to a controller property so that I can control it at run-time.  The controller method is:

public String myColHdr {
  get {
    return ( myColHdr == Null — 'COL HDR &nbsp; &darr;' : rsnHdr );
  }
  set;
}

Pretty straightforward - just for the purposes of testing - I'm trying to inject a couple of HTML symbols into that column header, in the hopes that it will show up on the page as 'COL HDR v'  ('v' representing a down-arrow here).  But instead, it is displayed verbatim, with the HTML symbols uninterpreted.  Looking at the resulting page source, it appears that the ampersands in the text are being converted to '&amp;'; i.e. the page src looks like 'COL HDR &amp;nbsp; &amp;darr;'

Is there a way around this?  How can I suppress this ampersand conversion?  I tried escaping them, quoting them, etc., to no avail.  I know there's an 'escape=False' attribute you can set on certain components, but not on this one.  Is there some way I can leverage this for a column header?

(The '&darr;' symbol was not chosen at random - I'm trying to work out a way to indicate on the screen whether the dataTable is sorted on that column, and whether it is Ascending or Descending).

Thanks!


Message Edited by philbo on 12-17-2008 02:08 PM
dchasmandchasman
You can leverage apex:outputText's escape attribute for just this kind of thing (by defaqult we HTML escape everything to prevent against cross site scripting attacks and such):

Code:
<apex:column id="colId" ondblclick="myVSFn(id)" headerondblclick="myVSFn(id)">
  <apex:facet name="header"><apex:outputText value="{!myColHdr}" escape="false"/></apex:facet>
  <apex:outputText value="{!iObj.Field__c}"/>
</apex:column>

 

philbophilbo
Yes - I can see how that works.

It doesn't quite meet my particular needs, though, for a couple of reasons:

  • The 'headeronclick' and 'headerondblclick' actions are broken on the apex:column component (and on all other applicable components as well, I think), so I can't invoke a table re-sort by clicking on a header cell (unfortunately).  Is there a timeline for making these events work, does anybody know?

  • I don't know of a way to allow a table to scroll while leaving its header row visible at all times.
Because of these things, I have taken a different approach - I spoof a table header by putting a separate one-row table directly above my data table, with columns constrained to the same widths, in its own separate apex:pageBlockSectionItem component.  The cells of this table are populated by my bound variables within apex:outputText components, so I can click on them AND control their contents.  Not the most elegant solution in the world, but it works at least (after a fashion)...
Walter@AdicioWalter@Adicio

dchasman wrote:
You can leverage apex:outputText's escape attribute for just this kind of thing (by defaqult we HTML escape everything to prevent against cross site scripting attacks and such):

Code:
<apex:column id="colId" ondblclick="myVSFn(id)" headerondblclick="myVSFn(id)">
<apex:facet name="header"><apex:outputText value="{!myColHdr}" escape="false"/></apex:facet>
<apex:outputText value="{!iObj.Field__c}"/>
</apex:column>

 
Thank you
"You can leverage apex:outputText's escape attribute"
This was very helpful.