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 kendo.data.DataSource({
    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 ...

Here's a quick tip to speed up binding a Kendo TreeView to a remote dataset. I noticed this difference while experimenting with different strategies for accessing data for an application that was binding a large dataset to a TreeView. I only wanted the TreeView to read from the remote datasource once all of the parameters had values, so I initially wrote something like this:

dataSource: {
    transport: {
        read: function(options) {
            if (!(getParam1() && getParam2()))
            kendo.ui.progress($("#treeView"), true);

As I write this, there is a lot of unclear and contradictory information on how to do this. Here is the best way that I've found to do it. The steps below will add SimpleMembership to a WebForms project as well as enable you to use the WebSecurity class in code-behind, without any weirdness such as adding a .cshtml to your WebForms project (which will work but won't let you use WebSecurity anywhere but in that file)

  1. Create a brand-new ASP.NET WebForms project

  2. Open the Package Manager Console and run this command: install-package Microsoft.AspNet.WebPages.WebData

  3. Open web.config

    1. Add a connection string ...

I came across this inconvenient inconsistency while implementing a client-side CSV export from a filterable Kendo Grid. In short, when a DataSource is not filtered and/or sorted, the view() method returns an ObservableArray, which has a toJSON() method to convert its contents back to the raw data objects without the ObservableObject wrapper. However, when the DataSource is either filtered or sorted, the view() method returns a standard JavaScript Array of Kendo ObservableObjects. Each individual item in the array has a toJSON() method, but of course the array itself does not. When I asked Telerik support about this, they said that ...

How many times has this happened to you: you cut or copy a snippet of code, select where you want it to go, then whoops! you accidentally press ctrl-c instead of ctrl-v and copy a blank line or the selection you meant to replace. This is normally just a mild inconvenience requiring you to go back and copy the snippet again, but sometimes going back to that snippet isn't so easy. Maybe you carelessly cut the snippet and then closed the file so you can't undo it back, or maybe you copied from a remote location that you've been disconnected ...

Last time, I summarized Scott Guthrie's keynote session. This time, I'll summarize some of the following sessions.

Azure Websites - Things they don't teach the kids in school

This talk was actually not so much about Azure Websites as it was about the build system that Azure Websites uses to publish web projects from Git. The product is called "Project Kudu" and is an open-source project available on GitHub. The speaker demonstrated a number of  "power user" features of Kudu:

Streaming the application log to the console

This demo actually didn't work, but this could be immensely useful to assist ...