Skip to main content

Angular.js and KendoUI: be careful when specifying widget options

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:

<div class="editor-field">
<input kendo-numerictextbox k-format="c2" ng-model="product.unitPrice" />
</div>
view raw widgetoptionswrong.html hosted with ❤ by GitHub

And then have a look at this code:

<div class="editor-field">
<input kendo-numerictextbox k-format="'c2'" ng-model="product.unitPrice" />
</div>
view raw widgetoptionscorrect.html hosted with ❤ by GitHub

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.

Labels

Labels:

Popular posts from this blog

Kubernetes–Limit your environmental impact

Reducing the carbon footprint and CO2 emission of our (cloud) workloads, is a responsibility of all of us. If you are running a Kubernetes cluster, have a look at Kube-Green . kube-green is a simple Kubernetes operator that automatically shuts down (some of) your pods when you don't need them. A single pod produces about 11 Kg CO2eq per year( here the calculation). Reason enough to give it a try! Installing kube-green in your cluster The easiest way to install the operator in your cluster is through kubectl. We first need to install a cert-manager: kubectl apply -f https://github.com/cert-manager/cert-manager/releases/download/v1.14.5/cert-manager.yaml Remark: Wait a minute before you continue as it can take some time before the cert-manager is up & running inside your cluster. Now we can install the kube-green operator: kubectl apply -f https://github.com/kube-green/kube-green/releases/latest/download/kube-green.yaml Now in the namespace where we want t...
Read more

Azure DevOps/ GitHub emoji

I’m really bad at remembering emoji’s. So here is cheat sheet with all emoji’s that can be used in tools that support the github emoji markdown markup: All credits go to rcaviers who created this list.
Read more

.NET 9 - Goodbye sln!

Although the csproj file evolved and simplified a lot over time, the Visual Studio solution file (.sln) remained an ugly file format full of magic GUIDs. With the latest .NET 9 SDK(9.0.200), we finally got an alternative; a new XML-based solution file(.slnx) got introduced in preview. So say goodbye to this ugly sln file: And meet his better looking slnx brother instead: To use this feature we first have to enable it: Go to Tools -> Options -> Environment -> Preview Features Check the checkbox next to Use Solution File Persistence Model Now we can migrate an existing sln file to slnx using the following command: dotnet sln migrate AICalculator.sln .slnx file D:\Projects\Test\AICalculator\AICalculator.slnx generated. Or create a new Visual Studio solution using the slnx format: dotnet new sln --format slnx The template "Solution File" was created successfully. The new format is not yet recognized by VSCode but it does work in Jetbr...
Read more