PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview
  • Initial status of Table control
  • Details of display options
  • Selection mode
  • Display options
  • Scrollbars in a Table control
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 Table control is used to display and/or type information. This information can come from a data source, from a WLanguage variable, or it can be stored.
WEBDEV proposes 3 operating modes for the Table controls:
  • Standard table.
  • Ajax table.
  • Browser table.
This help page presents the main settings that can be defined for a Table control found in a page:
You also have the ability to define the data source displayed in the control. See Content of Table control for more details.
Initial status of Table control
The initial status of the Table control can be:
Initial status
This initial status is defined when creating the control. It can be modified at any time in the "Details" tab of the characteristics of the Table control.
The different possibilities are as follows:
  • Visible: If this option is checked, the Table control will be visible. If this option is unchecked, the Table control will be hidden. This option can be modified by programming with ..Visible.
  • For the Browser or Ajax Table controls, the following options are also available:
    • Editable/Active: The user will be able to perform an input in the control columns if these columns are in edit.
    • Grayed: The Table control and its columns will be grayed. The user will not be able to enter information in the control.
    • Selection (without edit): The user will not be able to perform an input in the control columns. A control row can be selected:
      • by clicking this row.
      • by using TableSelectPlus.
        The row will be selected via the selection bar.
        Note: The value of the Table control corresponds to the selected row. The code for row selection is run for each selection.
    • No edit, no selection: The user will not be able to perform an input in the control columns. A control row can only be selected by programming with TableSelectPlus. This row will be selected via the selection bar. The user will not be able to modify the position of the selection bar.
      Note: The value of the Table control corresponds to the selected row.
      Tip: This option is recommended when a row must be highlighted via the selection bar.
Details of display options

Selection mode

The selection modes define how a row of the Table control can be selected by the user or by programming. This selection mode is defined when creating the control. It can be modified at any time in the "GUI" tab of the characteristics of the Table control.
The available selection modes are as follows:
Selection mode
  • No selection: No selection bar will be displayed, however the selected row will have focus (it will be bordered by dots). A row can be selected by clicking this row or by programming.
  • Single selection: The selected row will be displayed underneath the selection bar. A row can be selected by clicking this row or by programming.
  • Multi-selection: You have the ability to select several rows simultaneously:
    • with the SHIFT key if the rows are consecutive or with the CTRL key if the rows are not consecutive.
    • by programming.
      In this case, the number of selection bars is equal to the number of selected rows.
Notes:
  • A WLanguage error will occur if you try to perform a multiple selection by programming while the selection mode of control is set to "Single selection".
  • Table control in Standard mode: the multiple selection is available for the browsing Table controls only.
Multi-selection case: The selected elements will be retrieved by browsing the rows selected in the control. TableSelectCount is used to find out the number of rows selected in the Table control:
// Traces the content of selected rows
i is int
NbSelected is int = TableSelectCount(TABLE_Product)
FOR i = 1 to NbSelected
Trace("Selected row: " + i)
END

Display options

The display options ("Details" tab) are used to define:
  • the display mode of the Table control (title of columns displayed).
  • the selection mode of a row in the Table control (presence of a radio button and/or selection bar).
  • the presence of a popup menu.
Display options
The available options are as follows:
  • With column title: the caption defined for the columns is used as column title.
    Versions 16 and later
    Note: The height of the column title can be specified in the "General" tab of the Table control description. This height can also be modified in the editor, with the mouse. If a background image is associated with the title of the column, the image is automatically generated with the specified size.
    New in version 16
    Note: The height of the column title can be specified in the "General" tab of the Table control description. This height can also be modified in the editor, with the mouse. If a background image is associated with the title of the column, the image is automatically generated with the specified size.
    Note: The height of the column title can be specified in the "General" tab of the Table control description. This height can also be modified in the editor, with the mouse. If a background image is associated with the title of the column, the image is automatically generated with the specified size.
    Note: The height of the column title can be specified in the "GUI" tab of the description of the Table control. This height can also be modified in the editor, with the mouse. If a background image is associated with the title of the column, the image is automatically generated with the specified size.
  • Versions 19 and later
    If the option "With column title" is selected, the "Edit the over-headers of columns" button is used to define the additional titles 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 the Table control ("Description" from the popup menu).
    2. Click the "Edit the title-headers of columns" button.
    3. The different table columns are displayed in the window that is opened.
      Title-header of columns

      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.
      Note: 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 19
    If the option "With column title" is selected, the "Edit the over-headers of columns" button is used to define the additional titles 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 the Table control ("Description" from the popup menu).
    2. Click the "Edit the title-headers of columns" button.
    3. The different table columns are displayed in the window that is opened.
      Title-header of columns

      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.
      Note: 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.
    If the option "With column title" is selected, the "Edit the over-headers of columns" button is used to define the additional titles 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 the Table control ("Description" from the popup menu).
    2. Click the "Edit the title-headers of columns" button.
    3. The different table columns are displayed in the window that is opened.
      Title-header of columns

      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.
      Note: 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.
  • With radio button: a radio button is found in front of each row of the Table control. This radio button is used to view and/or select the current row.
    This option is available for the Table controls in standard mode only.
  • Managing a selection bar: a selection bar is used to view and/or select the current row.
    This option is available for the Table controls in standard mode only.
  • Popup menu: a popup menu associated with the control ( Popup Menu icon ) is displayed. This popup menu will allow the Web user to export the content of the Table control to an Excel, Word or XML file (with style sheet). This file will be downloaded onto the computer of the Web user.
    The icon representing the popup menu can be customized: to do so, specify the path of the requested image in the "Style" tab of the description of the Table control ("Image of popup menu" option). The size of the image used must be 16 pixels x 15 pixels. The icon representing the popup menu can be customized: to do so, specify the path of the requested image in the "Style" tab of the description of the Table control ("Other" element). The size of the image used must be 16 pixels x 15 pixels.
    This option is available for the Table controls in standard and Ajax modes only.
Example: Classic Table control with title of columns, management of a selection bar, a radio button and a popup menu:
Table control
Scrollbars in a Table control
The scrollbar support depends on the implementation mode of the Table control: Classic, Ajax or Browser.
For a Classic Table control, the Table control does not include any scrollbars. On the other hand, you can define a maximum number of rows per page ("General" tab in the Table control description window). In this case, a Pager control is automatically created and associated with the Table control. The pager buttons allow the user to display the content of the Table control.
For an Ajax table, the Table control displayed in the page will look like a Windows Table control. Scrollbars will be displayed. They will allow the user to see all the elements found in the control. The scrollbars are configured in the "General" tab of the description window of Table control.
You can:
  • Display an unlimited number of rows: in this case, the Table control will not have any vertical scrollbar.
  • Versions 19 and later
    Put everything in the browser cache:
    • If this option is checked, the content of the table is completely loaded in the browser cache.. In this case, the loading of the page may take longer, but no trip back to the server is needed when using the scrollbar. This option is actually recommended for the Ajax tables used in AWP pages. In this case, the vertical scrollbar is automatically generated.
    • If this option is not checked, the default implementation from the previous versions is used. Only a limited number of rows around the area displayed in the table is cached.
    New in version 19
    Put everything in the browser cache:
    • If this option is checked, the content of the table is completely loaded in the browser cache.. In this case, the loading of the page may take longer, but no trip back to the server is needed when using the scrollbar. This option is actually recommended for the Ajax tables used in AWP pages. In this case, the vertical scrollbar is automatically generated.
    • If this option is not checked, the default implementation from the previous versions is used. Only a limited number of rows around the area displayed in the table is cached.
    Put everything in the browser cache:
    • If this option is checked, the content of the table is completely loaded in the browser cache.. In this case, the loading of the page may take longer, but no trip back to the server is needed when using the scrollbar. This option is actually recommended for the Ajax tables used in AWP pages. In this case, the vertical scrollbar is automatically generated.
    • If this option is not checked, the default implementation from the previous versions is used. Only a limited number of rows around the area displayed in the table is cached.
  • Define the mode for managing the horizontal and vertical scrollbars.
Minimum required version
  • Version 9
Comments
Click [Add] to post a comment