Your search did not match any results.
TagBox

Tag Count Limitation

Documentation

The TagBox allows you to limit the number of displayed tags. When specified limit is exceeded, the tags are united into a single multi-tag displaying the number of selected items. The TagBox can display multi-tag alone or along with ordinary tags depending on the showMultiTagOnly option value.

@model IEnumerable<DevExtreme.MVC.Demos.Models.ElectronicsItem> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label"> Multi-tag for several items </div> <div class="dx-field-value"> @(Html.DevExtreme().TagBox() .DataSource(Model) .Value(new[] { 1, 2, 3, 4 }) .DisplayExpr("Name") .ValueExpr("ID") .ShowSelectionControls(true) .MaxDisplayedTags(3) ) </div> </div> <div class="dx-field"> <div class="dx-field-label"> Multi-tag for all items </div> <div class="dx-field-value"> @(Html.DevExtreme().TagBox() .DataSource(Model.Take(5)) .Value(new[] { 1, 2, 3, 4, 5 }) .DisplayExpr("Name") .ValueExpr("ID") .ShowSelectionControls(true) .MaxDisplayedTags(3) .OnMultiTagPreparing("OnMultiTagPreparing") ) </div> </div> <div class="dx-field"> <div class="dx-field-label"> Multi-tag with ordinary tags </div> <div class="dx-field-value"> @(Html.DevExtreme().TagBox() .DataSource(Model) .Value(new[] { 1, 2, 3, 4, 5, 6, 7 }) .DisplayExpr("Name") .ValueExpr("ID") .ShowSelectionControls(true) .MaxDisplayedTags(2) .ShowMultiTagOnly(false) ) </div> </div> </div> <script> function OnMultiTagPreparing(args) { var selectedItemsLength = args.selectedItems.length, totalCount = 5; if (selectedItemsLength < totalCount) { args.cancel = true; } else { args.text = "All selected (" + selectedItemsLength + ")"; } } </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using DevExtreme.MVC.Demos.ViewModels; using Newtonsoft.Json; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class TagBoxController : Controller { public ActionResult TagCountLimitation() { return View(SampleData.Electronics); } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static List<ElectronicsItem> Electronics = new List<ElectronicsItem> { new ElectronicsItem { ID = 1, Name = "HD Video Player", Price = 330, CurrentInventory = 225, Backorder = 0, Manufacturing = 10, Category = "Video Players", ImageSrc = "../../Content/images/products/1-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsItem { ID = 2, Name = "SuperHD Player", Price = 400, CurrentInventory = 150, Backorder = 0, Manufacturing = 25, Category = "Video Players", ImageSrc = "../../Content/images/products/2-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsItem { ID = 3, Name = "SuperPlasma 50", Price = 2400, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../Content/images/products/3-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 4, Name = "SuperLED 50", Price = 1600, CurrentInventory = 77, Backorder = 0, Manufacturing = 55, Category = "Televisions", ImageSrc = "../../Content/images/products/4-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 5, Name = "SuperLED 42", Price = 1450, CurrentInventory = 445, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../Content/images/products/5-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 6, Name = "SuperLED 55", Price = 1350, CurrentInventory = 345, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../Content/images/products/6-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 7, Name = "SuperLCD 42", Price = 1200, CurrentInventory = 210, Backorder = 0, Manufacturing = 20, Category = "Televisions", ImageSrc = "../../Content/images/products/7-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 8, Name = "SuperPlasma 65", Price = 3500, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../Content/images/products/8-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 9, Name = "SuperLCD 70", Price = 4000, CurrentInventory = 95, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../Content/images/products/9-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 10, Name = "DesktopLED 21", Price = 175, CurrentInventory = 0, Backorder = 425, Manufacturing = 75, Category = "Monitors", ImageSrc = "../../Content/images/products/10-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 11, Name = "DesktopLED 19", Price = 165, CurrentInventory = 425, Backorder = 0, Manufacturing = 110, Category = "Monitors", ImageSrc = "../../Content/images/products/11-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 12, Name = "DesktopLCD 21", Price = 170, CurrentInventory = 210, Backorder = 0, Manufacturing = 60, Category = "Monitors", ImageSrc = "../../Content/images/products/12-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 13, Name = "DesktopLCD 19", Price = 160, CurrentInventory = 150, Backorder = 0, Manufacturing = 210, Category = "Monitors", ImageSrc = "../../Content/images/products/13-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 14, Name = "Projector Plus", Price = 550, CurrentInventory = 0, Backorder = 55, Manufacturing = 10, Category = "Monitors", ImageSrc = "../../Content/images/products/14-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsItem { ID = 15, Name = "Projector PlusHD", Price = 750, CurrentInventory = 110, Backorder = 0, Manufacturing = 90, Category = "Projectors", ImageSrc = "../../Content/images/products/15-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsItem { ID = 16, Name = "Projector PlusHT", Price = 1050, CurrentInventory = 0, Backorder = 75, Manufacturing = 57, Category = "Projectors", ImageSrc = "../../Content/images/products/16-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsItem { ID = 17, Name = "ExcelRemote IR", Price = 150, CurrentInventory = 650, Backorder = 0, Manufacturing = 190, Category = "Automation", ImageSrc = "../../Content/images/products/17-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsItem { ID = 18, Name = "ExcelRemote BT", Price = 180, CurrentInventory = 310, Backorder = 0, Manufacturing = 0, Category = "Automation", ImageSrc = "../../Content/images/products/18-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsItem { ID = 19, Name = "ExcelRemote IP", Price = 200, CurrentInventory = 0, Backorder = 325, Manufacturing = 225, Category = "Automation", ImageSrc = "../../Content/images/products/19-small.png", IconSrc = "../../Content/images/icons/video-player.svg" } }; } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models { public class ElectronicsItem { public int ID { get; set; } public string Category { get; set; } public string Name { get; set; } public int CurrentInventory { get; set; } public int Backorder { get; set; } public int Manufacturing { get; set; } public int Price { get; set; } public string ImageSrc { get; set; } public string IconSrc { get; set; } } }