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 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.

TagTextBox with auto-sizing enabled

Enable horizontal growth by setting the MaximumSize property.

Auto Completion Options

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

TagTextBox with auto-completion options

The drop down uses an <input> element with a specified <datalist>.

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

Wisej.NET Theme Builder with custom TagTextBox tag colors

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

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

Directly in Code

Modify the theme at runtime for 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