TagTextBox

Represents a data field that displays a list of selectable and removable tags. The control recognizes tags as the user types and adds in front of the editable field.

The TagTextBox is an easy way for users to select a range of values.

Features

Auto Size

By default, the TagTextBox control will automatically resize to fit its contents. This includes font size changes and tag overflow.

To get the TagTextBox control to grow horizontally, set the MaximumSize property of the control.

Auto Completion Options

The TagTextBox control allows selecting from a list of preset items defined in the AutoCompleteList property.

The drop down is showing using an <input> element with a specified <datalist>.

Limit Tags and Length

The MaxLength, MaxTagCount, MaxTagWidth, and MinFieldLength properties provide options to configure the maximum tag length and count.

• MaxLength: Specifies the maximum number of characters that can be entered into the edit control.

• MaxTagCount: Returns or sets the maximum number of tags allowed in the control.

• MaxTagWidth: Returns or sets the maximum width in pixels of the tag widgets.

• MinFieldLength: Returns or sets the minimum number of characters that should fit in the editable portion of the control before it wraps to a new line.

How To

Customize the Appearance

The colors of the tags in the TagTextBox control can be customized using the Theme Builder, a mixin, or applied directly in code.

The tagtextbox appearance has a child component, tag, which can be customized based on any of it's given states.

Theme Builder

Wisej Theme Builder with custom TagTextBox tag colors.

Mixin File

The custom TagTextBox appearance can be applied using a mixin in the project.

//
// Mixin Theme Definition
//
// Mixin theme files define only a subset of the theme and are overlayed
// on top of the loaded theme. A mixin theme can extend or override the loaded theme.
//
// Mixin themes are useful to refine or style a particular feature in an application and/or
// style a new component.
//
{
	"appearances":
	{
		"mytagtextbox":
		{
			"inherit": "tagtextbox",
			"components": {
				"tag": {
					"states": {
						"default": {
							"styles": {
								"backgroundColor": "#ffe8d6"
							}
						},
						"selected": {
							"styles": {
								"backgroundColor": "#cb997e"
							}
						},
						"hovered": {
							"styles": {
								"backgroundColor": "#ddbea9"
							}
						}
					}
				}
			}
		}
	}
}

Add the mixin definition above to the /Themes directory in your project.

Directly in Code

The theme can be modified at runtime to include the custom TagTextBox appearance.

C#

Application.Theme.Appearances["tagtextbox"]["components"]["tag"]["states"]["default"]["styles"]["backgroundColor"] = "#ffe8d6";
Application.Theme.Appearances["tagtextbox"]["components"]["tag"]["states"]["hovered"]["styles"]["backgroundColor"] = "#ddbea9";
Application.Theme.Appearances["tagtextbox"]["components"]["tag"]["states"]["selected"]["styles"]["backgroundColor"] = "#cb997e";

Advanced

JavaScript Widget

Item	Description
Class name	"wisej.web.TagTextBox"
Theme Appearance	"tagtextbox", inherited from "textbox".
Child components	"textfield" is the inner <input> widget. See JavaScript.
Toolcontainer state	"editor", see Embedded Tools.
Source code	https://github.com/iceteagroup/wisej-js