24 October, 2014
0 Comments
1 category
Here is a plunkr showing a combobox with hierarchy:
http://plnkr.co/edit/PaiRPD6dZNq0JaT2Tkdg?p=preview
<!DOCTYPE html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="spike"> <head> <!-- This page can be used as a base for spiking with jQuery, AngularJS and Kendo. All scripts and styles are loaded from a CDN or inline. --> <title>Spike page</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Use highest support for modern standards . --> <!-- Library styles --> <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.silver.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.silver.mobile.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.silver.min.css" rel="stylesheet" /> <!-- Library scripts --> <script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2014.2.1008/js/angular.min.js"></script> <script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script> <!-- App styles --> <style> /* A small custom reset stylesheet is used, to fix style differences between browsers. */ html, body { height: 100%; /* App layout uses a 100% height layout. */ } body, div, p, ul, li { border: 0; /* Remove unwanted space. */ -webkit-box-sizing: border-box; /* Place the border and padding inside the box. */ -moz-box-sizing: border-box; /* Place the border and padding inside the box. */ -ms-box-sizing: border-box; /* Place the border and padding inside the box. */ -o-box-sizing: border-box; /* Place the border and padding inside the box. */ box-sizing: border-box; /* Place the border and padding inside the box. */ margin: 0; /* Remove unwanted space. */ outline: 0; /* Remove unwanted space. */ padding: 0; /* Remove unwanted space. */ } body { padding: 20px; /* Create space between browser border and content. */ min-width: 320px; /* App will not work beneath width: 320px. */ } .level1 { } .level2 { padding-left: 30px; } </style> <!-- App scripts --> <script> (function () { "use strict"; // This is the starting point (main) for the angular app. var app = angular.module("spike", ["kendo.directives"]); }()); (function () { "use strict"; var app = angular.module("spike"); var controller = function ($scope, service) { $scope.title = "Show hierarchy in combobox items, with Kendo and AngularJS."; $scope.countriesAndCities = [ { "id": 1, "name": "The Netherlands", "level": 1 }, { "id": 2, "name": "Amsterdam", "level": 2 }, { "id": 3, "name": "Rotterdam", "level": 2 }, { "id": 4, "name": "US", "level": 1 }, { "id": 5, "name": "Las Vegas", "level": 2 }, { "id": 6, "name": "New York", "level": 2 } ]; $scope.customTemplate = $("#customTemplate").html(); }; app.controller("main", ["$scope", controller]); }()); </script> </head> <body> <div ng-controller="main"> <h2>{{ title }}</h2> <div> <select kendo-combo-box k-template="customTemplate" k-placeholder="'Choose country'" k-filter="contains" k-data-source="countriesAndCities" data-text-field="'name'" data-value-field="'id'" k-auto-bind="false"></select> <script id="customTemplate" type="text/x-kendo-template"> <span class="k-state-default level#= level #"> #= name # </span> </script> </div> </div> </body> </html>
Category: Uncategorized