jube-fork/Jube.App/wwwroot/kendo/examples/dropdownlist/angular.html

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/angular.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example" ng-app="KendoDemos">
    <div class="demo-section k-content" ng-controller="MyCtrl">
    <h4>Static data</h4>
    <select kendo-drop-down-list  style="width: 100%;">
      <option>Albania</option>
      <option>Andorra</option>
      <option>Armenia</option>
      <option>Austria</option>
      <option>Azerbaijan</option>
      <option>Belarus</option>
      <option>Belgium</option>
      <option>Bosnia & Herzegovina</option>
      <option>Bulgaria</option>
      <option>Croatia</option>
      <option>Cyprus</option>
      <option>Czech Republic</option>
      <option>Denmark</option>
      <option>Estonia</option>
      <option>Finland</option>
      <option>France</option>
      <option>Georgia</option>
      <option>Germany</option>
      <option>Greece</option>
      <option>Hungary</option>
      <option>Iceland</option>
      <option>Ireland</option>
      <option>Italy</option>
      <option>Kosovo</option>
      <option>Latvia</option>
      <option>Liechtenstein</option>
      <option>Lithuania</option>
      <option>Luxembourg</option>
      <option>Macedonia</option>
      <option>Malta</option>
      <option>Moldova</option>
      <option>Monaco</option>
      <option>Montenegro</option>
      <option>Netherlands</option>
      <option>Norway</option>
      <option>Poland</option>
      <option>Portugal</option>
      <option>Romania</option>
      <option>Russia</option>
      <option>San Marino</option>
      <option>Serbia</option>
      <option>Slovakia</option>
      <option>Slovenia</option>
      <option>Spain</option>
      <option>Sweden</option>
      <option>Switzerland</option>
      <option>Turkey</option>
      <option>Ukraine</option>
      <option>United Kingdom</option>
      <option>Vatican City</option>
    </select>

    <h4 style="padding-top: 2em;">Remote data</h4>
    <select kendo-drop-down-list
            k-data-text-field="'ProductName'"
            k-data-value-field="'ProductID'"
            k-data-source="productsDataSource"
            style="width: 100%"></select>

    <h4 style="padding-top: 2em;">Custom item template</h4>
    <select id="customers"
            kendo-drop-down-list style="width: 100%"
            k-options="customOptions"></select>

    <style>
        .dropdown-header {
            border-width: 0 0 1px 0;
            text-transform: uppercase;
        }
    
        .dropdown-header > span {
            display: inline-block;
            padding: 10px;
        }
    
        .dropdown-header > span:first-child {
            width: 50px;
        }
    
        .selected-value {
            display: inline-block;
            vertical-align: middle;
            width: 24px;
            height: 24px;
            background-size: 100%;
            margin-right: 5px;
            border-radius: 50%;
        }
    
        #customers-list .k-item {
            line-height: 1em;
            min-width: 300px;
        }
        
        /* Material Theme padding adjustment*/
        
        .k-material #customers-list .k-item,
        .k-material #customers-list .k-item.k-state-hover,
        .k-materialblack #customers-list .k-item,
        .k-materialblack #customers-list .k-item.k-state-hover {
            padding-left: 5px;
            border-left: 0;
        }
    
        #customers-list .k-item > span {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: inline-block;
            vertical-align: top;
            margin: 20px 10px 10px 5px;
        }
    
        #customers-list .k-item > span:first-child {
            -moz-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
            -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
            box-shadow: inset 0 0 30px rgba(0,0,0,.3);
            margin: 10px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-size: 100%;
            background-repeat: no-repeat;
        }
    
        #customers-list h3 {
            font-size: 1.2em;
            font-weight: normal;
            margin: 0 0 1px 0;
            padding: 0;
        }
    
        #customers-list p {
            margin: 0;
            padding: 0;
            font-size: .8em;
        }
    </style>
</div>
</div>

<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
          $scope.productsDataSource = {
            type: "odata",
            serverFiltering: true,
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                }
            }
        };
    
        $scope.customersDataSource = {
            transport: {
                read: {
                    dataType: "jsonp",
                    url: "https://demos.telerik.com/kendo-ui/service/Customers",
                }
            }
        };
    
        $scope.customOptions = {
            dataSource: $scope.customersDataSource,
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
    
            headerTemplate: '<div class="dropdown-header k-widget k-header">' +
                '<span>Photo</span>' +
                '<span>Contact info</span>' +
                '</div>',
    
            // using {{angular}} templates:
            valueTemplate: '<span class="selected-value" style="background-image: url(\'//demos.telerik.com/kendo-ui/content/web/Customers/{{dataItem.CustomerID}}.jpg\')"></span><span>{{dataItem.ContactName}}</span>',
            
            template: '<span class="k-state-default" style="background-image: url(\'//demos.telerik.com/kendo-ui/content/web/Customers/{{dataItem.CustomerID}}.jpg\')"></span>' +
                      '<span class="k-state-default"><h3>{{dataItem.ContactName}}</h3><p>{{dataItem.CompanyName}}</p></span>',
        };    
      })
</script>


    
</body>
</html>