ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Table control
  • Overview
  • Initial state of the Table control
  • Display options
  • Row selection mode
  • Cell selection mode (Table populated programmatically)
  • 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/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview
Table controls allow you to display and/or enter data. This data can be in memory or come from a data source or WLanguage variable.
WEBDEV includes 3 modes for Table controls:
  • Table in "Server" mode.
  • Table in "Server + AJAX" mode.
  • Table in "Browser" mode.
This help page presents the main settings that can be defined for a Table control in a page:
You can also define the data source displayed in the control. For more details, see Content of the Table control.
Initial state of the Table control
The initial state of the Table control can be:
Initial state
This initial state is defined when creating the control. It can be modified at any time in the "UI" tab of the Table control characteristics.
The different options 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 using the Visible property.
  • The following options are also available for browser or Ajax Table controls::
    • Editable: Users will be able to enter data in the different columns of the control if they are in edit mode.
    • Grayed: The Table control and its columns will be grayed out. The user will not be able to enter data in the control.
    • Selection (non-editable): Users will not be able to enter data in the columns of the control. However, they can select rows in the control: The row will be selected with the selection bar.
      Remark: The value of the Table control corresponds to the selected row. The row selection code is executed each time a row is selected.
    • No edit, no selection: Users will not be able to enter data in the columns of the control. A row can only be selected using TableSelectPlus. This row will be selected with the selection bar. The user will not be able to change the position of the selection bar.
      Remark: The value of the Table control corresponds to the selected row.
      Tip: This option is recommended to highlight a row with the selection bar.
Display options

Row selection mode

The selection modes determine how a row of Table control can be selected, both by the user and programmatically. The selection mode is defined when creating the control. It can be modified at any time in the "UI" tab of the Table control description window.
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 through programming.
  • Single selection: The selected row will be displayed underneath the selection bar. A row can be selected by clicking this row or through 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.
    • programmatically.
    In this case, the number of selection bars is equal to the number of selected rows.
Remarks:
  • A WLanguage error will occur if you try to perform a multiple selection through programming while the selection mode of control is set to "Single selection".
  • Table controls in "Server" mode: multi-selection is only available for Table controls based on a data file.
Multi-selection case: The selected elements will be retrieved by browsing the rows selected in the control. TableSelectCount is used to get the number of selected rows in the Table control:
// Traces the content of the selected rows
i is int
NbSelected is int = TableSelectCount(TABLE_Product)
FOR i = 1 TO NbSelected
Trace("Selected row: " + i)
END

Cell selection mode (Table populated programmatically)

The cell selection modes determine how a cell in the Table control can be selected. The selection mode is defined when creating the control. It can be modified at any time in the "UI" tab of the Table control description window.
The available selection modes are as follows:
Selection mode
  • No selection: Cells cannot be selected.
  • Single selection: Only once cell can be selected at a time.
  • Multi-selection: You can select multiple cells with the Shift key for adjacent cells, or with the Ctrl key for non-adjacent cells.
Remark: Cell selection is only available for AJAX and browser Table controls.
Multi-selection case: The selected elements will be retrieved by browsing the columns selected in the control. TableSelect gets the index of the column and row selected in the Table control:
aaColNumToColName is associative array of strings
aaColNumToColName [1] = "COL_Text"
aaColNumToColName [2] = "COL_Num"
aaColNumToColName[3] = "COL_Date"
aaColNumToColName[4] = "COL_Time"
aaColNumToColName[5] = "COL_List"
aaColNumToColName[6] = "COL_CheckBox"
aaColNumToColName[7] = "COL_Image"
aaColNumToColName[8] = "COL_Content"
 
nCol is int
nRow is int
nSub is int = 1
LOOP
nCol = TableSelect(TABLE_MultipleSelection, nInd, tsCellColumn)
nRow = TableSelect(TABLE_MultipleSelection, nInd, tsCellRow)
IF nRow <= 0 THEN
BREAK
END
Trace("[%aaColNumToColName[nCol]%][[%nRow%]]")
nSub++
END

Display options

The display options ("General" tab) allow you to define:
  • the display mode of the Table control (title of columns displayed).
  • the row selection mode in the Table control (presence of a radio button and/or selection bar).
  • the presence of a context menu.
Depending on the type of control (Server, Server + AJAX or Browser), some options may not be available.
Display options
The available options are:
  • With column titles: the caption defined for the columns is used as column title.
    Remark: The height of the column title can be specified in the "UI" 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 column title, the image is automatically generated with the specified size.
  • If "With column titles" is selected, the "Edit column title-headers" button allows you to define additional titles displayed above the title of one or more columns. To define a column title-header:
    1. Open the "Details" tab in the Table control description window ("Description" in the context menu).
    2. Click "Edit column title-headers".
    3. The different table columns are displayed in the window that is opened.
      Column title-header

      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.
      Remark: 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.
  • Selection column of current row: 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 only available for Table controls in "Server" mode.
  • Selection bar: a selection bar is used to view and/or select the current row.
    This option is only available for Table controls in "Server" mode.
  • With export context menu: a context menu associated with the control (Context menu icon) is displayed. This context menu will allow the 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 context 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 only available for Table controls in "Server" and "Server + AJAX" mode.
Example: Server Table control with column titles, selection bar, radio button and context menu:
Table control
Scrollbars in a Table control
The scrollbar depends on the type of Table control: Server, Server + AJAX or Browser.
Table controls in "Server" mode do 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). 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.
Table controls in "Server + AJAX" mode are displayed like Windows Table controls. 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.
The possible options are as follows:
  • Defining the horizontal and vertical scrollbar mode.
  • Table control without vertical scrollbar: All the content of the table control will be displayed in the page, without limiting the number of rows.
  • Table control with vertical scrollbar:
    • If "Cache all its content" is checked, the entire content of the Table control is loaded in the browser's cache. In this case, the page may take longer to load, but no return to the server is needed when using the scrollbar. This option is particularly recommended for Ajax Table controls used in Active WEBDEV Pages. In this case, the vertical scrollbar is automatically generated.
    • If "Cache all its content" is not checked, the default behaviour from previous versions is restored. Only a limited number of rows around the area displayed in the Table control is cached.
Table controls in "Browser" mode are displayed like Windows Table controls. The scrollbars are configured in the "General" tab of the description window of Table control.
The possible options are as follows:
  • Defining the horizontal and vertical scrollbar mode.
  • Table control without vertical scrollbar: All the content of the Table control will be displayed in the page, without limiting the number of rows.
  • Table control with vertical scrollbar: A vertical scrollbar allows the user to scroll through the rows in the Table control.
Minimum version required
  • Version 9
Comments
Click [Add] to post a comment

Last update: 03/07/2023

Send a report | Local help