HtmMultiColDropDown

Syntax

HtmMultiColDropDown(ControlName, SQL[, SelectedValue][, KeyFieldName][, WidthPx][, ShowSearchBox][, EmbedScripts][, ShowHeader][, ContainerClassName][, HeaderClassName][, RowClassName][, SelectionClassName][, Style])

Description

The HtmMultiColDropDown function creates an advanced multi-column dropdown control by leveraging the Select2 library. This function builds a <select> element whose <option> elements carry data for multiple columns. The multi-column layout is achieved through custom JavaScript templates that render each option as a flexible, column-based display.

Key features include:

Dynamic Column Layout:

All columns from an SQL query are stored as data-colX attributes in each <option>.

Header Row:

An optional header row (if ShowHeader is set to true) displays the column names.

Custom Search:

A custom matcher function is implemented to search across all columns.

Styling Flexibility:

Four different CSS class parameters allow you to control the styling:

ContainerClassName for the entire Select2 container (affecting both dropdown and the selection box).
HeaderClassName for the header row.
RowClassName for the regular data rows.
SelectionClassName for the selected value displayed in the “textbox.”

Parameter	Description
ControlName	The name (and id) of the <select> element.
SQL	A SQL query that returns the data to populate the dropdown. Each row's columns are stored as data-col0, data-col1, etc.
SelectedValue	Optional. The value (as determined by KeyFieldName) that should be pre-selected.
KeyFieldName	Optional. The name of the column to be used as the option value. If omitted, the first column is used by default.
WidthPx	Optional. The width of the dropdown element in pixels (default is 300).
ShowSearchBox	Optional. Boolean indicating whether the search box is enabled.
EmbedScripts	Optional. Boolean that determines whether jQuery and Select2 references are embedded directly into the generated HTML.
ShowHeader	Optional. Boolean that determines whether a header row is included at the top of the dropdown, displaying the column names.
ContainerClassName	Optional. A CSS class that will be applied to the entire Select2 container (affecting both the dropdown list and the selection box).
HeaderClassName	Optional. A CSS class for the header row container.
RowClassName	Optional. A CSS class for the regular data rows.
SelectionClassName	Optional. A CSS class for the text displayed in the selection box (the “textbox”).
Style	Optional. Inline CSS style applied to the <select> element.

Notes

Multi-Column Display:

The function stores all column values from the SQL query as data-colX attributes. The JavaScript templateResult and templateSelection functions use these attributes to render each option as a multi-column layout.

Custom Matcher:

A custom matcher function is built into the Select2 configuration so that searching filters results based on all column data, not just the option text.

Script Embedding:

If EmbedScripts is set to True, the required jQuery and Select2 libraries are included in the output HTML via CDN. Ensure you have a proper internet connection, or include these libraries manually in your page header.

Styling:

The provided class name parameters allow complete styling control. In your CSS file, you might define:

.container-class { /* styles for the entire Select2 container */ }

.blue-head { font-size:18pt; color:blue; font-weight:bold; }

.dark-text { color:#666666; }

.blue-text { font-size:14pt; color:blue; }

These classes will be applied to the corresponding parts of the dropdown.

Example

Sub Main()
    Dim sql As String
    sql = "SELECT Land, COUNT(*) AS Aantal FROM Klanten GROUP BY Land ORDER BY Land"
 
    TrmPrint "<html><head><title>Multi-col test</title>"
    TrmPrint "<link rel='stylesheet' type='text/css' href='tablet/styles.css'>"
    TrmPrint "</head><body>"
 
    TrmPrint "<h2>Test HtmMultiColDropDown <span style='color: #0000FF; font-weight: bold;'>Function</span></h2>"
 
    TrmPrint HtmMultiColDropDown( _
        "cboLanden", _
        sql, _
        "Duitsland", _
        "Land", _
        400, _
        True,   ' ShowSearchBox
        True,   ' EmbedScripts
        True,   ' ShowHeader
        "container-class",   ' ContainerClassName
        "blue-head",         ' HeaderClassName
        "dark-text",         ' RowClassName
        "blue-text",         ' SelectionClassName
        ""                   ' Style
    )
 
    TrmPrint "</body></html>"
End Sub

HtmMultiColDropDown

Notes

Multi-Column Display: