Sometimes when performing ajax databinding with the MVC grid you may end up with unexpected result: server error 500.

What is even stranger is that server-side binding works as expected with the same data binding code. Let’s demystify this problem:

The problem

You will see the following  if you use FireBug or Fiddler to inspect the response:

The error message is “A circular reference was detected while serializing an object of type” followed by some type. If you google this up you will find out that this exception is thrown by the JavaScriptSerializer class because of circular references detected. “What ...

We have just release the second service pack for Telerik Extensions for ASP.NET MVC. You can download the open source version from here. Registered users can download it from their client.net accounts. You can check the release the notes here.

What’s new

The most notable change is that we upgraded to jquery 1.4. The benefits from using the latest jquery installment are quite a lot – performance improvements, lots of new features etc. We also hosted jQuery on Telerik CDN.

However this upgrade comes at a price.Be warned that this change will break your existing web site ...

With the release of RadControls for ASP.NET Ajax Q3 2009 SP1 we introduced built-in CDN support. It was very logical that Telerik Extensions for ASP.NET MVC receive some CDN love as well. Now this is a fact! Go download the current release from here (open source) or here (licensed).

Enabling global CDN support from web.config

Add the following XML in your web.config:

<configSections>
  <sectionGroup  name="telerik">
  <section  name="webAssets"  type="Telerik.Web.Mvc.Configuration.WebAssetConfigurationSection, Telerik.Web.Mvc"/>
  </sectionGroup>
</configSections>
<telerik>
  <webAssets  useTelerikContentDeliveryNetwork="true"  />
</telerik>

Enable CDN ...

As many of you know yesterday ASP.NET MVC 2 RC was released. We did our best to make Telerik Extensions for ASP.NET MVC compatible with that release and I am glad to announce that you can now download the updated bits from here (open source) or here (licensed).

Changes

There are a few things that changed:

1. We are now producing two dll files – one for ASP.NET MVC 1 and one for ASP.NET MVC 2. The files differ only in their version:
   For ASP.NET MVC 1 applications you should use Binaries\Mvc1\Telerik.Web.Mvc.dll. Its assembly version ends with 135 (which means ...

We have just released the first service pack for Telerik Extensions for ASP.NET MVC. Here are the most important changes:

1. The Grid<T>(T item) method has been removed (for good). This means you can no longer use the following syntax:
   

   Html.Telerik.Grid(new { Text="", Age=0})
       .Columns(columns =>
       {
           columns.Add(o => o.Text);
           columns.Add(o => o.Age);
       })

   The reason is that this prevented type inference in some regularly used cases – the C# compiler preferred that method instead of Grid<T>(IEnumerable<T> dataSource). This forum thread shows how to implement the same capability using extension method. Feel free to use this if binding ...

In this blog post I will demonstrate how to squeeze the most from Telerik Grid for ASP.NET MVC when using Ajax binding.

Lets start with a simple grid bound to the Northwind Orders table:

View:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<UsingDto.Models.Order>>" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Add(o => o.OrderID).Width(100);
            columns.Add(o => o.Customer.ContactName).Width(200);
            columns.Add(o => o.ShipAddress);
            columns.Add(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120);
        })
        .Ajax(ajax => ajax.Action("_AjaxBinding",  "Home"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
%>
<%= Html.Telerik().ScriptRegistrar() ...

Since all Telerik UI components for ASP.NET MVC are actually jQuery plugins one can use them without any server-side code (or ASP.NET MVC). In this blog post I will show how to use the grid and bind it to Twitter. Here are the required steps:

1. Register the two CSS files to style the grid:
   

   <head>

     <link  rel="stylesheet"  type="text/css"  href="telerik.common.min.css"  />

     <link  rel="stylesheet"  type="text/css"  href="telerik.vista.min.css"  />

   </head>

2. Then add the JavaScript files:
   

   <script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="telerik.common.min.js"></script>...

Wow it has been a busy release! I am glad that we managed to release our first home-grown UI extensions for ASP.NET MVC. I hope you like them and please, please share your feedback in the forum.

In this blog post I will highlight the most common problems you may encounter while using the extensions and their solutions. Here we go:

The control renders fine but its client-side features do not work

The most common reason is that there is no ScriptRegistrar or it is placed before the UI components. It is mandatory that you add a ScriptRegistrar ...

It is a great pleasure to announce our new product line - Telerik Extensions for ASP.NET MVC. As the name suggest we are building a new UI component suite targeting the ASP.NET MVC framework. The new product line will not be based on RadControls for ASP.NET Ajax nor will it depend on ASP.NET Ajax or ASP.NET WebForms. No page lifecycle, ScriptManager dependency, viewstate or postback . And did I mention that it would be FREE?

Free and Open Source

Telerik Extensions for ASP.NET MVC is available as an open source product under the Ms-PL license. For the first time ...

In this blog post I will try to explain how CSS z-index works and a how to avoid a few common mistakes. First of all the z-index is used to control the z-order of positioned HTML elements. Simply put it controls the stacking order of HTML elements. To set it set the "z-index" CSS attribute of your element to some integer value.

Z-index works only for positioned elements

Positioned elements are elements whose "position" CSS attribute is set to "relative", "absolute" or "fixed". The default "position" is "static" which means that by default setting z-index has no effect.

Z-index ...