Kendo's ObservableObject is a true workhorse; a major backbone of their MVVM framework, and the set() method plays a critical role in that framework, both allowing the framework to trigger events and also keeping track of whether the value has changed. However, using set() blindly every time you need to assign a value to a property of an ObservableObject can carry a stiff performance penalty, as I encountered recently.

In my case, I had a Grid bound to a DataSource that was being populated client-side and I needed to compute the rank of newly added rows. My first implementation looked ...
Every other control in Kendo's suite of widgets follows a familiar pattern: define one field to use for display and define another field to use for the value. When you work with Kendo's AutoComplete control, you will quickly find that there is only a dataTextField but no dataValueField. The top Google search result for "kendo autocomplete datavaluefield" at the time of writing is a Telerik support discussion on this topic, but the best suggestion to be found there is to perform a reverse lookup in the DataSource by the displayed text. Hardly robust and not at all elegant!

Here's the ...
We've all had the need to sort arrays of objects by various combinations of properties, even various combinations of ascending and descending properties. If you search for how to do this with Underscore, the majority of answers recommend doing something incredibly hokey like making a string comprised of the concatenated string representations of all the properties you want to sort by. Icky and won't even work well if some properties need to be sorted descending. What if I told you... there is a better way?

In one such question on Stack Overflow, there is a response not marked ...
I've gone on at length before about inheritance in EF, specifically Table Per Type inheritance, and for the sake of this post, I'm going to assume you already know how to perform an outer join with LINQ. But what if you want to perform an outer join of a base class table to one (or more) subclass tables? I couldn't think of a way to get it done, but a colleague presented a solution that seems blindingly obvious once demonstrated. In the following incantation, assume that Student is modeled as a subclass of Person:

from p in Persons
join ...
This time I wanted to share something that might be a bit esoteric about Kendo MVVM bound click event handlers, but I think it's kind of interesting and I hope you will too. Consider the following markup and code:
  <input type="button" data-bind="attr: { value: buttonValue }, click: buttonClick">
  <input type="button" data-bind="attr: { value: inner.buttonValue }, click: inner.buttonClick">
var viewModel = kendo.observable({
  buttonValue: 'outer',
  buttonClick: function() {
    console.log('outer click', this.get('clickOutput'...
When working with Kendo DataSources, it is very easy to accidentally disconnect your original data from the data in the DataSource. Understanding the causes will let you prevent this from happening and keep all references to your data pointing to the same place.

Observable Wrapping

Example 1

var data = [
  { company: 'Apple', os: 'OSX' }
var apple = data[0];
var viewModel = kendo.observable({
  gridSource: new{
    data: data
kendo.bind($(document.body), viewModel);
data.push({ company: 'Google', os: 'Android' });
apple.set('os', 'iOS');

This example illustrates ...


So far in this series, I've written about Overly Chatty QueriesToo Many Columns, and Insufficiently Chatty Queries. There is one more big one that I've left until last, because in my view, it's the most obvious of all the sins. However, with all of the others out of the way, let's take a moment to talk about the Sin... of Too Many Rows.


As a consultant, I probably see more than my fair share of poor-quality code; the projects that are struggling are the ones that need our help. Even considering that, I have ...

Last time in this series, I showed how a common and easy-to-use method of Entity Framework would result in more columns than necessary being returned from the database, and before that, I described the cause and solution for Overly Chatty Queries. At the end of the last post, I said that yes, there is such a thing as an "Underly" chatty query, and I suspect that statement might have sounded odd to some. After all, the first post was all about how bad it is to have a chatty query because issuing new connections and queries to the database ...


Last time I talked about the sin of Overly Chatty Queries and pointed out two other sins while showing an example of an Overly Chatty Query and how to fix it. One of those sins was the sin of Too Many Columns, and that's what I'm going to discuss this time.


Here is the code snippet I showed last time which demonstrates how to eagerly load entities, ensuring you have all the data you need in a single query rather than requiring an additional query per loop iteration:

01.var orders =
02.    from order in Orders.Include(o ...


I love using LINQ to filter, transform, and aggregate collections. LINQ provides a very concise and expressive syntax that lets you do more with fewer lines of code, which in turn means generally higher productivity, reduced maintenance, and fewer bugs. However, all of these things are unconditionally true only regarding in-memory collections. When it comes to querying a relational DB, LINQ has a dark side: it’s almost too good at hiding what’s really happening. This could cause a naïve developer to write poor data access code, because a query that accesses a DB is almost indistinguishable from one that ...

As consultants, we are often called upon to maintain or even rescue large, existing projects with poorly written code. When we are called in at the last minute, time is of the utmost essence and there is no time for the luxury of rewriting or even refactoring. One particularly nasty problem that can come of this is when our services are needed to debug something that has gone wrong in a method that is hundreds of lines long, composed of LINQ statement built upon LINQ statement ad infinitum. The complication here comes the from Visual Studio debugger's very poor support ...
CSS arrows are very trendy right now. You've probably seen them around; they are really just triangles hanging around next to a bubble or other popup, pointing toward where the popup content came from. What if you wanted to duplicate that look with a Kendo DropDownList? Well, you can, and in fact you can do it with nothing but CSS, in such a way that every Kendo DropDownList will use! Let's get started!

Anatomy of a Kendo DropDownList

The first important thing to understand before you can try to style a DropDownList is what happens to the DOM when you ...

I ran into these errors on my first go with them, so hopefully I can spare my readers from suffering the same. Let's just set this up and jump right in. This looks like it should work just fine, right?

<div id="app">
<script id="layoutTemplate" type="text/template">
  <div id="view"></div>
<script id="viewTemplate" type="text/template">

var view = new kendo.View($("#viewTemplate").html());
var layout = new kendo.Layout($("#layoutTemplate").html());

In my last blog post about migrating ASP.NET Membership users to ServiceStack, I mentioned that it was possible to return user roles in each result row rather than requiring a separate query to return roles. This time I'll go into detail on how to do that both for collections of scalars and collections of complex types.

First of all, you need to be able to escape strings that contain JSV characters. The description of the format and escaping rules are here. Here is a sample implementation of JSV escaping in SQL that uses a numbers table.

create function...

We love ServiceStack here at Falafel. If you're already using it, you know why. If you haven't used it or even heard of it, read the wiki intro to see what all the love is about.

When it comes time to create a real application with ServiceStack, you may be faced with a situation where you already have a lot of user logins already in existence in the former de-facto authentication system for Microsoft developers: ASP.NET Membership. The good news is that as long as you kept to the defaults when it came to how ASP.NET Membership stored user passwords, ...

There might be times when your app is structured such that you bind a Model to a View in one scope, but you still want to be able to obtain that Model for modification in a different scope without relying on global variables. By diving into the source code, I found that elements bound to Models do so through a BindingTarget object, which has a source property that contains the Model. This BindingTarget is saved in a property named "kendoBindingTarget" on the element itself. Thus, you can obtain the original model like so: 

var viewModel = kendo.observable({
  selectedValue: ...

This is just a quick tip that will make it quick and easy to host a site in any folder using IIS Express. Simply create a new text file and paste the following line into it:

"C:\Program Files (x86)\IIS Express\iisexpress.exe" /path:"%cd%" /port:12345

You can set the port to any value you choose. Save the file with a .bat extension and put a copy in the website folder. Whenever you want to host the site in that folder with IIS Express, just double_click the file. A console window will appear showing the status of IIS Express. Just press "q" in the ...

There is a lot about the behavior of the Kendo DropDownList that I like. I like that you can count on it to have a selected value. I like the type-ahead searching behavior. The pop-up is pretty customizable too, within limits. But what if you really want to display the options in some way that is different from a single-column stack of templates, such as a mega menu? It is not easy to try to manipulate the Kendo DropDownList into doing this just with templates, but it isn't too hard if you sidestep the built-in pop-up entirely and supply your ...

Kendo's MVVM is a great way to write data-centric HTML5 apps because it allows you to move away from writing jQuery to get and set values, to just manipulating the data objects and letting the bindings handle the display. Kendo comes with not one but two bindings to control visibility, but unfortunately they both control it the same way, by setting the CSS property "display" to "none". This has the effect of rendering the document as if the element didn't exist. But what if you want to hide the element but cause it to occupy space in the layout? Ordinarily ...

This tip addresses application scenarios where the available FK values of a grid may change and need to be updated after the grid is first initialized. Here is a quick example setup to illustrate the idea:

$(function() {
  var gridData = [
    {productName: "Apple", categoryId: 1},
    {productName: "Orange", categoryId: 2}
  var categories1 = [
    {value: 1, text: "Computer"}
  var categories2 = [
    {value: 1, text: "Computer"},
    {value: 2, text: "Fruit"}
  var grid ...

Get weekly updates in your inbox!