In the following screendump, I used 6 sparkline fields:

 

image

 

To increase the width / height of the sparkline (bar) I set the following values:

- charArea options (height, padding, margin)

- Series options (gap and spacing)

$scope.kostenMinderPersoneelChartOptions = {
            chartArea: {
                background: "",
                height: 17,
                margin: {
                    top: 1,
                    bottom: 0,
                    left: 0,
                    right: 0
                },
                padding: 0
            },
            tooltip: {
                visible: false
            },
            series: [
                {
                    type: 'bar',
                    color: '#EC008C',
                    field: 'sparkline',
                    gap: 0,
                    spacing: 0
                }
            ],
            valueAxis: {
                min: 0,
                max: 200000
            }
        };

												

Tags: ,

When I right clicked on my using statements in a C# file, the context edit menu, didn’t contain the options for refactoring and “organize usings” and the menu item “F12 Go to definition” was grayed out.

I found the fix at: http://stackoverflow.com/questions/25898616/visual-studio-go-to-definition-disabled-or-gray-out

 

  • Clean your solution
  • Close solution
  • Remove any [solution].ncb, [solution].suo, [solution].vspscc files
  • Reopen solution
  • Rebuild solution

Menu options should appear and be enabled.

Tags:

Code can be found at: http://plnkr.co/edit/wBFKg33JxG7ABIHBvtik?p=preview

 

image

 

 

 

image

 

Based on the code found at: http://codepen.io/iamtyce/pen/kxrhC

 

html template

<div class="toggle toggle-alternate {{ value }}">
    <label class="{{ value }}">{{ getSwitchText() }}</label>
    <input ng-class="{ isChecked: value == 'off' }" type="radio" name="toggle" value="off" ng-model="value">
    <input ng-class="{ isChecked: value == 'on' }" type="radio" name="toggle" value="on" ng-model="value">
    <span class="switch {{ value }}"></span>
</div>

Part of the code

image

Tags: ,

Code can be found at: http://plnkr.co/edit/8CQURTLHftIpBwXUAN7s?p=preview

 

Let say, we want to show all records in a pageable kendo-grid, when the user clicks on a button.

This can accomplished by programmatically setting the page size of a kendo-grid and using the k-rebind attribute:

 

image

 

After clicking on the “Set page size” button:

 

image

 

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

        (function () {
            "use strict";

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

            // Set culture info to Ducth:
            kendo.culture("nl-NL");
        }());
   
        
        (function () {
            "use strict";

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

            var controller = function ($scope, $animate) {
                $scope.title = "Programmatically set pagesize kendo grid.";
                
                var data = [
                    { id: 1, name: "Bob1" },
                    { id: 2, name: "Bob2" },
                    { id: 3, name: "Bob3" },
                    { id: 4, name: "Bob4" },
                    { id: 5, name: "Bob5" },
                    { id: 6, name: "Bob6" },
                    { id: 7, name: "Bob7" },
                    { id: 8, name: "Bob8" },
                    { id: 9, name: "Bob9" },
                    { id: 10, name: "Bob10" },
                    { id: 11, name: "Bob11" },
                    { id: 12, name: "Bob12" }
                ]


                $scope.mainGridOptions = {
                    dataSource: {
                        data: data,
                        pageSize: 4
                    },
                    pageable: {
                        pageSizes: [4, 8, 12]
                    },
                    sortable: true,
                    dataBinding: function (e) {
                        // This is a fix.
                        // When the user selects an other page size in the "page size" dropdownlist, 
                        // the MainGridOptions are not updated.
                        // To reflect the changes from the "page size" dropdownlist, we set the "page size" manually here.
                        $scope.mainGridOptions.dataSource.pageSize = e.sender.dataSource.pageSize();
                    }
                };

                $scope.setPageSize = function () {
                    $scope.mainGridOptions.dataSource.pageSize = data.length;
                };
            };

            app.controller("main", ["$scope", controller]);
        }());
    </script>
<div ng-controller="main">
        <h2>{{ title }}</h2>
        <div>
            <br />
            <button ng-click="setPageSize()">Set page size</button>
            <br />
            <br />
            <div kendo-grid="mainGrid"
                 k-options="mainGridOptions"
                 k-rebind="mainGridOptions"></div>
        </div>
    </div>

Tags: ,

 

See code at, Plunker: http://plnkr.co/edit/jUzCC1FmtgxdX4gWTVIW?p=preview

 

I used a custom directive with isolated scope:

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

        (function () {
            "use strict";

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


        }());
   
        (function () {
            "use strict";

            // Adds an animation to an element.
            var directive = function () {
                function link($scope, element, attributes, controller) {

                    $scope.$watch('loading', function (newValue, oldValue) {
                        if (newValue === true) {
                            element.removeClass("progress-indicator fa fa-refresh spin");
                            element.addClass("progress-indicator fa fa-refresh spin");
                        }
                        else {
                            element.removeClass("progress-indicator fa fa-refresh spin");
                        }
                    });   
                }

                return {
                    restrict: "EA",  // Directive be used as element and as attribute.
                    link: link,
                    scope: {
                        // This directive expects an attribute "loading".
                        // The value of the attribute "loading" will be watched.
                        // When this value === true, classes will be added to "show" and animate a progressindicator.
                        // When this value !== true, classes will be removed, to stop animation and "hide" the progressindicator.
                        loading: "=loading"
                    }
                };
            };

            angular.module('spike').directive('zvdzProgress', [directive]);
        }());

        (function () {
            "use strict";

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

            var controller = function ($scope, $animate) {
                $scope.title = "Start progress animation on click.";
               
                $scope.isLoading = false;

                $scope.start = function () {
                    $scope.isLoading = true;
                };

                $scope.stop = function () {
                    $scope.isLoading = false;
                };
            };

            app.controller("main", ["$scope", controller]);
        }());
    </script>

 

<div ng-controller="main">
        <h2>{{ title }}</h2>
        <div>
            <br />
            <button ng-click="start()">Start</button>
            <br />
            <br />
            <button ng-click="stop()">Stop</button>
            <br />
            <br />
            <div zvdz-progress loading="isLoading"></div>
        </div>
    </div>

 

 

image

 

On start ng-click, a refresh icon is shown that spins:

image

Tags: ,

I Just discovered that Visual Studio will automatically re-minify a css file, when the original not minified version is altered.

So I have two file: in a folder including the map files:

 

test.css

test.css.map

test.min.css

 

When I change the test.css the test.min.css is automatically overwritten by a new minified version.

Awesome!

Tags:

Roel van Lisdonk on November 7th, 2014

When I stopped Block UI the wait cursor remained until I moved the mouse.

To fix this problem I changed the Block UI css (I moved the “cursor: wait” from the class .block-ui-container to the class .block-ui-active):

 

.block-ui-container {
  position: absolute;
  z-index: 10000;
  top: 0; right: 0; bottom: 0; left: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  filter: alpha(opacity=00);
}

.block-ui-active {
    cursor: wait;
}

Tags:

Roel van Lisdonk on November 7th, 2014

If you want to sent arbitrary JSON data to a MVC controller action method, you can use the following code:

[HttpPost]
public ActionResult HandleRequest()
{
    // Read the RAW JSON from the request, 
    // because MVC does not support a dynamic input parameter or an input parameter of type JObject.
    // ASP .NET Web API does support a dynamic input parameter or an input parameter of type JObject.
    string json = new StreamReader(this.Request.InputStream).ReadToEnd();
    dynamic clientData = JObject.Parse(json);

Tags: , ,

Roel van Lisdonk on November 6th, 2014

Just follow the answer on:

http://stackoverflow.com/questions/9499794/single-controller-with-multiple-get-methods-in-asp-net-web-api

Tags:

image

 

Here’s is the code:

 

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

 

Yes, yes I know this can easily be done with the standard AngularJS ngAnimate directive, but I wanted to play around with a custom directive, isolated scope and the AngularJS $animate service. So I decided to use a wobble effect from the Animate.css library on a “alarm bell”.

 

The code use a css class “myWobble”, that uses a named keyframe animation from the Animate.css library, called: “wobble”.

.myWobble {
    -moz-animation: wobble 1s;
    -o-animation: wobble 1s;
    -webkit-animation: wobble 1s;
    animation: wobble 1s;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

Then the custom directive “zvdz-animate” is used to start the animation on a dom event (in this case the on  “click” event). The directive will add the class “myWobble” to the element, when the animation is done and the “reset” option is set to “true”, the class “myWobble” will be removed, so when the user clicks again on the element, the animation is started again. When the “reset” option is set to “false” the class will not be removed and the animation will not be fired again.

In some case this is what you want, but in this case not.

<div class="alarmContainer" zvdz-animate="{ effects: [{ on: 'click', className: 'myWobble', reset: true }] }">
    <a href="" class="fa fa-bell-o"></a>
</div>

Tags: , ,