Heading
Description
Specify the text to show in the column heading. You can include HTML markup.
Adding HTML markup
Clicking the button next to the Heading property open a dialog to help you change the name
of a heading. You type HTML into this dialog or into the textbox next to the Heading property. If you want to
specify a certain font or background for the heading go to the Heading in-line style property.
Adding Foreign language support.
You can use <a5:t> and <a5:r> language tags in the heading property. The <a5:r></a5:r> language tags allow you to add multiple language definitions for different headings. Languages can be swapped out using the active language property in the UX properties section. Here is how this is done.
On the UX Controls page open the Data Controls menu and click [List] to add a list control to your component.
In the properties menu on the right click the 'List properties' property, in the List Properties section, to open the List Builder.
On the Data Source pane set the lists data source. This example uses an SQL data source type. The 'Connection string' is set to the Northwind database and the 'Table name' property has been set to 'Customers'. In the 'Field list property' the ContactName, Address, City, and Country fields have been selected.
Open the List Layout pane. Use the blue > arrow to move the fields from your data source from the Available Fields list into the Columns in List.
Highlight one of the fields in the Columns in List menu. In this case the 'Address' field.
In the Column Properties section find the Heading property. Define a name for a language placeholder for this property, like 'Address'. To designate that it is a language placeholder put <a5:r> </a5:r> tags around the name.
<a5:r>ContactName</a5:r>
On the UX Properties page view the 'Other' properties. Click the
button next to the 'Language definitions' property.
Click the 'Add Language' button. Name the new language.
Click the Refresh List of Placeholders button. This will add the placeholder you defined on the List Layout pane to the language definition.
The placeholder for the 'Address' field will appear. From the menu on the left, highlight the language you added and give the placeholder a value. This value will appear in the address header when this language is active. You can also use html character codes like these...
Address=住所
Define the same placeholder's value for the <Default> language and click OK
On the UX properties page in the 'Other' properties section locate the 'Active language' property and type the name of the language you added in Language definitions.
Run the component in Live Preview. You should see the address field now uses the value defined by the active language.
Change the 'Active language' to the default and the default value will be used for the placeholder.
Using Code Blocks in Headings
It is possible to use <%a5..> code blocks with the Heading property. Anything inside these code blocks will be seen as Xbasic. When the application is run, any Xbasic defined inside the code blocks will be evaluated on the server-side before any data is sent to the client. Using these code blocks in a list heading is not recommended. It is usually possible to achieve the same or better results by using the onRightClick on column title Javascript event, also located on the List Layout pane.