If you have technical questions, please create a support ticket in the DevExpress Support Center.
DevExtreme.MVC.Demos.ViewModels.TagBoxViewModel
<div class="form">
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Default mode</div>
<div class="dx-field-value">
Html.DevExtreme().TagBox() (
.Items(Model.Items)
.InputAttr("aria-label", "Product")
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Search mode</div>
<div class="dx-field-value">
Html.DevExtreme().TagBox() (
.Items(Model.Items)
.InputAttr("aria-label", "Product")
.SearchEnabled(true)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Batch selection</div>
<div class="dx-field-value">
Html.DevExtreme().TagBox() (
.Items(Model.Items)
.InputAttr("aria-label", "Product")
.ShowSelectionControls(true)
.ApplyValueMode(EditorApplyValueMode.UseButtons)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Hide selected items</div>
<div class="dx-field-value">
Html.DevExtreme().TagBox() (
.Items(Model.Items)
.InputAttr("aria-label", "Product")
.HideSelectedItems(true)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Single line mode</div>
<div class="dx-field-value">
Html.DevExtreme().TagBox() (
.Items(Model.Items)
.InputAttr("aria-label", "Product")
.Multiline(false)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Add custom items</div>
<div class="dx-field-value">
Html.DevExtreme().TagBox() (
.Items(Model.Items)
.InputAttr("aria-label", "Product")
.AcceptCustomValue(true)
.OnCustomItemCreating("customItem_creating")
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">With custom placeholder</div>
<div class="dx-field-value">
Html.DevExtreme().TagBox() (
.Items(Model.Items)
.InputAttr("aria-label", "Product")
.Placeholder("Choose Product...")
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Disabled</div>
<div class="dx-field-value">
Html.DevExtreme().TagBox() (
.Items(Model.Items)
.InputAttr("aria-label", "Product")
.Value(new [] { Model.Items.First() })
.Disabled(true)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Data source</div>
<div class="dx-field-value">
Html.DevExtreme().TagBox() (
.DataSource(d => d.Mvc().LoadAction("GetProducts").Key("ID"))
.DisplayExpr("Name")
.InputAttr("aria-label", "Product")
.ValueExpr("ID")
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Custom template</div>
<div class="dx-field-value">
Html.DevExtreme().TagBox() (
.DataSource(d => d.Mvc().LoadAction("GetProducts").Key("ID"))
.Value(new[] {1, 2})
.DisplayExpr("Name")
.ValueExpr("ID")
.InputAttr("aria-label", "Product")
.ItemTemplate(<text>
<div class="custom-item">
<img src="<%- ImageSrc %>" alt="<%- Name %>. Picture"/>
<div class="product-name"><%- Name %></div>
</div>
</text>)
.TagTemplate(new JS("tagTemplate"))
)
Html.DevExtreme().Popover() (
.ID("popover")
)
</div>
</div>
</div>
</div>
<script>
function customItem_creating(args) {
var newValue = args.text,
component = args.component,
currentItems = component.option("items");
const isItemInDataSource = currentItems.some((item) => item === newValue);
if (!isItemInDataSource) {
currentItems.unshift(newValue);
component.option('items', currentItems);
}
args.customItem = newValue;
}
function tagTemplate(data) {
const isDisabled = data.Name === 'SuperHD Player';
const popover = $('#popover').dxPopover('instance')
const tagImg = $('<img>', { class: 'tag-img' }).attr({
src: data.ImageSrc,
alt: `${data.Name}. Picture`
})
const tag = $('<div>')
.attr('aria-disabled', isDisabled)
.addClass(`dx-tag-content ${isDisabled && 'disabled-tag'}`)
.append(
tagImg,
$('<span>').text(data.Name),
!isDisabled && $('<div>').addClass('dx-tag-remove-button')
)
tag.on('dxhoverstart', function (args) {
popover.option({
contentTemplate: () => popoverContentTemplate(data),
target: args.target.closest('.dx-tag')
});
popover.show();
})
tag.on('dxhoverend', function (args) {
popover.hide();
})
return tag;
}
const popoverContentTemplate = function (product) {
return $('<div>').append(
$(`<p><b>Name: </b><span>${product.Name}</span></p>`),
$(`<p><b>Price: </b><span>$${product.Price}</span></p>`),
$(`<p><b>In-stock: </b><span>${product.CurrentInventory}</span></p>`),
$(`<p><b>Category: </b><span>${product.Category}</span></p>`),
);
};
</script>
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
This demo illustrates the following TagBox properties:
-
items
An array of items to display in the drop-down list. Do not use the items property and the dataSource property in the same configuration. -
dataSource
Binds the TagBox to a data source, which allows you to perform complex data operations. Do not use the dataSource property and the items property in the same configuration. -
searchEnabled
Enables interactive item search. -
showSelectionControls
Enables item selection controls. -
applyValueMode
Specifies whether TagBox applies the selection instantly or after a confirmation. -
hideSelectedItems
Specifies whether TagBox removes selected items from the drop-down list. -
multiline
Specifies whether TagBox enables horizontal scrolling when the input field cannot fit all selected items. -
acceptCustomValue
Allows users to enter custom values. To enable this capability, implement the onCustomItemCreating handler. -
placeholder
Sets the value of the placeholder string. -
value
Specifies the list of currently selected items. -
disabled
Specifies whether the component responds to user interaction. -
itemTemplate
Allows you to customize the appearance and content of list items. -
tagTemplate Allows you to customize the appearance and content of list item tooltips.
To get started with the DevExtreme TagBox component, refer to the following tutorial for step-by-step instructions: Getting Started with TagBox.