Multiple Selection
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
var treeView;
var syncTreeViewSelection = function(treeView){
if (!treeView) return;
if (!$scope.treeBoxValue) {
treeView.unselectAll();
return;
}
$scope.treeBoxValue.forEach(function(key){
treeView.selectItem(key);
});
};
var makeAsyncDataSource = function(jsonFile){
return new DevExpress.data.CustomStore({
loadMode: "raw",
key: "ID",
load: function() {
return $.getJSON("../../../../data/" + jsonFile);
}
});
};
var getSelectedItemsKeys = function(items) {
var result = [];
items.forEach(function(item) {
if(item.selected) {
result.push(item.key);
}
if(item.items.length) {
result = result.concat(getSelectedItemsKeys(item.items));
}
});
return result;
};
var treeDataSource = makeAsyncDataSource("treeProducts.json"),
gridDataSource = makeAsyncDataSource("customers.json");
$scope.treeBoxValue = ["1_1"];
$scope.treeBoxOptions = {
bindingOptions: {
value: 'treeBoxValue'
},
valueExpr: "ID",
displayExpr: "name",
placeholder: "Select a value...",
showClearButton: true,
dataSource: treeDataSource,
onValueChanged: function(){
syncTreeViewSelection(treeView);
},
treeView: {
dataSource: treeDataSource,
dataStructure: "plain",
keyExpr: "ID",
parentIdExpr: "categoryId",
displayExpr: "name",
selectByClick: true,
selectNodesRecursive: false,
showCheckBoxesMode: "normal",
bindingOptions: {
selectionMode: "selectionMode"
},
onContentReady: function(e) {
treeView = e.component;
syncTreeViewSelection(treeView);
},
onItemSelectionChanged: function(args){
var nodes = args.component.getNodes();
$scope.treeBoxValue = getSelectedItemsKeys(nodes);
}
}
};
$scope.gridBoxValue = [3];
$scope.gridBoxOptions = {
bindingOptions: {
value: "gridBoxValue"
},
valueExpr: "ID",
placeholder: "Select a value...",
displayExpr: "CompanyName",
onValueChanged: function(e){
$scope.gridBoxValue = e.value || [];
},
showClearButton: true,
dataSource: gridDataSource,
dataGrid: {
dataSource: gridDataSource,
columns: ["CompanyName", "City", "Phone"],
hoverStateEnabled: true,
paging: { enabled: true, pageSize: 10 },
filterRow: { visible: true },
scrolling: { mode: "infinite" },
height: 345,
selection: { mode: "multiple" },
bindingOptions: {
"selectedRowKeys": "gridBoxValue"
},
onSelectionChanged: function(selectedItems){
$scope.gridBoxValue = selectedItems.selectedRowKeys;
}
}
};
});
<!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.4.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/19.2.5/css/dx.common.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.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/19.2.5/js/dx.all.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="form">
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">DropDownBox with embedded TreeView</div>
<div class="dx-field-value">
<div dx-drop-down-box="treeBoxOptions">
<div data-options="dxTemplate: { name: 'content' }">
<div dx-tree-view="treeBoxOptions.treeView"></div>
</div>
</div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">DropDownBox with embedded DataGrid</div>
<div class="dx-field-value">
<div dx-drop-down-box="gridBoxOptions">
<div data-options="dxTemplate: { name: 'content' }">
<div dx-data-grid="gridBoxOptions.dataGrid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
#form .dx-fieldset {
height: 500px;
}