LiveCode LessonsLiveCode LessonsHow to - LiveCode Marketplace Products Data Grid HelperHow Do I Create A Column With A Word Wrapping Header Text?

How Do I Create A Column With A Word Wrapping Header Text?

By default, the header area of a data grid is not word wrapped making it in effect restricted to a single line entry. For short lines of text, this does not present a problem. But sometimes the header text cannot be short.

DGH now allows you customize the data grid header display to allow header labels to be word wrapped and thus allows for longer text strings.

Preparation

With a data grid on your stack, double-click on it to open DGH.

Expand the Columns topic and click the Edit... button for the Columns Builder... property.

Create some new columns inside the data grid. For this example we will create three.

Select column 3 and expand the Columns topic in the Property list.

Double-click in the Value area next to the Label item in the Columns topic.

Enter a long label, such as "This is a very long label for a column header".

As it stands, the text for the header is way too long to fully show in the column header space. Of course we could make the column wider, but this may not be desirable.

Rather than changing column widths, we will word wrap the text in the header area.

Customize The Column Header Template

To display this long string we will word wrap the text in the header area.

To change the properties of the header label to allow word wrap, we need to customize the header template for this column.

Expand the Column Header Controls topic (1).

Double-click on column 3's header in the Preview area to open the Template Area for the column. (We could also just click on the reveal arrow to open the template area.)

We are customizing the Header so we need to change the Column Content template to Header, using the popup menu (2).

Now that the header template is active, drag and drop the Column Label control (1) from the Label Header (2) line to inside the Template Area (3).

Note: Even though it may not be visible here, DGH has created all the other controls necessary to enable our new custom header to behave in the same way as a standard data grid table header so, for example, we will able to click on our new header and sort its column just as we would expect.

Click the Update button to apply this change to DGH's Column Builder Preview. (3)

Once updated, the Update button is disabled.

Now click the Apply button to apply the changes the selected data grid. (1)

Then click the Grid (2) button to close the Column Builder view and return to the Table Properties view.

Change The Header Height for Testing The Result

The standard header properties have been set to expect a single line of text and will not allow us to see any text flowing over more than one line (as a result of our change) and so will need to be modified.

Adjust the data grid to better show column 3. Notice how we only see a single truncated line for the header.

Expand the Header topic in the Table Properties view and locate the Header Height property.

Double-click in the text entry area and enter a larger value, such as 55 and press <enter> (or <tab>) to accept the value.

The data grid, with our custom header for column 3 will immediately effect this change and the label text is displayed word wrapped as desired.

0 Comments

Add your comment

E-Mail me when someone replies to this comment