angulas js experiments

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
--------------

Kendo ui

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

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

kendoGrid.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>

<script src="data/data.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.issues = get_min_Data();
    }
</script>
<body ng-controller="MyController">
<div class="k-panelbar">
    <h2>Kendo Grid with feaures</h2>
</div>
<div id="example">
    <div>
        <div style="height: 10px"></div>
    </div>
    <div>
        <table id="grid" kendo-grid k-data-source="issues" k-selectable="'row'"
             k-columns='[{ "field": "IssueId", "title": "ID", width: 110},
                            { "field": "Description", "title": "Description", width: 200},
                            { "field": "Severity", "title": "Severity"},
                            { "field": "Type", "title": "Type"},
                            { "field": "Status", "title": "Status"}
                            ]'
             k-sortable="true" k-filterable="true"
             k-pageable='{ "refresh": true, "pageSizes": true }'
             k-pageable="5"
             k-reorderable="true">
        </table>
    </div>
</div>
</body>
</html>

data.js
----------
function get_min_Data() {
    return [
        /* Reduced data set */
        { "IssueId":41, "Description":"Serialize Issue 1", "Severity":"Low", "Type":"Bug", "Status":"Open" },
        { "IssueId":2, "Description":"Serialize Issue 2", "Severity":"High", "Type":"Bug", "Status":"Open" },
        { "IssueId":33, "Description":"Serialize Issue 3", "Severity":"Low", "Type":"Bug", "Status":"Open" }    ];
}

Output screen
-----------------

angulas js experiments

Friday, September 13, 2013

Kendo ui Angular select

Kendo ui Angular Grid