PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview
  • Column title
  • Multiline column title
  • Background image for the title area of column
  • Title-header of columns
  • Icons displayed in the columns
  • Displaying the sort icon
  • Customizing the "Magnifier", Sort, Popup Menu and Filter icons
  • Position of sort and search icons
  • Selection bar
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
The column title is an important element of a Table control. Indeed, the title of columns is used to perform operations regarding the appearance (ability to include images) as well as the features (filter, search).
This help page presents the available features:
Versions 20 and later
Android The Table control (and its columns) is now available for the Android applications.
iPhone/iPad The Table control (and its columns) is now available for the iPhone/iPad applications.
New in version 20
Android The Table control (and its columns) is now available for the Android applications.
iPhone/iPad The Table control (and its columns) is now available for the iPhone/iPad applications.
Android The Table control (and its columns) is now available for the Android applications.
iPhone/iPad The Table control (and its columns) is now available for the iPhone/iPad applications.
Column title

Multiline column title

By default, column title is displayed on a single line. For longer titles, you have the ability to use multiline column titles.
To define a multiline column title:
  1. Display the description window of Table control ("Table description" from the popup menu).
  2. In the "Details" tab, check "Multiline column title".
  3. Validate.
The column title is displayed on several lines by default.
To configure the management mode of column tile (singleline or multiline) :
  1. Display the description window of Table control ("Description" from the popup menu).Display the description window of Table control ("Table description" from the popup menu).
  2. In the "Details" tab, check or uncheck "Force the title in singleline (8)".
  3. Validate.
Notes:
  • The title of columns supports the RTF format and the graphic functions (gXXX functions).
  • Versions 15 and later
    In the window editor, the height of column titles can be modified with the mouse.
    New in version 15
    In the window editor, the height of column titles can be modified with the mouse.
    In the window editor, the height of column titles can be modified with the mouse.
  • The title of columns can be modified by programming with ..Title or with ..Caption.
  • Versions 19 and later
    The height of column titles can be modified by programming with ..TitleHeight.
    New in version 19
    The height of column titles can be modified by programming with ..TitleHeight.
    The height of column titles can be modified by programming with ..TitleHeight.
Windows Mobile

Background image for the title area of column

An image can be included in each title cell.
To customize the image of title area:
  1. Display the "Style" tab in the description window of Table control ("Description" from the popup menu).
  2. Select the "Border of column title" element.
  3. Open the "Border" combo box and select "Image (9-slice scaling image)".
  4. Click the "Right arrow" button found to the right of the "Border" combo box. A window for configuring the image of column title is opened.
  5. Select the image of border to use. This image can be selected in the image catalog. The image catalog only proposes the images that can be used as column title.Select the image of border to use by clicking the Drop-down button button:
    • The "Browse" option is used to select an image file accessible from your computer.
    • The "Catalog" button is used to choose an image found in the image catalog of WINDEV. The image catalog only proposes the images that can be used as column title.
  6. If the selected image contains several states, specify this number of states.
  7. Close the window for configuring the image of title cells.
  8. Validate.
Note: The "Column title border" element found in the "Style" tab can also be used to configure the height of title area.
Versions 18 and later
AndroidiPhone/iPad

Title-header of columns

You have the ability to define a title-header of columns. A title-header of columns is an additional title displayed above the title of one or more columns.
To define a title-header of columns:
  1. Display the "Details" tab in the description window of Table control ("Description" from the popup menu).
  2. Click "Edit the over-headers of columns".
  3. The different table columns are displayed in the window that is opened.
    In this window, you can:
    • 1: Add title-headers ("+" button) or delete title-headers ("-" button).
    • 2: Resize and merge the different cells of title-headers by hovering the separators.
    • 3: Rename the cells of title-headers by clicking them.
  4. Validate.
Notes:
  • The title-headers of columns can be created by programming with TableAddTitleHeader.
  • ..Merge is used to merge:
    • the cells of a Table control.
    • the titles of columns.
  • If the title-headers of columns are enabled, the modification of the caption of columns via the description window of the column is ignored: the caption must be modified in the edit window of title-headers of columns.
New in version 18
AndroidiPhone/iPad

Title-header of columns

You have the ability to define a title-header of columns. A title-header of columns is an additional title displayed above the title of one or more columns.
To define a title-header of columns:
  1. Display the "Details" tab in the description window of Table control ("Description" from the popup menu).
  2. Click "Edit the over-headers of columns".
  3. The different table columns are displayed in the window that is opened.
    In this window, you can:
    • 1: Add title-headers ("+" button) or delete title-headers ("-" button).
    • 2: Resize and merge the different cells of title-headers by hovering the separators.
    • 3: Rename the cells of title-headers by clicking them.
  4. Validate.
Notes:
  • The title-headers of columns can be created by programming with TableAddTitleHeader.
  • ..Merge is used to merge:
    • the cells of a Table control.
    • the titles of columns.
  • If the title-headers of columns are enabled, the modification of the caption of columns via the description window of the column is ignored: the caption must be modified in the edit window of title-headers of columns.
AndroidiPhone/iPad

Title-header of columns

You have the ability to define a title-header of columns. A title-header of columns is an additional title displayed above the title of one or more columns.
To define a title-header of columns:
  1. Display the "Details" tab in the description window of Table control ("Description" from the popup menu).
  2. Click "Edit the over-headers of columns".
  3. The different table columns are displayed in the window that is opened.
    In this window, you can:
    • 1: Add title-headers ("+" button) or delete title-headers ("-" button).
    • 2: Resize and merge the different cells of title-headers by hovering the separators.
    • 3: Rename the cells of title-headers by clicking them.
  4. Validate.
Notes:
  • The title-headers of columns can be created by programming with TableAddTitleHeader.
  • ..Merge is used to merge:
    • the cells of a Table control.
    • the titles of columns.
  • If the title-headers of columns are enabled, the modification of the caption of columns via the description window of the column is ignored: the caption must be modified in the edit window of title-headers of columns.
Icons displayed in the columns

Displaying the sort icon

In a sortable column, the sort icon is displayed when the user clicks the column. The sort icon indicates the sort direction of the column.
You also have the ability to permanently display a sort icon in the column. In this case, when the column is not sorted, an icon indicates to the user that a sort can be performed on this column.
To display the sort icon:
  1. Display the "Style" tab in the description window of Table control ("Description" from the popup menu).
  2. Select the "Border of column title" element.
  3. Select "Display the sort icon".
Windows Mobile

Customizing the "Magnifier", Sort, Popup Menu and Filter icons

In a column, several icons are used to indicate to the user whether the column is sortable, whether the column is sorted and in which direction, whether a search or a filter can be done in the column.
To customize the style of these elements:
  1. Display the "Style" tab in the description window of Table control ("Description" from the popup menu).
  2. Select the "Border of column title" element.
  3. Click the "Sort/Magnifier image" button and select the image that will be used for the magnifier.
    The size of this image must be set to 53 x 33 pixels and the image must contain the following elements:
    • Image of sortable column: 9 x 8 pixels
    • Image of sorted column: sorted in ascending order and in descending order (22 x 9 pixels for each drawing)
    • Image of magnifier: grayed, enabled and pressed (33 x 11 pixels for each drawing)
    • Image of popup menu (10 x 14 pixels)
    • Image of filter: grayed, enabled and pressed (33 x 11 pixels for each drawing)
    Click the "Sort/Magnifier image" button and select the image that will be used for the magnifier via the Drop-down button button ("Browse" or "Catalog" button).
    The size of this image must be set to 53 x 33 pixels and the image must contain the following elements:
    • Image of sortable column: 9 x 8 pixels
    • Image of sorted column: sorted in ascending order and in descending order (22 x 9 pixels for each drawing)
    • Image of magnifier: grayed, enabled and pressed (33 x 11 pixels for each drawing)
    • Image of popup menu (10 x 14 pixels)
    • Image of filter: grayed, enabled and pressed (33 x 11 pixels for each drawing)
For example:
Windows Mobile

Position of sort and search icons

The different icons displayed in the column title have a specific position:
  • the icons used to indicate to the user whether the column is sortable, whether the column is sorted and in which direction are displayed on the left.
  • the icons used to indicate whether a search or a filter can be performed in the column are displayed on the right.
To customize the position of these elements:
  1. Display the description window of column ("Description" from the popup menu).
  2. In the "Style" tab, select the "Border of column title" element.
  3. Click the "Position of Sort/Magnifier Image" image and specify the position of the different icons in relation to the border of the column title.
Selection bar
Minimum version required
  • Version 14
This page is also available for…
Comments
Click [Add] to post a comment