The art of simplicity

I’m currently migrating an existing ASP.NET MVC application to ASP.NET Core. After 3 years of working on Single Page Applications through Angular returning to MVC was as straightforward as I hoped. As long as you stay in the full page refresh cycle, everything is quite easy but the moment you want to sprinkle some AJAX magic on top of your code, it turns into a mess quite fast. But not all is bad. Thanks to control libraries like Kendo UI you get a lot of functionality with almost no code. For example the Kendo Grid control is pure magic! Unfortunately it didn’t work out-of-the-box. There is 1 important extra configuration step required. You need to tell ASP.NET Core to maintain the property name casing:

A colleague couldn’t find a clean solution to pass the selected row in a Kendo Grid to an Angular controller method. So here is a short code snippet that shows how this can be done: Here is the UI(admire my great design skills): Here is the corresponding HTML and Angular controller:

Although combining Angular.js and Kendo UI is really easy, there is one thing that bit me in the food when I first started combining the two. Let’s have a look at some code I wrote: And then have a look at this code: Do you see the difference? If you look carefully you should notice that the string ‘c2’ (to format the number as a currency) is quoted inside the attribute values. Without the single inside they will be interpreted as variable names and Angular-Kendo will look for $scope.c2. Luckily Angular-Kendo will emit a warning in the JS console when such variables are not found.

Thanks to the built-in support, using Kendo UI together with Angular.js is really easy. For all widgets you have an Angular directive available. Here are the steps you need to take to get it up and running: Include the necessary script references: Either include the kendo.angular.min.js script file or use the kendo.all.min.js (which contains all widgets including the angular.js integration) Add a dependency to Kendo UI inside your Angular app: var productsApp = angular.module('productsApp', ['ngRoute', 'kendo.directives' ]); Use the Kendo UI directive inside your views. A specific naming pattern is used. You even have 2 options(let’s use for example the NumericTextBox widget): Option 1:  kendo-numeric-text-box Option 2: kendo-numerictextbox Widget options also follow a specific naming pattern. The option name is converted from camelCase to dash-separated-words, and prefixing it with k- . For example:...