TagTextBox

The Wisej.NET TagTextBox enables users to select multiple values as tags.

Features

Auto Size

The TagTextBox control automatically resizes to fit its contents, including font size changes and tag overflow.

Auto Completion Options

The TagTextBox control provides selection from preset items defined in the AutoCompleteList property.

Limit Tags and Length

Configure tag limits using these properties:

• MaxLength: Maximum characters allowed in the edit control

• MaxTagCount: Maximum number of tags allowed

• MaxTagWidth: Maximum width in pixels for tag widgets

• MinFieldLength: Minimum characters that should fit in the editable portion before wrapping

How To

Customize the Appearance

Customize tag colors using the Theme Builder, a mixin, or direct code application.

The tagtextbox appearance includes a tag child component, customizable for different states.

Theme Builder

Mixin File

Apply custom appearance using a project mixin:

//
// 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"
							}
						}
					}
				}
			}
		}
	}
}

Directly in Code

Modify the theme at runtime for custom TagTextBox appearance:

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