The MulticolumnComboBox component extends the functionality of a standard combo box by allowing multiple columns to be displayed for each option. This is useful when items have more than one descriptive attribute (e.g., ID, name, surname).
1. Basic Properties
- Name: The unique identifier of the component (e.g.,
MulticolumnComboBox1). - Data Source: Defines the dataset used to populate the dropdown list.
- Example:
[ { "id": 1, "name": "Veli", "surname": "Kayikci" }, { "id": 2, "name": "Jhon", "surname": "Doe" } ]
- Example:
- Primary Key: The unique identifier for each row (e.g.,
id). - Display Key or Mapped Value: Defines which field is shown as the main display text (e.g.,
name). - Default Value: Specifies the initially selected item.
- Label: The text displayed above the combo box.
- Placeholder: Text displayed when no selection is made.
States
- Disabled: Makes the combo box non-interactive.
- Hidden: Hides the component from the UI while keeping it available in logic.
- Read Only: Displays the value but prevents changes.
2. Columns
Each column in components such as MulticolumnComboBox can be customized individually to control its appearance, behavior, and functionality.
1. Basic Settings
- Field name or mapped value: Defines the data field that this column represents (e.g.,
name,surname). - Caption: The column header text shown in the dropdown or grid.
- Visible: Toggles the column’s visibility on or off.
- Column Type: Defines the type of content (e.g.,
auto,string,number,date).
2. Sizing
- Min Width: The minimum allowed width for the column.
- Width: The fixed/default width of the column (e.g.,
150px).
3. Alignment
Defines how the column content is aligned:
- Left
- Center
- Right
4. Column Options
- Fixed: Keeps the column fixed while scrolling horizontally.
- Localized: Adapts captions/values based on localization settings.
- Allow Sorting: Enables sorting on this column.
- Allow Filtering: Enables basic filtering.
- Allow Fixing: Allows the column to be pinned/unpinned by users.
- Allow Header Filtering: Adds a filter option directly in the column header.
- Allow Hiding: Lets users show/hide this column dynamically.
- Allow Reordering: Lets users drag and rearrange the column order.
- Allow Resizing: Allows users to resize the column width.
- Allow Search: Enables searching within this column.
5. Grouping
- Group Index: Defines whether the column participates in grouping.
- Example:
0→ first-level grouping,1→ second-level grouping.
- Example:
6. Appearance
- Text Color: Custom color for the text content.
- Background Color: Custom background color for the column.
✅ With these options, each column can be fully customized to display, sort, filter, and style data exactly as needed, making multicolumn components more powerful and user-friendly.
3. Layout
Defines how the component is displayed across responsive breakpoints and how it aligns with other components.
📘 See Common Properties → Layout.
4. Events
- onChange: Triggered when the selected value changes.
5. Validations
Validation rules ensure the selected value matches required conditions.
📘 See Common Properties → Validations.
6. Advanced Options
- Filter Predicate: Custom filtering logic for searching across multiple columns.
- Auto Focus: Focuses the input on load.
- Auto Complete: Suggests options while typing.
- Localized: Adapts the combo box for different languages.
- Auto Highlight: Highlights the best matching option.
- Auto Select: Automatically selects the first matching option.
- Close Text / Clear Text: Customize the button labels.
- Disable Clearable: Prevents clearing the selection.
- Disable Close on Select: Keeps the dropdown open after selection.
- Loading: Shows a loading indicator while fetching data.
- No Options Text: Defines the message when no matching options are found.
7. Style
Custom styles can be applied to adjust appearance and layout.
📘 See Common Properties → Style.
✅ The MulticolumnComboBox is ideal for scenarios where users need to select items from datasets with multiple attributes. It provides a richer display compared to the standard ComboBox by showing multiple columns per option.