Roel van Lisdonk on October 29th, 2014

 

Plunker

http://plnkr.co/edit/iXpQEeDQsy3X08EgkttQ?p=preview

 

image

Tags: ,

Roel van Lisdonk on October 28th, 2014

Here’s a plunker demonstrating a kendo numeric text box with euro sign in it, bound to AngularJS.

http://plnkr.co/edit/z2jpoZ3WQRmHxwnhIF4G?p=preview

 

image

 

<input kendo-numeric-text-box k-min="0" k-format="'c0'" k-ng-model="totalCost" type="text" />

 

Main pitfall is the single quotes inside the k-format


																				
				
Roel van Lisdonk on October 27th, 2014

Just a nice example on how to sort items in a list with ng-repeat:

http://plnkr.co/edit/qa6LdhDdggApWPmOrwGD?p=preview

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="spike">
<head>
    <!--
        This page can be used as a base for spiking with jQuery, AngularJS and Kendo.
        All scripts and styles are loaded from a CDN or inline.
    -->
    <title>Spike page</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Use highest support for modern standards . -->
    <!-- Library styles -->

    <!-- Library scripts -->
    <script src="http://cdn.kendostatic.com/2014.2.1008/js/angular.min.js"></script>

    <!-- App styles -->
    <style>
        /*
            A small custom reset stylesheet is used, to fix style differences between browsers.
        */
        html, body {
            height: 100%; /* App layout uses a 100% height layout. */
        }

        body, div, p, ul, li {
            border: 0; /* Remove unwanted space. */
            -webkit-box-sizing: border-box; /* Place the border and padding inside the box. */
            -moz-box-sizing: border-box; /* Place the border and padding inside the box. */
            -ms-box-sizing: border-box; /* Place the border and padding inside the box. */
            -o-box-sizing: border-box; /* Place the border and padding inside the box. */
            box-sizing: border-box; /* Place the border and padding inside the box. */
            margin: 0; /* Remove unwanted space. */
            outline: 0; /* Remove unwanted space. */
            padding: 0; /* Remove unwanted space. */
        }

        body {
            padding: 20px; /* Create space between browser border and content. */
            min-width: 320px; /* App will not work beneath width: 320px. */
        }

    </style>

    <!-- App scripts -->
    <script>

        (function () {
            "use strict";

            // This is the starting point (main) for the angular app.
            var app = angular.module("spike", ["kendo.directives"]);
        }());

        (function () {
            "use strict";

            var app = angular.module("spike");

            var controller = function ($scope, service) {
                $scope.title = "Sort items in a list.";
                $scope.countriesAndCities = [
                    { "id": 1, "name": "The Netherlands", "show": true, "sort": 1 },
                    { "id": 2, "name": "Amsterdam", "show": true, "sort": 2 },
                    { "id": 3, "name": "Rotterdam", "show": false, "sort": 3 },
                    { "id": 4, "name": "US", "show": false, "sort": 4 },
                    { "id": 5, "name": "Las Vegas", "show": true, "sort": 5 },
                    { "id": 6, "name": "New York", "show": true, "sort": 6 }
                ];
            };

            app.controller("main", ["$scope", controller]);
        }());
    </script>
</head>
<body>
    <div ng-controller="main">
        <h2>{{ title }}</h2>
        <div>
            <br />
            Normal order:
            <br />
            <br />
            <div ng-repeat="item in countriesAndCities | filter: { show: true } | orderBy:'sort':true">
                {{ item.name }}
            </div>
            <br />
            <br />
            Reversed order:
            <br />
            <br />
            <div ng-repeat="item in countriesAndCities | filter: { show: true } | orderBy:'sort':false">
                {{ item.name }}
            </div>
        </div>
    </div>
</body>
</html>

Tags:

Roel van Lisdonk on October 24th, 2014

Here is a plunkr showing a combobox with hierarchy:

http://plnkr.co/edit/PaiRPD6dZNq0JaT2Tkdg?p=preview

 

image

 

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="spike">
<head>
    <!--
        This page can be used as a base for spiking with jQuery, AngularJS and Kendo.
        All scripts and styles are loaded from a CDN or inline.
    -->
    <title>Spike page</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Use highest support for modern standards . -->
    <!-- Library styles -->
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.silver.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.silver.mobile.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.silver.min.css" rel="stylesheet" />

    <!-- Library scripts -->
    <script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.1008/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

    <!-- App styles -->
    <style>
        /*
            A small custom reset stylesheet is used, to fix style differences between browsers.
        */
        html, body {
            height: 100%; /* App layout uses a 100% height layout. */
        }

        body, div, p, ul, li {
            border: 0; /* Remove unwanted space. */
            -webkit-box-sizing: border-box; /* Place the border and padding inside the box. */
            -moz-box-sizing: border-box; /* Place the border and padding inside the box. */
            -ms-box-sizing: border-box; /* Place the border and padding inside the box. */
            -o-box-sizing: border-box; /* Place the border and padding inside the box. */
            box-sizing: border-box; /* Place the border and padding inside the box. */
            margin: 0; /* Remove unwanted space. */
            outline: 0; /* Remove unwanted space. */
            padding: 0; /* Remove unwanted space. */
        }

        body {
            padding: 20px; /* Create space between browser border and content. */
            min-width: 320px; /* App will not work beneath width: 320px. */
        }

        .level1 {

        }
        .level2 {
            padding-left: 30px;
        }
    </style>

    <!-- App scripts -->
    <script>

        (function () {
            "use strict";

            // This is the starting point (main) for the angular app.
            var app = angular.module("spike", ["kendo.directives"]);
        }());

        (function () {
            "use strict";

            var app = angular.module("spike");

            var controller = function ($scope, service) {
                $scope.title = "Show hierarchy in combobox items, with Kendo and AngularJS.";
                $scope.countriesAndCities = [
                    { "id": 1, "name": "The Netherlands", "level": 1 },
                    { "id": 2, "name": "Amsterdam", "level": 2 },
                    { "id": 3, "name": "Rotterdam", "level": 2 },
                    { "id": 4, "name": "US", "level": 1 },
                    { "id": 5, "name": "Las Vegas", "level": 2 },
                    { "id": 6, "name": "New York", "level": 2 }
                ];

                $scope.customTemplate = $("#customTemplate").html();
            };

            app.controller("main", ["$scope", controller]);
        }());
    </script>
</head>
<body>
    <div ng-controller="main">
        <h2>{{ title }}</h2>
        <div>
            <select kendo-combo-box
                    k-template="customTemplate"
                    k-placeholder="'Choose country'"
                    k-filter="contains"
                    k-data-source="countriesAndCities"
                    data-text-field="'name'"
                    data-value-field="'id'"
                    k-auto-bind="false"></select>
            <script id="customTemplate" type="text/x-kendo-template">
                <span class="k-state-default level#= level #">
                    #= name #
                </span>
            </script>
        </div>
    </div>
</body>
</html>

Tags: ,

Roel van Lisdonk on October 23rd, 2014

If you want to make the background of a chart transparent or set it to a specific color, use the “chartArea” property.

 

To set the background transparent with angular use:

<div kendo-chart
     k-chart-area="{ background: '' }"

Tags: ,

Roel van Lisdonk on October 23rd, 2014

I was getting a HTTP 500 error, when posting data from AngularJS to a MVC controller, which had the attribute ValidateAntiForgeryToken applied to it. This attribute expects a form to be posted to the MVC controller action method, but I wanted to sent JSON. If you want to do that then you can follow the blogpost from julian jelfs.

 

Now I just add: @Html.AntiForgeryToken()

Then I apply the custom attribute ValidateJsonAntiForgeryToken to the MVC controller action method, like

[HttpPost]
[Authorize] [ValidateJsonAntiForgeryToken]
public ActionResult GetDashboardData(DashboardViewModel model) {

Now I can Post data in AngularJS like:

// When using the @Html.AntiForgeryToken() and [ValidateJsonAntiForgeryToken], a http POST, 
// should contain a AntiForgeryToken in the header. // The @Html.AntiForgeryToken() will write add a hidden HTML input element with the name
//"__RequestVerificationToken". // This input element will contain to AntiForgeryToken. // The MVC AuthorizeAttribute [ValidateJsonAntiForgeryToken],
//will check the http request header for the "AntiForgeryToken".
function getHttpConfig() { var token = angular.element("input[name='__RequestVerificationToken']").val(); var config = { headers: { '__RequestVerificationToken': token } }; return config; }

var config = getHttpConfig();
var url = “http://localhost”;
var postData = {}; return $http.post(url, postData, config).then(function (response) {
// Do something terrible
});

 

Solution

 

https://julianjelfs.wordpress.com/category/mvc/

Tags: ,

Roel van Lisdonk on October 20th, 2014

 

Here’s a plunkr demonstrating, binding a kendo mobile switch

http://plnkr.co/edit/KlJ4JW?p=preview

image

 
 

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="spike">
<head>
    <!–
        This page can be used as a base for spiking with jQuery, AngularJS and Kendo.
        All scripts and styles are loaded from a CDN or inline.
    –>
    <title>Spike page</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!– Use highest support for modern standards . –>
    <!– Library styles –>
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.silver.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.silver.mobile.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.silver.min.css" rel="stylesheet" />

    <!– Library scripts –>
    <script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.1008/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

    <!– App styles –>
    <style>
        /*
            A small custom reset stylesheet is used, to fix style differences between browsers.
        */
        html, body {
            height: 100%; /* App layout uses a 100% height layout. */
        }

        body, div, p, ul, li {
            border: 0; /* Remove unwanted space. */
            -webkit-box-sizing: border-box; /* Place the border and padding inside the box. */
            -moz-box-sizing: border-box; /* Place the border and padding inside the box. */
            -ms-box-sizing: border-box; /* Place the border and padding inside the box. */
            -o-box-sizing: border-box; /* Place the border and padding inside the box. */
            box-sizing: border-box; /* Place the border and padding inside the box. */
            margin: 0; /* Remove unwanted space. */
            outline: 0; /* Remove unwanted space. */
            padding: 0; /* Remove unwanted space. */
        }

        body {
            padding: 20px; /* Create space between browser border and content. */
            min-width: 320px; /* App will not work beneath width: 320px. */
        }

        .km-switch {
            margin-top: 20px;
        }

        .km-switch, .km-checkbox, .km-switch-label-on, .km-switch-label-off {
            cursor: pointer;
        }
    </style>

    <!– App scripts –>
    <script>

        (function () {
            "use strict";

            // This is the starting point (main) for the angular app.
            var app = angular.module("spike", ["kendo.directives"]);
        }());

        (function () {
            "use strict";

            var app = angular.module("spike");

            var controller = function ($scope, service) {
                $scope.message = "The switch should show YES:";
                $scope.isChecked = true;
            };

            app.controller("MainController", ["$scope", controller]);
        }());
    </script>
</head>
<body>
    <div ng-controller="MainController">
        <div>{{ message }}</div>
        <div><input kendo-mobile-switch type="checkbox" k-on-label="’Yes’" k-off-label="’No’" k-ng-model="isChecked" value="{{ isChecked }}" /></div>
    </div>
</body>
</html>

 
 
 

Tags: ,

Roel van Lisdonk on October 17th, 2014

AngularJS Batarang is a Google Chrome plugin, that helps you identify problems in AngularJS apps.

 

For example in my last app, a Kendo UI chart was not showing correctly, so I opened the Google Chrome developer tools and switched to the AngularJS tab.

 

After selecting the correct scope, I could immediately see, I had made a mistake in my code.

image

Nice!

 

image

Tags:

Roel van Lisdonk on October 17th, 2014

Microsoft Visual Studio 2013 Update 4 RC can be downloaded at: http://www.microsoft.com/en-us/download/confirmation.aspx?id=44545

 

It contains many new features for an update: http://blogs.msdn.com/b/webdev/archive/2014/10/16/announcing-new-web-features-in-visual-studio-2013-update-4-rc.aspx

 

The thing I like the most:

 

Support for custom elements, polymer-elements and attributes

We no longer validate unknown attributers for custom elements as there will be many custom made tags in different frameworks. So there will no longer be squiggles under the unknown elements.

clip_image005[5]

Tags:

 

If you want to speed up your SPA development process, it would be nice if you could reload all browser currently showing your SPA, when you press CTRL-S in Visual Studio 2013. The build-in Browserlink provides this feature for ASP .NET WebForms en ASP .NET MVC, but you could also use BrowserSync, which will work with any editor.

 

BrowserSync

 

1. Download node.js http://nodejs.org/download/

2. Install node.js (next – next – finish)

3. Open a command prompt (with administrator privileges) and enter:

4. npm install -g browser-sync

5. Change directory to the location of your Visual Studio solution file:

    – CD “C:\Projects\MyProject”

5. Start your web application in Visual Studio by pressing F5

    – Look at the browser address bar to get the URL to connect BrowserSync to, in my case localhost:50367

6. To start watching all files in all subfolders, at the command prompt enter:

    browser-sync start –proxy "localhost:50367" –files "**.*"

 

This will start a new instance of the default browser on an other port, showing your site connected to BrowserSync

In my case the new url was: http://localhost:3000/

Now when you edit a file in Visual Studio en press CTRL-S the browser at http://localhost:3000 will be refreshed.

 

BrowserLink

BrowserLink is provided in the box with Microsoft Visual Studio 2013, but OOB it will not work with SPA applications created with only html, JavaScript and CSS files.

To get BrowserLink working with those kind of web applications add the following to the web.config:

<system.webServer>
    <handlers>
            <add name="Browser Link for HTML" path="*.html" verb="*"
           type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
           resourceType="File" preCondition="integratedMode" />
    </handlers>
  </system.webServer>

The good thing about BrowserLink that it is in the box and you don’t have to specify all subfolders you want to watch.

The downside is that you still have to use CTRL-S and CTRL-ALT-ENTER. This can be an upside if you want to edit multiple files en then refresh the connected browsers.

For now I will stick with BrowserLink, because it’s in the box.

 

Note: when using the “empty” asp .net template, I could not get BrowserLink to work, but when I used the web api template all was just fine.

Tags: