KendoUI DropDownList Is Displaying as TextBox in HTML ? [Resolved]

Posted by Kasani007 under AngularJS on 3/22/2016 | Points: 10 | Views : 706 | Status : [Member] | Replies : 1
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>




Responses

Posted by: Rajnilari2015 on: 3/25/2016 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 50

Up
0
Down

Resolved
This seems to be a bug http://www.telerik.com/forums/dropdownlist-in-toolbar-showing-as-a-text-box-so-doesn-t-work

Here is a link that about dropdownlist of Kendoui: http://demos.telerik.com/kendo-ui/dropdownlist/index

--
Thanks & Regards,
RNA Team

Kasani007, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response