diff --git a/concepts/05 UI Components/TagBox/03 Overview/00 Overview.md b/concepts/05 UI Components/TagBox/03 Overview/00 Overview.md new file mode 100644 index 0000000000..3059124480 --- /dev/null +++ b/concepts/05 UI Components/TagBox/03 Overview/00 Overview.md @@ -0,0 +1,3 @@ +TagBox is a UI component that allows users to select values from a list. The component displays selected items in its input area as tags. TagBox supports multiple item selection and can allow users to add new values. + +This overview highlights TagBox elements, key features, and what to explore next. \ No newline at end of file diff --git a/concepts/05 UI Components/TagBox/03 Overview/05 Elements.md b/concepts/05 UI Components/TagBox/03 Overview/05 Elements.md new file mode 100644 index 0000000000..397dbf5834 --- /dev/null +++ b/concepts/05 UI Components/TagBox/03 Overview/05 Elements.md @@ -0,0 +1,9 @@ +TagBox elements + +1. [Label](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#label) +2. [Selected Items](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#selectedItems) +3. [Selection Controls](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#showSelectionControls) +4. [Items](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/items/) +5. [Placeholder](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#placeholder) +6. [Group Caption](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#groupTemplate) +7. [Grouped Items](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#grouped) \ No newline at end of file diff --git a/concepts/05 UI Components/TagBox/03 Overview/10 Key Features.md b/concepts/05 UI Components/TagBox/03 Overview/10 Key Features.md new file mode 100644 index 0000000000..e17081e351 --- /dev/null +++ b/concepts/05 UI Components/TagBox/03 Overview/10 Key Features.md @@ -0,0 +1,28 @@ +- **Data Binding** +TagBox supports loading and updating data from different [data source](/Documentation/ApiReference/Data_Layer/DataSource/) types. + +- **Selection Options** +TagBox supports multiple item selection. Specify the maximum number of tags the component displays by configuring [maxDisplayedTags](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#maxDisplayedTags). Define [showSelectionControls](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#showSelectionControls) to configure the visbility of selection checkboxes, including the "Select All" checkbox. + +- **Data Entry** +The component allows users to add new values to its dataset. Configure [acceptCustomValue](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#acceptCustomValue) and [onCustomItemCreating](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#onCustomItemCreating) to implement this functionality. + +- **Searching** +Set [searchEnabled](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#searchEnabled) to `true` to allow users to search TagBox values. Configure search options with the following properties: + - [searchMode](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#searchMode) + - [searchExpr](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#searchExpr) + - [searchTimeout](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#searchTimeout) + +- **Grouping** +You can separate TagBox items into groups. To do this, enable the [grouped](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#grouped) property and specify **DataSource**.[group](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#group) in the TagBox [dataSource](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#dataSource). + +- **Customization** +You can customize the appearance of TagBox visual elements with the following properties: + - [label](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#label) + - [labelMode](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#labelMode) + - [tagTemplate](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#tagTemplate) + - [fieldTemplate](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#fieldTemplate) + - [stylingMode](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#stylingMode) + +- **Configurable Buttons** +TagBox supports rendering buttons in its input area. Enable [showDropDownButton](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#showDropDownButton) and [showClearButton](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#showClearButton) to display the component's predefined buttons. Configure custom buttons in the [buttons[]](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/buttons/) array. \ No newline at end of file diff --git a/concepts/05 UI Components/TagBox/03 Overview/15 Explore More.md b/concepts/05 UI Components/TagBox/03 Overview/15 Explore More.md new file mode 100644 index 0000000000..d1ac3dd6a8 --- /dev/null +++ b/concepts/05 UI Components/TagBox/03 Overview/15 Explore More.md @@ -0,0 +1,5 @@ +- [Getting Started with TagBox](/Documentation/Guide/UI_Components/TagBox/Getting_Started_with_TagBox/) + +- [API](/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/) + +- [Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TagBox/Overview/) \ No newline at end of file diff --git a/images/TagBox/tagbox-elements.png b/images/TagBox/tagbox-elements.png new file mode 100644 index 0000000000..ebeb5eba98 Binary files /dev/null and b/images/TagBox/tagbox-elements.png differ