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 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:

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

• "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:

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' -- ...

The point of this article is to get you up and running in an Android programming environment as quickly as possible. To do this, I've made a few decisions about the toolset, so that the environment most closely matches what we use in our Android training here at Falafel. To create the screenshots, I'll use a Windows 7, 64-bit operating system and install the latest JDK, Eclipse IDE and Android tools.

To start developing Android applications in the Eclipse IDE, you need to install four pieces of software:

• The Java Development Kit (JDK). The download can be found at: http://oracle.com/technetwork/java/javase/downloads/index.html...

.NET 3.5 includes new abilities to easily leverage web services and Windows Communication Foundation (WCF) services from AJAX enabled web applications. For example, here is a new "ASP.NET Web Service Application" with a single GetMessage() method:

namespace WebServiceAjax
{
  [WebService(Namespace  =  "http://Falafel.com/")]
  [WebServiceBinding(ConformsTo  = WsiProfiles.BasicProfile1_1)]
  [ToolboxItem(false)]
   // To allow this Web Service to be called from script, 
   // using ASP.NET AJAX, uncomment the following line.      [System.Web.Script.Services.ScriptService]
   public  class Service1 : System.Web.Services.WebService
  {
    [WebMethod]
     public  string GetMessage()
    {
       return  "Howdy";
    }
  }
}  

Notice the attribute System.Web.Script.Services.ScriptService that allows the web service to be ...

By the time I found the handy JavaScriptSerializer class, it had been introduced, deprecated and brought back from the hellish purgatory where Microsoft keeps objects that have outlived their usefulness.  JavaScriptSerializer is used internally by MS AJAX to move .NET types to JSON strings and back again. A public version of the class is available in the System.Web.Script.Serialization namespace and can be used to shuttle your own objects between .NET code on the server and JavaScript/JSON/AJAX on the client. Consider the ubiquitous Foo class:

public  class Foo
{
   private  string _bar;
   public  string Bar
  {
     get {  return _bar; }
     set...