Styling and Formatting Table Column Values

Post-processing Column Values

Sometimes the value of the data for a particular column is not displayable, or you would like to further process the value before displaying it. All Table column types have the ability for you to specify the following:

  • Format: If the column returns a string, will apply the Format string as an sprintf format string. If the column is a \QCubed\QDateTime type, it will apply it as a qFormat string.
  • PostMethod: If the value of the column is an object, will call the given method on the object, and the new value of the column will become the return value of the method.
  • PostCallback: If given, the PostCallback function will be called with the column value as a parameter, and the returned value will become the new column value.

HtmlEntities

By default, any text you provide as the column value will be passed through a call to htmlentities, so that it will be converted to HTML and displayed correctly in a browser. However, if your column is already returning html, you can turn off this processing by setting HtmlEntities to false.

Styling

There are a variety of ways to style a Table:

  • Use AddCssClass() to add a class to the control, and use css to style the html table. Modern css can now do most things that used to be done using row classes and javascript, including alternating background colors and hover effects.
  • Use HeaderRowCssClass, RowCssClass, and AlternateRowCssClass properties to assign classes to rows in the html table.
  • Assign a callable to the RowParamsCallback property that will return attributes for the <tr> tag for the row. The RowParamsCallback is passed the data item for the corresponding row from the DataSource, and should return an array that is keyed by attribute. For example, set the "class" attribute in the array to define the CSS class for the row. A null data item indicates a header row.
  • Each column has a CellStyler, HeaderCellStyler, and ColStyler that can be used to specify styles and attributes for the cell tags in the body rows, cell tags in the header row, and the <col> tags if you set RenderColumnTags on the table.
  • For even more control, you can assign a callable to the CellParamsCallback property to return html attributes for the cell tag on a row-by-row basis.
ProjectStart DateEnd DateMembersBalance
ACME Website Redesign03/01/04Thu, Jul 1, 2004Kendall Public afd, Alex1 Smith, Wendy Smith, Karen Wolfe, Samantha Jones(691)
State College HR System02/15/06Kendall Public afd, Mike Ho, Alex1 Smith, Karen Wolfe, Linda Brady, Jennifer Smith7,300
Blueman Industrial Site Architecture03/01/06Sat, Apr 15, 2006John Doe, Mike Ho, Wendy Smith, Samantha Jones, Jennifer Smith(1,701)
ACME Payment System08/15/05Thu, Oct 20, 2005John Doe, Kendall Public afd, Ben Robinson, Alex1 Smith, Samantha Jones, Brett Carlisle, Jacob Pratt(51)