angulas js experiments: Kendo ui Angular select

I was playing around with angular js and directive part is pretty great. Recently I came across KendoUI and they have really good integration with AngulasJS.

I am posting a work around I did on select component. Please feel free to share your suggestions.

kendoSelect.html
----------------------
<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<script src="lib/kendoui/js/jquery.min.js"></script>
<script src="lib/angular/angular.1.7.js"></script>
<script src="lib/kendoui/js/kendo.all.min.js"></script>
<script src="lib/kendoui/js/angular-kendo.min.js"></script>

<link href="lib/kendoui/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="lib/kendoui/styles/kendo.default.min.css" rel="stylesheet"/>


<script type="text/javascript">
    var myApp = angular.module("myApp", ['kendo.directives']);

    // controller
    function MyController($scope) {
        $scope.issuePriorities1 = ["Low", "High", "Medium"];

        $scope.issuePriorities2 = [
            {id:1, name:"Low"},
            {id:2, name:"High"},
            {id:3, name:"Medium"}
        ]

        $scope.issuePriorities3 = {
            dataSource:{
                data:[
                    { name:"Low ", id:1 },
                    { name:"High", id:2 },
                    { name:"Medium", id:3 }
                ]
            },
            dataTextField:"name",
            dataValueField:"id",
            optionLabel:"Select Issue Priority"
        };
        $scope.selected = null;
    }
</script>
<body ng-controller="MyController">
<div id="example">
    <div>
        <div id="grid" style="height: 100px"></div>
    </div>
    <div class="k-block">
        <div class="k-header">Simple Option eg : option value="1" Low</div>
        <div>
            <select kendo-drop-down-list>
                <option value="1">Low</option>
                <option value="2">High</option>
                <option value="3">Medium</option>
            </select>
        </div>
    </div>
    <div style="height: 100px"></div>
    <div class="k-block">
        <div class="k-header ">Data from Arrays eg : ["Low", "High", "Medium"]</div>
        <div>
        <select kendo-drop-down-list
                k-option-label="'Select Issue Priority'"
                k-data-source="issuePriorities1"></select>
        </div>
    </div>
    <div style="height: 100px"></div>
    <div class="k-block">
        <div class="k-header">Drop down list from JSON eg : $scope.issuePriorities = [
            {id:1,name : "Low"},
        </div>
        <div>
        <select kendo-drop-down-list
                k-option-label="'Select Issue Priority'"
                k-data-text-field="'name'"
                k-data-value-field="'name'"
                k-data-source="issuePriorities2"
                ng-model="selected"></select>
        </div>
        <div>You selected: {{selected}}</div>
    </div>
    <div style="height: 100px"></div>
    <div class="k-block">
        <div class="k-header">Options From The Controller eg: dataSource:{
            data:[
            { name:"Low ", id:1 },
            { name:"High", id:2 },
            { name:"Medium", id:3 }
            ]
            },
            dataTextField:"name",
            dataValueField:"id",
            optionLabel:"Select Issue Priority"
            };</div>
        <div>
        <select kendo-drop-down-list k-options="issuePriorities3"></select>
        </div>
    </div>
</div>

</body>
</html>

Screenshot
--------------

angulas js experiments

Friday, September 13, 2013

Kendo ui Angular select

No comments:

Post a Comment