16 July, 2014 Roel van Lisdonk 0 Comments 1 category

 

Using Kendo UI mobile switch in AngularJS generated grid.

image

 

Using Kendo UI date picker in AngularJS generated grid.

image

 

Using Kendo UI combobox in AngularJS generated grid.

image

 

All code can be found at:

https://github.com/roelvanlisdonk/Research/tree/master/Research/Research.UI.Web/Client/Features/AngularJS_and_Breeze/Part3

 

Some highlights:

 

AngularJS directive

This directive will render the controls in the grid

spa.app.directive('ngField',['$compile', function ($compile) {

    var directive = {
        restrict: 'A', /* restrict this directive to elements */

        link: function ($scope, element, attrs) {
            var html = '<input ng-disabled="{{vm.isKeyField(prop)}}" type="text" ng-model="entity[prop.name]">';

            if ($scope.prop.relatedNavigationProperty) {
                var relatedTableName = $scope.prop.relatedNavigationProperty.nameOnServer;
                html = '<select kendo-combo-box ng-model="entity[prop.name]" ng-options="record.id as record.firstName for record in vm[\'' + relatedTableName + '\']"></select>';
            } else if ($scope.prop.dataType.name === "DateTime") {
                html = '<input kendo-date-picker k-ng-model="entity[prop.name]" k-format="\'dd-MMM-yyyy\'" />';
            } else if ($scope.prop.dataType.name === "Boolean")
            {
                html = '<input kendo-mobile-switch k-on-label="\'YES\'" k-off-label="\'NO\'" />';
            }

            var compiled = $compile(html)($scope);
            element.replaceWith(compiled);
            element = compiled;
        }
    };
    
    return directive;
}]);

 

HTML

The HTML shows a splash page with the text “Loading data…” by using the ng-cloak AngularJS directive.

By putting all external resources, like “link” and “script” tags at the bottom of the page and inlining the minimal CSS to show the splash page, the splash page is immediately shown to the user, while the AngularJS app is booted and the data is loaded.

<!DOCTYPE html>
<html data-ng-app="app">
<head>
    <title data-ng-bind="title">Angular and Breeze</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

    <!-- All external resources are moved to the bottom of the page, to allow direct rendering of the [splash screen]. -->
    <!-- Only the styling for the [loader / splash screen] is included in the head. -->
    <style type=text/css>
        html, body {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box; /* Border boxing is used, so the padding, margin and borders are within the width and height of the element. */
            height: 100%;           /* Full screen single page app. */
            margin: 0;              /* Prevent unnecessary white space. */
            max-height: 100%;       /* Full screen single page app. */
            outline: 0;             /* Prevent unnecessary white space. */
            padding: 0;             /* Prevent unnecessary white space. */
        }

        body {
            padding: 20px;
        }

        div.spa-splash {
            display: none;
        }

        div.spa-splash, div.spa-splash > div {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box; /* Border boxing is used, so the padding, margin and borders are within the width and height of the element. */
            height: 100%;           /* Full screen single page app. */
            max-height: 100%;       /* Full screen single page app. */
            padding: 20px;            
        }

        div.spa-splash > div {
            border: 1px solid rgb(212, 212, 212);
            padding: 10px;
        }

        [ng-cloak].spa-splash {
          display: block !important;
        }

        [ng-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div class="spa-splash" ng-cloak><div>Loading data...</div></div>
    <div class="spa-page container" data-ng-controller="admin as vm" ng-cloak>
        <div class="spa-page-sidebar">
            <div>Tables</div>
            <div ng-repeat="entityType in vm.entityTypes"><a class="spa-action-link" ng-click="vm.refresh(entityType)">{{ entityType.shortName }}</a></div>
        </div>
        <div class="spa-page-content">
            <div class="spa-grid-toolbar">
                <a class="spa-action-link" ng-click="vm.save()">save</a> |
                <a class="spa-action-link" ng-click="vm.reset()">reset</a> |
                <a class="spa-action-link" ng-click="vm.create()">create</a>
                <i class="fa fa-exclamation-circle"
                   title="Some data has change. Press save to save the changes to the server!"
                   ng-show="vm.isDirty"></i>
            </div>
            <table class="spa-grid">
                <thead>
                    <tr>
                        <th> </th>
                        <th ng-repeat='(key, prop) in vm.entityDataFields'>{{ prop.name }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="entity in vm.entities">
                        <td><a class="spa-action-link" ng-click="vm.delete(entity)">delete</a></td>
                        <td ng-repeat='(key, prop) in vm.entityDataFields'>
                            <div ng-field></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Libraries -->
    <link rel="stylesheet" type="text/css" href="../../../Libraries/FontAwesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../Libraries/Toastr/toastr.min.css" />

    <!-- App -->
    <link rel="stylesheet" type="text/css" href="app.css" />

    <!-- Libraries -->
    <script type="text/javascript" src="../../../Libraries/jQuery/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="../../../Libraries/Angular/angular.js"></script>

    <!-- Kendo -->
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.2.625/styles/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.2.625/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.2.625/styles/kendo.metro.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.2.625/styles/kendo.metro.mobile.min.css" />
    <script type="text/javascript" src="//cdn.kendostatic.com/2014.2.625/js/kendo.all.min.js"></script>

    <!-- Breeze -->
    <script type="text/javascript" src="../../../Libraries/Breeze/breeze.debug.js"></script>
    <script type="text/javascript" src="../../../Libraries/Breeze/breeze.angular.js"></script>

    <!-- Add toastr which needs jQuery (Breeze does not need jQuery). -->
    <script type="text/javascript" src="../../../Libraries/Toastr/toastr.js"></script>
    <script type="text/javascript" src="../../../Libraries/Moment/moment.js"></script>
    <script type="text/javascript" src="../../../Libraries/Spin/spin.js"></script>

    <!-- Add breeze.savequeuing which needs Q (Breeze does not need Q). -->
    <script type="text/javascript" src="../../../Libraries/Q/q.min.js"></script>
    <script type="text/javascript" src="../../../Libraries/Breeze/breeze.savequeuing.js"></script>

    <!-- App -->
    <script type="text/javascript" src="app.js"></script>
</body>
</html>
Tags:
Category: Uncategorized

One Reply to “AngularJS and Breeze – A simple crud app – Part 3 –Adding foreign keys and Kendo UI widgets.”

  1. good job!
    the highlights is not enough. for example:var relatedTableName ,we don’t know where it will be used.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts