<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DxTagBox</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/cosmo/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/17.1.3/css/dx.common.css">
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/17.1.3/css/dx.light.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/17.1.3/css/dx.common.css" type="text/css" />
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/17.1.3/css/dx.spa.css" type="text/css" />
<link rel="dx-theme" data-theme="generic.light" href="http://cdn3.devexpress.com/jslib/17.1.3/css/dx.light.css" data-active="true" />
<link rel="dx-theme" data-theme="generic.light.compact" href="http://cdn3.devexpress.com/jslib/17.1.3/css/dx.light.compact.css" />
<link rel="dx-theme" data-theme="generic.contrast" href="http://cdn3.devexpress.com/jslib/17.1.3/css/dx.contrast.css" />
<link rel="dx-theme" data-theme="generic.contrast.compact" href="http://cdn3.devexpress.com/jslib/17.1.3/css/dx.contrast.compact.css" />
<link rel="dx-theme" data-theme="android5.light" href="http://cdn3.devexpress.com/jslib/17.1.3/css/dx.android5.light.css" data-active="true" />
<link rel="dx-theme" data-theme="win10.black" href="http://cdn3.devexpress.com/jslib/17.1.3/css/dx.win10.black.css" data-active="false" />
<link rel="dx-theme" data-theme="win10.white" href="http://cdn3.devexpress.com/jslib/17.1.3/css/dx.win10.white.css" data-active="true" />
<link rel="dx-theme" data-theme="ios7.default" href="http://cdn3.devexpress.com/jslib/17.1.3/css/dx.ios7.default.css" data-active="true" />
<link rel="dx-theme" data-theme="generic.dark" href="http://cdn3.devexpress.com/jslib/17.1.3/css/dx.dark.css" />
<link rel="dx-theme" data-theme="generic.dark.compact" href="http://cdn3.devexpress.com/jslib/17.1.3/css/dx.dark.compact.css" />
</head>
<body ng-app="MainApp">
<h1 class="text-center title">Date Test</h1>
<div class="container">
<custom-tag-box></custom-tag-box>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/17.1.3/js/dx.all.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
class TheComponent {
constructor() {
this.controller = TheController;
this.controllerAs = 'bc';
this.templateUrl = 'templates/customtagbox.html';
}
}
class TheController {
constructor() {
this.model = '';
this.options = {
items: simpleProducts,
showSelectionControls: true,
searchEnabled: true,
applyValueMode: 'useButtons',
onContentReady: function(e) {
if (!e.component.__loaded){
e.component._list.on("selectionChanged", function(arg) {
e.component.option("value", e.component._list.option("selectedItemKeys"));
});
e.component.__loaded = true;
}
}
};
this.rules = {
validationRules: [{
type: 'required',
message: 'Tags is required'
}]
};
}
}
angular.module('MainApp', ['dx'])
.directive('customTagBox', TheComponent);
var simpleProducts = [
"HD Video Player",
"SuperHD Video Player",
"SuperPlasma 50",
"SuperLED 50",
"SuperLED 42",
"SuperLCD 55",
"SuperLCD 42",
"SuperPlasma 65",
"SuperLCD 70",
"Projector Plus",
"Projector PlusHT",
"ExcelRemote IR",
"ExcelRemote Bluetooth",
"ExcelRemote IP"
];
const products = [{
"ID": 1,
"Name": "HD Video Player",
"Price": 330,
"Current_Inventory": 225,
"Backorder": 0,
"Manufacturing": 10,
"Category": "Video Players",
"ImageSrc": "images/products/1.png"
}, {
"ID": 2,
"Name": "SuperHD Video Player",
"Price": 400,
"Current_Inventory": 150,
"Backorder": 0,
"Manufacturing": 25,
"Category": "Video Players",
"ImageSrc": "images/products/2.png"
}, {
"ID": 3,
"Name": "SuperPlasma 50",
"Price": 2400,
"Current_Inventory": 0,
"Backorder": 0,
"Manufacturing": 0,
"Category": "Televisions",
"ImageSrc": "images/products/3.png"
}, {
"ID": 4,
"Name": "SuperLED 50",
"Price": 1600,
"Current_Inventory": 77,
"Backorder": 0,
"Manufacturing": 55,
"Category": "Televisions",
"ImageSrc": "images/products/4.png"
}, {
"ID": 5,
"Name": "SuperLED 42",
"Price": 1450,
"Current_Inventory": 445,
"Backorder": 0,
"Manufacturing": 0,
"Category": "Televisions",
"ImageSrc": "images/products/5.png"
}, {
"ID": 6,
"Name": "SuperLCD 55",
"Price": 1350,
"Current_Inventory": 345,
"Backorder": 0,
"Manufacturing": 5,
"Category": "Televisions",
"ImageSrc": "images/products/6.png"
}, {
"ID": 7,
"Name": "SuperLCD 42",
"Price": 1200,
"Current_Inventory": 210,
"Backorder": 0,
"Manufacturing": 20,
"Category": "Televisions",
"ImageSrc": "images/products/7.png"
}, {
"ID": 8,
"Name": "SuperPlasma 65",
"Price": 3500,
"Current_Inventory": 0,
"Backorder": 0,
"Manufacturing": 0,
"Category": "Televisions",
"ImageSrc": "images/products/8.png"
}, {
"ID": 9,
"Name": "SuperLCD 70",
"Price": 4000,
"Current_Inventory": 95,
"Backorder": 0,
"Manufacturing": 5,
"Category": "Televisions",
"ImageSrc": "images/products/9.png"
}, {
"ID": 10,
"Name": "DesktopLED 21",
"Price": 175,
"Current_Inventory": null,
"Backorder": 425,
"Manufacturing": 75,
"Category": "Monitors",
"ImageSrc": "images/products/10.png"
}, {
"ID": 12,
"Name": "DesktopLCD 21",
"Price": 170,
"Current_Inventory": 210,
"Backorder": 0,
"Manufacturing": 60,
"Category": "Monitors",
"ImageSrc": "images/products/12.png"
}, {
"ID": 13,
"Name": "DesktopLCD 19",
"Price": 160,
"Current_Inventory": 150,
"Backorder": 0,
"Manufacturing": 210,
"Category": "Monitors",
"ImageSrc": "images/products/13.png"
}, {
"ID": 14,
"Name": "Projector Plus",
"Price": 550,
"Current_Inventory": null,
"Backorder": 55,
"Manufacturing": 10,
"Category": "Projectors",
"ImageSrc": "images/products/14.png"
}, {
"ID": 15,
"Name": "Projector PlusHD",
"Price": 750,
"Current_Inventory": 110,
"Backorder": 0,
"Manufacturing": 90,
"Category": "Projectors",
"ImageSrc": "images/products/15.png"
}, {
"ID": 16,
"Name": "Projector PlusHT",
"Price": 1050,
"Current_Inventory": 0,
"Backorder": 75,
"Manufacturing": 57,
"Category": "Projectors",
"ImageSrc": "images/products/16.png"
}, {
"ID": 17,
"Name": "ExcelRemote IR",
"Price": 150,
"Current_Inventory": 650,
"Backorder": 0,
"Manufacturing": 190,
"Category": "Automation",
"ImageSrc": "images/products/17.png"
}, {
"ID": 18,
"Name": "ExcelRemote Bluetooth",
"Price": 180,
"Current_Inventory": 310,
"Backorder": 0,
"Manufacturing": 0,
"Category": "Automation",
"ImageSrc": "images/products/18.png"
}, {
"ID": 19,
"Name": "ExcelRemote IP",
"Price": 200,
"Current_Inventory": 0,
"Backorder": 325,
"Manufacturing": 225,
"Category": "Automation",
"ImageSrc": "images/products/19.png"
}];
/* Styles go here */
.title {
font-size: 48;
padding: 48px;
}
# dx validator
This example demostrates the status of validator directive.
<div class="dx-viewport col-md-6 sh-group" dx-validation-group="{}">
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Tab Box:</div>
<div class="dx-field-value">
<div dx-tag-box="bc.options" dx-validator="bc.rules" ng-model="bc.model"></div>
</div>
</div>
</div>
</div>
<div>
<code>{{bc.model}}</code>
</div>