KendoUI DropDownList Is Displaying as TextBox in HTML ?
How can is show it is dropdownlist.
This is the below code:
KendodropdownController.js
======================
define(["app"], function (app) {
var extScope;
"user strict";
app.register.controller("KendoUIDropdowncontroller", ["$scope", "$rootScope", "locale", "$window", "$state", "crudService", "validationService", function ($scope, $rootScope, locale, $window, $state, crudService, validationService) {
var init = function () {
var Categorydata = [
{ CategoryId: "index", CategoryName: "Index" },
{ CategoryId: "home", CategoryName: "Home" },
{ CategoryId: "first", CategoryName: "First" },
{ CategoryId: "second", CategoryName: "Second" }
];
$("#Category").kendoDropDownList({
dataTextField: "CategoryName",
dataValueField: "CategoryId",
dataSource: Categorydata,
change: function () {
$window.alert("Selected Value: " + $scope.itemSelected.CategoryId + "\nSelected Text: " + $scope.itemSelected.CategoryName);
}
});
}
init();
}]);
});
Default.html
=============
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
</head>
<body>
<form ng-controller="navCtrl">
<input id="Category" ng-model="currentPage" ng-change="go(currentPage)" style="width:40%" />
</form>
<h1>Index</h1>
<div class="form-group col-md-6">
<div ng-view></div>
</div>
<script src="KendoUIDropDownJS.js"></script>
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
<script data-require="angular-route@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-route.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- Kendo UI-->
<link href="KendoUICustom/bootstrapCustom.css" rel="stylesheet" />
<link href="KendoUICustom/kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="KendoUICustom/kendo.common.min.css" rel="stylesheet" />
<link href="KendoUICustom/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="KendoUICustom/kendo.dataviz.min.css" rel="stylesheet" />
<link href="KendoUICustom/kendo.default.min.css" rel="stylesheet" />
<link href="KendoUICustom/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="KendoUICustom/kendo.rtl.min.css" rel="stylesheet" />
</body>
</html>