There’s a number of forum posts wanting to use a lookup table for a column in a Kendo grid, where the lookup has text and a numeric id, and where all of the operations like grouping, sorting and editing need to behave as expected. The trick is to provide the lookup without causing problems for sorting, filtering, grouping or editing at the same time.

Many of the online examples use a drop down list to lookup into a list, where both the text and value for the drop down list use the text data. Real-world scenarios use a foreign key ...

A small point of concern with Kendo UI aggregates has to do with the naming conventions. While the Kendo UI DataSource can calculate min, max, sum, count, and average aggregates for any column and output these aggregates at the group level or for all of your data, there is more than one way to get at these calculations.  There are configuration options aggregates and aggregate, properties within those options called aggregate, and just for extra fun, methods called aggregate() and aggregates().

Let’s try to sort these out starting with a little data that ...

Unless your career consists of writing applications against Northwind sample data, you’re going to need some way to create, read, update and delete custom data from your own service. And no cheating; you can’t put the service and client in the same project with the same domain. Up until lately, JSONP (JavaScript Object Notation Padded) has been the hack-of-choice to read data across domains. Using JSONP involves returning a wad of JSON to the client, wrapped (or padded) with a JavaScript function call that the client is supposed to call. What if your client wants you to update the data? ...

Telerik's Kendo UI controls are efficient, client-side controls for web pages that are built on top of JavaScript/jQuery. The control suite includes all the usual suspects, i.e. grid, calendar, drop down lists, navigation controls (tab strip, panel bar, menu), tree views and windows. You may be a web designer, JavaScript/jQuery programmer or perhaps happier programming on the server-side. Stay tuned, because each development style has its own approach for creating Kendo UI controls.

Web Designers

Let's say you have a web page with existing content. You'd like to use Kendo UI controls in place of the HTML but don't want to dive ...

MVC 4 bundles and minifies scripts and style sheets for best performance.  This clean framework has some great selling points:

  • Automatically uses minified versions when you're running in production but leaves everything uncompressed and easily readable when you're debugging.
  • Reduces the markup needed to declare JavaScript and style files. Yet you can still control the order that files load in.
  • Allows bundling by using wild cards and variables. This allows you to load all the "Kendo" JavaScript files, for example.

A new MVC 4 app will bundle scripts and styles for jQuery, Knockout and Modernizr automatically, but you can create ...

JSONP Simplified

JSONP is used to get data from remote web locations without running afoul of web browser security restrictions. Browsers prevent access to methods and properties from other domains, with one exception: the <script> tag.  The <script> tag is allowed to reference JavaScript from anywhere. For example, your browser will have no trouble with this script reference, no matter what domain the page is running:

<script  src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

Servers take advantage of this fact by returning JSON data wrapped in a JavaScript function. The link below asks flickr.com for some images in JSON format. Notice the last ...

After coding in a structured environment like Java or C#, JavaScript just seems a little freaky. Like HTML, JavaScript has hung out with a bad crowd of browsers and learned beastly habits. As JavaScript matures, best practices are emerging that bring JavaScript in line with "respectable" languages. Two of the big guns for making JavaScript safer are the "use strict" directive and the JSLint code quality tool.

Use Strict

Add "use strict" to the first line of a function to disallow some of the flakier aspects of JavaScript and make it easier for JavaScript engines to optimize. The example below ...

Update:  For more information, we've released a full JavaScript development guide: JavaScript Nuts and Bolts, and are teaching a class explaining how to use JavaScript, KendoUI and ASP.NET MVC in Telerik's Sitefinity CMS. Sign up for Foundations of Sitefinity 5.1.


JavaScript variables have inherent Boolean values (typically referred to as "truthy" and "falsy"). Interpreting these values can lead to semantic train wrecks like those in this snippet:

 

 1:  console.log("any string" ==  true);  // false
 2:  console.log("any string" ==  false);  // also false
 3:  console.log("" ==  false);  // true
 4:  console.log(null...

It's best practice to declare all variables at the top of functions. Why? In JavaScript, a variable can be used before it is defined. JavaScript automatically hoists every var declaration to the top of the function. Take a look at this example where variable "volume" is declared after its used in a logging statement:


function playTune(){    
    console.log("Volume is " + volume);
    var volume = 1;
}
  
playTune(); // outputs "Volume is undefined"



The log prints "Volume is undefined", exactly the behavior you'd expect for a declared, but uninitialized variable. While the declaration is moved ...

Using Claims Authentication with Sitefinity 5, you no longer "hit the wall" when integrating your site within a larger security context. Prior to version 5.x, Sitefinity used Forms Authentication for verification of user credentials to allow access to Sitefinity applications. Forms Authentication retrieved the user's name/password and checked it against data stored in the the database for that particular Sitefinity application. That works well enough for a single web site but comes up short in scenarios required by many organizations:

  • "Single Sign On" (SSO) where you have several Sitefinity sites that should have only one login for the user. SSO allows you to show a ...

Update:  We've released a full JavaScript development guide: JavaScript Nuts and Bolts, and are teaching a class explaining how to use JavaScript, KendoUI and ASP.NET MVC in Telerik's Sitefinity CMS. Sign up for Foundations of Sitefinity 5.1.

JavaScript uses unfamiliar patterns to simulate object oriented programming. Well, unfamiliar to class-based languages such as C# and Java programmers that is. For example, JavaScript has no classes and uses functions/objects somewhat interchangeably ("it's a desert topping and a floor wax!").

In JavaScript we can use functions as objects because functions are first class objects in JavaScript. Functions can have properties, ...

Stretching a RadGrid to 100% of the browser height can show as "squashed" when the grid is AJAX-enabled. Even without AJAX involved, stretching RadGrid requires setting the grid Height to "100%" and the Height style of all parent controls to "100%".  Setting RadGrid Height alone outputs this disappointing view where the data is squashed to a single text line.

You'll see this same "compact" view of the data in IE, FireFox ,Chrome and Safari. Add the style below to set HTML, Body and Form tags height to 100% and hide margin, padding and scrollbars.

<style  type="text/css">
    ...

The Sencha Designer 2 Beta is a full-on IDE for MVC based JavaScript applications built over Sencha Ext JS and Sencha Touch frameworks. That's a lot of acronyms for one sentence, so allow me to recap. Sencha Ext JS is a framework for building rich JavaScript applications complete with all the goodies we've come to expect like data grids, trees, charts, windows, tabs and so on. Sencha Touch does the same thing for mobile applications.

In this blog, we'll take a look at the environment and build a simple data-bound grid.

Sencha Designer 2 brings a visual designer with a ...

We had another awesome time out at Silicon Valley Code Camp this year. As promised in the Windows Phone 7 Kick Start session, here are the key downloads for getting started with Windows Phone 7 development. Minimally, to develop just on your computer using the Windows Phone 7 Emulator, you will need Visual Studio and the Windows Phone 7 SDK.

App Hub is the developer site for Windows Phone 7 with free tools and developer resources. From App Hub you can register for a membership that will allow you to submit applications to the Marketplace and "unlock" your phone so ...

The previous blog on Categorized Lists with LongListSelector demonstrated IGrouping implementation. If we play it right, we shouldn't have to touch the "Grouping" class to group using complex objects.

I'll use a playing card deck as a familiar data model that has categories to group on, i.e. the "Suit" that contains "Clubs", "Spades",  "Hearts" and "Diamonds" and where each card has a value from two through nine and including "Jack", "Queen", "King" and "Ace". The cards can appear in the LongListSelector with the Suit in the heading for each group and the value for each card making up the details ...

You can use LongListSelector as a glorified ListBox, but that cripples its true purpose. The real power  of LongListSelector is to display long categorized lists, enable a "People Hub" style "jump list" to navigate between groups in the list and to allow performant scrolling.

Grouping

The trick to get LongListSelector working is to properly group the data assigned to the LongListSelector ItemsSource. You can start with a simple flat list of objects, where each object has a property suitable for grouping. In the snippet below, "MyObject" has a "Category" property that the list will be grouped on....

You can access Sitefinity Form entries using GetValue(), but you may want to chug through new form columns without knowing what they are named. In the blog How to access Sitefinity Form Response Data Programmatically, Gary Campbell explores syntax that looks something like this:

var temp = formEntry.GetValue("MyFormColumnName");

You need to know "MyFormColumnName" to get the form entry value. Telerik hasn't surfaced methods to snag these easily, but using LINQ we can spelunk into a form's description and rip out what we want.

Get All Form Columns

To get all form columns including ...

What makes RadDomainDataSource MVVM friendly and why did Telerik build it? In his excellent blog "An MVVM Approach to Telerik Domain Services for Silverlight", Rossen Hristov says:

"I truly believe that every time someone places an UI element or a control in his view model, a baby kitten dies somewhere."

Here at Falafel, I do believe its company policy not to kill kittens and our code base must reflect this. The secret sauce that allows us to move DomainDataSource functions cleanly into the ViewModel is the QueryableDomainServiceCollectionView (QDSCV) class. RadDomainDataSource is simply a control wrapper around the QDSCV ...

Expression Blend 4 makes invoking a Command, drag-and-drop simple. Working in Expression Blend 4, I have a project with a "MyCommand.cs", "MyViewModel.cs" (both from the Using Commands and MVVM blog project) and an unbound button on the main form:

In Blend, click on the Assets tab and select the Behaviors item in the list. The list contains both "Actions" and "Behaviors".

Actions vs. Behaviors

Silverlight differentiates between "Actions" and "Behaviors". Actions use "Triggers" (e.g. events, storyboard state changes...) to initiate commands, property changes or some other outcome. For example, a mouse Click event can trigger a command execution. "Behaviors" are similar to ...

To separate business action logic from presentation in a Silverlight app, you should be using commands. The logic for "Save Document" or "Post Invoices" really has no place in the page code behind, and certainly doesn't need to show up twice when invoked from both a button and a menu. Commands encapsulate logic for some business action, e.g. "Save Document".  that can be bound declaratively in XAML. Commands also fit neatly into the MVVM pattern where the command itself lives in the ViewModel.

To create and use a command:

  • Create a class that implement the ICommand interface. 'Easy-peasy' -- ...