New to Kendo UI for jQuery? Download free 30-day trial

jQuery Dialog TreeView in Dialog (AngularJS)

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main
Launch Theme Builder

Employees

{{obj.FullName}}

Select all employees {{selectedEmployeesCount}} Employees selected

treeview-integration-angularjs.html

Employees

{{obj.FullName}}

Select all employees {{selectedEmployeesCount}} Employees selected

var directives = angular.module("KendoDemos", ["kendo.directives"]) .controller("MyCtrl", function ($scope) { //Preselected items. Could be an empty array if there are no preselected values $scope.repeaterItems = [{ EmployeeId: 2, "FullName": "Andrew Fuller" }, { EmployeeId: 4, "FullName": "Margaret Peacock" }]; $scope.selectAll = false; $scope.selectedEmployeesCount = 0; $scope.actions = [ { text: 'Cancel' }, { text: 'OK', action: function () { $scope.$apply(function () { $scope.repeaterItems = getCheckedItems($scope.treeView); }); } } ]; $scope.searchValue = "An"; //Initial search pattern $scope.treeViewOptions = { dataSource: { transport: { read: { url: "https://demos.telerik.com/kendo-ui/service/Employees", dataType: "jsonp" } }, schema: { model: { id: "EmployeeId", hasChildren: "HasEmployees" } } }, dataTextField: "FullName", checkboxes: true, loadOnDemand: false, expandAll: true, dataBound: function (e) { e.sender.expand(e.node); }, check: function (e) { setTimeout(function () { $scope.$apply(function () { $scope.selectedEmployeesCount = getCheckedItems(e.sender).length; }); }) } } $scope.dialogShow = function () { //Focusing the search box when the dialog is opened angular.element(document.getElementById("employeesSearch")).focus(); //checking preselected values var dataSource = $scope.treeView.dataSource; $scope.treeView.element.find(".k-checkbox").removeAttr("checked").trigger("change"); for (var i = 0; i < $scope.repeaterItems.length; i++) { var item = $scope.treeView.findByText($scope.repeaterItems[i]["FullName"]); item.find(".k-checkbox").first().click(); } } $scope.searchKeyUp = function (keyEvent) { filter($scope.treeView.dataSource, keyEvent.target.value.toLowerCase()); } $scope.selectAllItems = function () { $scope.treeView.element.find(".k-checkbox").prop("checked", $scope.selectAll); $scope.treeView.element.find(".k-checkbox").trigger("change"); } function getCheckedItems(treeview) { var nodes = treeview.dataSource.data(); return getCheckedNodes(nodes); } function getCheckedNodes(nodes) { var node, childCheckedNodes; var checkedNodes = []; for (var i = 0; i < nodes.length; i++) { node = nodes[i]; if (node.checked) { checkedNodes.push(node); } if (node.hasChildren) { childCheckedNodes = getCheckedNodes(node.children.data()); if (childCheckedNodes.length > 0) { checkedNodes = checkedNodes.concat(childCheckedNodes); } } } return checkedNodes; } function filter(dataSource, query) { var hasVisibleChildren = false; var data = dataSource instanceof kendo.data.HierarchicalDataSource && dataSource.data(); for (var i = 0; i < data.length; i++) { var item = data[i]; var text = item.FullName.toLowerCase(); var itemVisible = query === true // parent already matches || query === "" // query is empty || text.indexOf(query) >= 0; // item text matches query var anyVisibleChildren = filter(item.children, itemVisible || query); // pass true if parent matches hasVisibleChildren = hasVisibleChildren || anyVisibleChildren || itemVisible; item.hidden = !itemVisible && !anyVisibleChildren; } if (data) { // re-apply filter on children dataSource.filter({ field: "hidden", operator: "neq", value: true }); } return hasVisibleChildren; } }) directives.directive("colorMatches", [ function () { return { restrict: "A", link: function (scope, element, attrs) { scope.$watch(attrs.colorMatches, function (newValue, oldValue) { var dataItemValue = element.data("value"); var index = dataItemValue.toLowerCase().indexOf(newValue.toLowerCase()); if (index >= 0) { var index = dataItemValue.toLowerCase().indexOf(newValue.toLowerCase()); var length = newValue.length; var original = dataItemValue.substr(index, length); var newText = dataItemValue.replace(original, "<span class='query-match'>" + original + "</span>"); element.html(newText); } else { element.html(dataItemValue); } return; }); } }; } ]); #example { min-height: 200px; } #example .title { font-weight: bold; margin-bottom: 25px; } .search-wrapper { width: 100%; } .query-match { color: red; } .select-all-wrapper { margin-top: 20px; margin-bottom: 20px; } .selected-count { float: right; color: #aaa; } .k-treeview { border-width: 1px!important; padding: 5px; } .selectedName { padding: 5px 10px; background: #aaa; color: white; float: left; margin-right: 5px; margin-bottom: 5px; border-radius: 10px; } #result { padding-bottom: 15px; } #result:after { content: ''; display: block; clear: both; }

Description

As of R2 2022 Kendo UI officially has dropped the support for AngularJS 1.x through Kendo UI for jQuery.

Support & Learning Resources

Additional Resources