Customizing the interface of a Table control

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

Help

Editors

Controls (window/page/report)

Controls

Table control

Browsing table

Memory table

Table on source

Customizing the interface of a Table control

Overview

Customization

See also

AAF: Automatic filter on the columns of Table controls

AAF: Handling the columns of a Table control

AAF: Increasing the height of the rows in the Table or Looper controls

Break in a Table control

Characteristics of Table controls in a page

Characteristics of Table controls in a window

Combo Box columns in Table controls

Combo Box columns in the Table controls (prefix syntax)

Content of the Table control

Customizing the interface of a Table control

Defining colors in Table controls

Events associated with Table controls

Popup menu associated with Table controls and their columns (AAF)

Programming custom calculations in Table controls

Programming custom calculations in Table controls (prefix syntax)

Properties associated with the Table control

Properties associated with the breaks of a Table control

Table controls in "Server + AJAX" mode

The Table control

The Table control on mobile devices (Android and iOS)

The different types of Table controls: populated programmatically, with or without access to the data source

Overview
Customization
Background color of even rows and odd rows
Image of selection bar and image of hover bar
Image of scrollbars
Image of borders of Table control

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

Customizing the interface of a Table control

Overview

In a Table control, you have the ability to customize the following elements:

the color of even rows and odd rows.
the selection bar and the hover bar.
the title of columns (images, sort icons, magnifier, filter, …)
the vertical and horizontal scrollbars.
the outside and inside borders of table.

Remark: Customizing these elements allows you to apply a "Vista" style to the computers that do not run Windows Vista. The skin templates supplied with WINDEV contain examples of reusable and modifiable images.

Customization

Background color of even rows and odd rows

You can differentiate the rows in a Table control by specifying a specific color for even and odd rows.

To specify the background color of the rows:

Go to the "Style" tab in the Table control description window ("Description" in the popup menu).
Select the "Colors of even rows" or "Colors of odd rows" element.
Select the background color to use ("Background color" combo box).

Image of selection bar and image of hover bar

An image can be used to easily view the selected row and the hovered row.

To use an image for the selection bar and for the hover bar:

Go to the "Style" tab in the Table control description window ("Description" in the popup menu).
Select the "Selected row" or "Hovered row" element.
Open the "Border" combo box and select "Image (9-slice scaling image)".
Click the "Right arrow" button found to the right of the "Border" combo box. A window for configuring the image of the bar is opened.
Select the image to use by clicking the 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.
If the selected image contains several states, specify this number of states.
Close the window for configuring the image of the bar.

Remark: You have the ability to display the selection bar on some table columns only. For more details, see Characteristics of table columns.

Remarks:

Only the image associated with the selection bar will be taken into account.
The image format must supported by the current platform.

Image of scrollbars

An image can be used to represent the vertical scrollbar and the horizontal scrollbar.

To use an image for the scrollbars:

Go to the "Style" tab in the Table control description window ("Description" in the popup menu).
Select the "Scrollbar" element.
Open the "Border" combo box and select "Image (9-slice scaling image)".
Click the "Right arrow" button found to the right of the "Border" combo box. A window for configuring the image of scrollbars is opened.
Select the images to use by clicking the 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.
These images must respect the following format:
- Vertical scrollbar: Size of image: 60 x 128 pixels.
- Horizontal Scrollbar: Size of image: 384 x 47 pixels.
Close the window for configuring the image of scrollbars.

Image of borders of Table control

A specific image can be used for the borders of Table control.

To use an image for the borders of Table control:

Go to the "Style" tab in the control description window ("Description" in the popup menu).
Select the "Outside border" or "Inside border" element.
Open the "Border" combo box and select "Image (9-slice scaling image)".
Click the "Right arrow" button found to the right of the "Border" combo box. A window for configuring the image of the border is opened.
Select the image to use by clicking the 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.
To increase the thickness of border, all you have to do is increase its overflow.
If the selected image contains several states, specify this number of states.
Close the window for configuring the image of the border.