var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.currentProduct = simpleProducts[0];
$scope.productsDataSource = new DevExpress.data.DataSource({
store: {
data: simpleProducts,
type: "array",
key: "ID"
}
});
$scope.searchModeOption = "contains";
$scope.searchExprOption = "Name";
$scope.searchTimeoutOption = 200;
$scope.minSearchLengthOption = 0;
$scope.showDataBeforeSearchOption = false;
$scope.searchExprItems =[{
name: "'Name'",
value: "Name"
}, {
name: "['Name', 'Category']",
value: ['Name', 'Category']
}]
$scope.selectBox = {
searchBoxOptions: {
dataSource: products,
displayExpr: "Name",
valueExpr: "ID",
searchEnabled: true,
bindingOptions: {
searchMode: "searchModeOption",
searchExpr: "searchExprOption",
searchTimeout: "searchTimeoutOption",
minSearchLength: "minSearchLengthOption",
showDataBeforeSearch: "showDataBeforeSearchOption"
}
},
editBoxOptions: {
acceptCustomValue: true,
dataSource: $scope.productsDataSource,
displayExpr: "Name",
valueExpr: "ID",
value: simpleProducts[0].ID,
bindingOptions: {
selectedItem: "currentProduct",
},
onCustomItemCreating: function(data) {
if(!data.text) {
data.customItem = null;
return;
}
var productIds = simpleProducts.map(function(item) {
return item.ID;
});
var incrementedId = Math.max.apply(null, productIds) + 1;
var newItem = {
Name: data.text,
ID: incrementedId
};
data.customItem = $scope.productsDataSource.store().insert(newItem)
.then(() => $scope.productsDataSource.load())
.then(() => {
return newItem;
})
.catch((error) => {
throw error;
});
}
}
};
$scope.demoOptions = {
searchModeOptions: {
items: ["contains", "startswith"],
bindingOptions: {
value: "searchModeOption"
}
},
searchExprOptions: {
items: $scope.searchExprItems,
displayExpr: "name",
valueExpr: "value",
bindingOptions: {
value: "searchExprOption"
}
},
searchTimeoutOptions: {
min: 0,
max: 5000,
value: 200,
showSpinButtons: true,
step: 100,
bindingOptions: {
value: "searchTimeoutOption"
}
},
minSearchLengthOptions: {
min: 0,
max: 5,
value: 0,
showSpinButtons: true,
bindingOptions: {
value: "minSearchLengthOption"
}
},
showDataBeforeSearchOptions: {
value: false,
text: "Show Data Before Search",
bindingOptions: {
value: "showDataBeforeSearchOption"
}
}
}
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
<div id="selectbox-demo">
<div class="widget-container">
<div class="dx-fieldset">
<div class="dx-fieldset-header">SearchBox</div>
<div class="dx-field">
<div class="dx-field-label">Product</div>
<div class="dx-field-value">
<div dx-select-box="selectBox.searchBoxOptions"></div>
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header">EditBox</div>
<div class="dx-field">
<div class="dx-field-label">Product</div>
<div class="dx-field-value">
<div dx-select-box="selectBox.editBoxOptions"></div>
</div>
</div>
<div class="dx-field current-product">
Current product:
<span ng-if="currentProduct" class="current-value">
{{currentProduct.Name}} (ID: {{currentProduct.ID}})
</span>
<span ng-if="!currentProduct" class="current-value">
Not selected
</span>
</div>
</div>
</div>
<div class="options">
<div class="caption">SearchBox Options</div>
<div class="option">
<div>Search Mode</div>
<div dx-select-box="demoOptions.searchModeOptions"></div>
</div>
<div class="option">
<div>Search Expression</div>
<div dx-select-box="demoOptions.searchExprOptions"></div>
</div>
<div class="option">
<div>Search Timeout</div>
<div dx-number-box="demoOptions.searchTimeoutOptions"></div>
</div>
<div class="option">
<div>Minimum Search Length</div>
<div dx-number-box="demoOptions.minSearchLengthOptions"></div>
</div>
<div class="option">
<div dx-check-box="demoOptions.showDataBeforeSearchOptions"></div>
</div>
</div>
</div>
</div>
</body>
</html>
.widget-container {
margin-right: 320px;
}
.current-product {
padding-top: 11px;
}
.current-value {
font-weight: bold;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 260px;
}
.caption {
font-weight: 500;
font-size: 18px;
}
.option {
margin-top: 10px;
}
var simpleProducts = [
{ "Name": "HD Video Player", "ID": 0 },
{ "Name": "SuperHD Video Player", "ID": 1 },
{ "Name": "SuperPlasma 50", "ID": 2 },
{ "Name": "SuperLED 50", "ID": 3 },
{ "Name": "SuperLED 42", "ID": 4 },
{ "Name": "SuperLCD 55", "ID": 5 },
{ "Name": "SuperLCD 42", "ID": 6 },
{ "Name": "SuperPlasma 65", "ID": 7 },
{ "Name": "SuperLCD 70", "ID": 8 },
{ "Name": "Projector Plus", "ID": 9 },
{ "Name": "Projector PlusHT", "ID": 10 },
{ "Name": "ExcelRemote IR", "ID": 11 },
{ "Name": "ExcelRemote Bluetooth", "ID": 12 },
{ "Name": "ExcelRemote IP", "ID": 13 }
];
var 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"
}];