Telerik Blogs

Telerik CAB Enabling Kit for RadControls for WinForms updated to Q3 2009

WinForms Team — Wed, 11 Nov 2009 12:00:00 GMT

Last week we updated the Telerik CAB Enabling Kit for RadControls for WinForms on CodePlex with the mighty Q3 2009 versions of our WinForms tools. A few compatibility issues were resolved with this update as well. If you are using the WinForms CAB kit, just visit http://telerikcab.codeplex.com/ to download the latest update.

Enjoy!

What’s new in RadChart for Silverlight Q3 2009

Vladimir Milev — Wed, 11 Nov 2009 07:28:00 GMT

It has been a busy Q for the data visualization team at telerik! Our flagship chart product saw many improvements and new features the last four months and today I will summarize the most important ones for you. Here are the 5 big ones:

1. Grouping and Aggregation – RadChart now utilizes our powerful data engine already present in the RadGridView control to allow for a really fast grouping and aggregation of data. This comes built-in and works with all supported data sources! You can read more here.

2. Multiple YAxis support – RadChart will now allow you to add unlimited number of additional YAxes to suit your more complex comparison scenarios. For more info you can check this blog post.

3. Horizontal Bars – Due to popular demand we now feature horizontal bars. They are in every way exactly like the normal bars, except being rendered horizontally. Find out more about those here.

4. Negative Values - RadChart is now able to draw series below the X-Axis to achieve a more visually appealing rendering of negative values. For more check this example.

5. Exporting features - RadChart is now able to export the rendered chart to different formats like: PNG, BMP, XLSX, SVG. Further reading available in this blog post.

I sincerely hope you like the way RadChart is shaping up. Much of the decisions we make are a direct result of customer feedback. We are committed to continue developing and improving the industry leading Silverlight charting solution.

Telerik @ TechEd Europe 2009 in Berlin – Day 2

Peter Brunner — Wed, 11 Nov 2009 07:12:00 GMT

Having learned from yesterday we started the day earlier than the exhibition opened officially and again it was worth doing so. Many people came by after their first session. Anyway we could have a short break and our CSO Steve managed the whole booth on his own …

At the end of another very busy day we enjoyed the reception in the exhibition area.

People love our T-Shirts so much that we will run out of them shortly. So if you are an attendee not having one yet, hurry up tomorrow morning and come to booth V7/V8 in the VSIP zone.

3 days to go …

Using ViewModel objects to improve the Ajax performance of Telerik Grid for ASP.NET MVC

Atanas Korchev — Wed, 11 Nov 2009 07:10:00 GMT

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() %>
</asp:Content>

Controller:

public class HomeController : Controller
{
 public ActionResult Index()
    {
 return View(GetOrders());
    }

    [GridAction]
 public ActionResult _AjaxBinding()
    {
 return View(new GridModel
        {
            Data = GetOrders()
        });
    }

 private IEnumerable<Order> GetOrders()
    {
        NorthwindDataContext northwind = new NorthwindDataContext();

 return northwind.Orders;
    }
}

Let’s try this setup and go to the second page of the grid. FireBug reports that 6418 bytes have been transferred:

This is because all the properties of the Order object are serialized in JSON. Since we have a column which is using the Customer property of the Order all properties of the Customer object are serialized as well. Let’s improve the payload size using the following ViewModel object:

public class OrderViewModel
{
 public int OrderID
    {
        get;
        set;
    }

 public string ContactName
    {
        get;
        set;
    }

 public string ShipAddress
    {
        get;
        set;
    }

 public DateTime? OrderDate
    {
        get;
        set;
    }
}

It contains only the properties relevant in this particular grid configuration. By using it we will serialize only the important data thus improving the total size of the Ajax request. Here is

the updated configuration:

View:

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

<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.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() %>
</asp:Content>

The type of the model and the ContactName column are changed.

Controller:

public class HomeController : Controller
{
 public ActionResult Index()
    {
 return View(GetOrders());
    }

    [GridAction]
 public ActionResult _AjaxBinding()
    {
 return View(new GridModel
        {
            Data = GetOrders()
        });
    }

 private IEnumerable<OrderViewModel> GetOrders()
    {
        NorthwindDataContext northwind = new NorthwindDataContext();

 return from o in northwind.Orders
               select new OrderViewModel
               {
                   OrderID = o.OrderID,
                   ContactName = o.Customer.ContactName,
                   ShipAddress = o.ShipAddress,
                   OrderDate = o.OrderDate
               };
    }
}

The only thing that is changed is the GetOrders method. It is now projecting the Order object to OrderViewModel.

Let’s check if this made any difference:

Nice! Now the total amount of data transferred during paging is 1223 bytes. We can improve that further if we enable gzip compression in IIS7 for the JSON content type:

GZIP compression introduces two times smaller payload and almost ten times than the initial implementation.

Find attached the sample project used in the blog post.

UsingDto.zip

I hope this helps!

RadControls for WinForms Q3 2009 - RadDock Tab Alignment and DragDrop Automation

Robert Shoemate — Tue, 10 Nov 2009 12:00:00 GMT

For the Q3 2009 release, we have added a few important new features to the RadDock. The first of these features is the ability to set the tab strip alignment and/or visibility on DocumentTabStrip and ToolTabStrip instances. The second feature we have added is the ability to implement your own manual drag and drop behavior.

Tab Alignment and Visibility

When working with ToolTabStrips and DocumentTabStrips in the Q3 release, you will notice that we have added two new properties. The first of these properties, TabStripAlignment, allows you to set the alignment of tabs within their parent TabStrip. The second of these properties, TabStripVisible, allows you to specify whether or not the tabs should be visible. You can see these features in action in the RadControls for WinForms demo application under RadDock -> TabStrip Properties.

Manual Drag and Drop Behavior

Drag and drop automation is now possible with the RadDock. The DragDropService of the RadDock now contains a property, DragDropBehavior, that you can set to auto or manual. Setting this property to manual allows you to implement your own custom drag and drop behavior based on the events provided by the DragDropService object.

Using a manual implementation of this service, I've created a simple class that allows for it's users to animate the dragging of a ToolWindow through one line of code.

private void btnDragDrop_Click(object sender, EventArgs e)

{

_radDockAutomation.DoDragDrop(toolWindow1, DockPosition.Fill, toolWindow2);

}

The class, RadDockAutomation, takes a RadDock in its constructor. In calling the DoDragDrop method, you must specify a ToolWindow to drag and drop, the way in which to dock it, and the ToolWindow to dock it inside of or relative to. Upon calling this method, the DragDropBehavior of the DragDropService is set to manual, two events are subscribed to, and a timer is started.

public void DoDragDrop(DockWindow dragDropDockWindow, DockPosition toDockPosition, DockWindow toDockWindow)

{

// Setup the DragDropService for custom behavior

_ddService.DragDropBehavior = DragDropBehavior.Manual;

_ddService.PreviewHitTest += new DragDropHitTestEventHandler(_ddService_PreviewHitTest);

_ddService.Stopped += new EventHandler(_ddService_Stopped);

// Set the toPosition and DockWindow

_toDockPosition = toDockPosition;

_toDockWindow = toDockWindow;

// Set the initial position of the window being dragged

_prevPosition = dragDropDockWindow.Parent.RectangleToScreen(dragDropDockWindow.Bounds).Location;

_radDock.FloatWindow(dragDropDockWindow, new Rectangle(this._prevPosition, DragDropService.DefaultFloatingSize));

// Start the drag

_ddService.Start(dragDropDockWindow.FloatingParent, this._prevPosition);

_timer.Start();

}

The timer is responsible for moving the specified DockWindow within its tick event. The PerformDrag method being called calculates the next position the ToolWindow should be moved to on a point by point basis.

void _timer_Tick(object sender, EventArgs e)

{

_ddService.PerformDrag(GetNextPoint(_toDockPosition, _toDockWindow));

}

The PreviewHitTest event of the DragDropService is responsible for detecting when the DockWindow being moved has reached the specified location. Once it has reached the specified location, the service is stopped and the drag drop automation is completed.

void _ddService_PreviewHitTest(object sender, DragDropHitTestEventArgs e)

{

if ((e.DropTarget == _toDockWindow.DockTabStrip)

&& (e.HitTest.DockPosition != null

&& e.HitTest.DockPosition == _toDockPosition))

{

this._ddService.Stop(true);

}

Click here to download the source code used in this post.

Telerik XAML Controls Q3 2009 Release

Nikolay Atanasov — Tue, 10 Nov 2009 11:34:00 GMT

It has been another quarter for the XAML teams here at Telerik. During this time we worked on producing new tools and significant new features demanded by our customers.

The results of our efforts can be seen in the latest Q3 2009 release that was officially launched two days ago.

In this release we included lots of new tools, including navigational controls, like RibbonBar(Silverlight WPF), OutlookBar(Silverlight WPF); rich UI(visual) components like TileView(Silverlight WPF), Book, Map; Commands support with our Button controls(Silverlight WPF).

The RadGridView control now uses new UI virtualization mechanism that makes you scroll 5x faster than before. The new UI virtualization works both vertically and horizontally, even with enormous amount of data (cells).

Telerik RadChart control has been extended with two new major features that were in a great demand within the Telerik community. These are support for Negative Values and Multiple YAxis.

All the Silverlight and WPF controls have been wrapped up with a new theme - the new Windows 7 theme.

During the last quarter we received lots of feedback on our documentation, most of it were complaints about missing or obsolete content. Therefore, we started another major initiative in the beginning of Q3.
We started to re-write the major parts of our docs. The result is that now the RadControls for Siverlight and RadControls for WPF documentation contains brand new and extended content for the GridView, Charts, Docking, TreeView and TabControl.
We are completely aware that there is much more to be done in this directions and we realize the importance of our documentation. Hence, this is going to be one of our major tasks during the next quarter.

Full Release Notes can be seen at:

RadControls for Silverlight Q3 2009 release Notes

RadControls for WPF Q3 2009 Release Notes

See Silverilght WPF Demos

See Silverlight WPF Documentation

To download the files please log in your accounts.

Telerik “M” Compare and “Repository” Migration Tool November CTP

Stephen Forte — Tue, 10 Nov 2009 05:54:00 GMT

Last summer Telerik released the Oslo Comparison and Migration Tool. It is a tool that is available free for the community. It allows you to compare two Microsoft code named “M” files, see a visual diff, and then merge the results. (M is the code name for a new data modeling language from Microsoft.)

Telerik has expanded the tool to allow comparison of items in the SQL Server “Repository” and then do the same visualdiff and them merge the schema. Developers who have been playing with the M language and repository will find it very useful to have a tool that will allow comparisons and migrations, since the requirements of our applications are always changing! :) Pretty cool.

Just a note: Telerik will be updating the tool as soon as Microsoft makes some “M” and SQL Server “Repository” related announcements next week at PDC. Stay tuned!

How to Use Google Spellcheck with RadSpell

Stoyan Stratev — Tue, 10 Nov 2009 05:52:00 GMT

Sometimes the default spellchecking algorithms in RadSpell are not providing the best possible suggestions for misspelled words. For example, the phonetic algorithm works best with English words, but is not very accurate with Russian. The edit distance algorithm is language independent, but will not recognize easy mistakes if the word spelling is not very similar to the original. Unfortunately, implementing your own custom algorithm for a specific language is not an easy task.

The latest Q3 2009 release of the RadControls for ASP.NET AJAX features a new example for RadSpell, which shows how to use an existing service provided by Google to spellcheck - http://demos.telerik.com/aspnet-ajax/spell/examples/googlespell/defaultcs.aspx. This example uses a feature of the control that allows using a custom provider (SpellCheckProviderTypeName). The provider needs to implement an existing interface (ISpellCheckProvider) and define simple methods like CheckWord, GetSuggestions, etc.

The Google provider works on the server by making a secure service request to the spell check service, which in turn returns a list of misspelled words and suggestions for them. We then convert this to a format that RadSpell can work with and push it back to the client browser where the actual spell check dialog is displayed. The provider is fully functional with the exception of adding custom words to the dictionary. However, you can easily implement that as well using an example from our Knowledge base - Changing the custom dictionary files location.If you do not need to add custom words, then you can simply copy the Google provider code in your project without the need for any modifications.

Telerik @ TechEd Europe 2009 in Berlin - Day 1

Peter Brunner — Tue, 10 Nov 2009 05:51:00 GMT

The first day at TechEd in Berlin has been a very good one. Thanks to the 400 people coming by enjoying our demos and T-Shirts.

If you are there, don’t miss to visit us and meet our developers for a demo or a tech talk.

Tomorrow at 2.45 pm you can see Telerik OpenAccess ORM working with SQL Azure. This will be demonstrated live in the VSIP theatre. Afterwards you can win a Premium Collection at our booth.

4 days to go …

Design Canvas 2.0 Beta Released!

ArtOfTest — Tue, 10 Nov 2009 05:37:00 GMT

We are happy to announce the availability of Design Canvas 2.0 Beta! Design Canvas 2.0 is a major update to our flagship Design Canvas product line and is packed with new features and updates.

Silverlight recording and playback is now fully supported in Design Canvas!!!

Design Canvas 2.0 Beta can be downloaded from here.

We are planning the final release the beginning of December this year. We really want to hear your feedback so we encourage you to share it at our Design Canvas 2.0 forum here.

Watch Getting Started Video here

What's New in 2.0?

As mentioned, Design Canvas is a major upgrade and contains tons of new features and enhancements. Let's start by talking about the biggest new feature in Design Canvas 2.0 which is support for Silverlight Automation.

Silverlight Automation:

We've spent over a year studying and understanding the usage scenarios for Silverlight automation and the distinct challenges it poses. We tried to address many of these challenges in Design Canvas 2.0 and we know we still have many more that we are actively working on addressing before the final release in December. Here are some of the features that are worth mentioning when it comes to Silverlight automation:

Object Based Recording: All elements that are targets of a specific action/verification or wait operation are abstracted for you and organized under the proper Page/SilverlightApp in the Elements Explorer. Each action is performed against a target and the target has specific find logic that gets generated to be used on playback.

"On Spot" Silverlight Control Detection: Silverlight applications - especially real enterprise applications - have large, complex and deep visual trees. In fact, we found that some Silverlight applications have bigger visual trees than complex Ajax applications. For example, a simply HTML button can be represented as one tag in HTML <input type="submit" /> but in Silverlight a Button is made out of many mini controls like Paths/Rectangles/TextBlocks.etc. That by itself makes identifying the correct UI control to build validation against a bit more tedious and complex. Design Canvas 2.0 offers UI cues using what we call "fans" that allow you to visually identify what element you have under the mouse and what logical controls this element is part of in order or containment.

Integrated Visual Tree Explorer: The DOM Explorer can now show both your HTML page DOM and your Silverlight application Visual Tree. Furthermore, you can set the root of the DOM Explorer to be the Silverlight application if you do not care about the HTML portion of the page. That is probably the case for customers building 100% Silverlight LOB applications. The DOM Explorer is also hooked to the highlighting surface and vice-versa.

Built-in translators for all out-of-box Silverlight controls: We have custom translators built for all the built-in controls (common & complex) that Microsoft ships out of box for Silverlight development. The translators offer tailored recording experience for each control. We also have future plans (post 2.0) to support the Silverlight Control Toolkit that Microsoft ships too.

These are just a few of the main highlights of our Silverlight recording support.

NEW Interactive HIGHLIGHTING SURFACE

The new highlighting surface in Design Canvas 2.0 is designed to allow for a more intuitive and richer user experience right on top of the target application you testing.

- Drag elements directly from the page to locate in the DOM or add to the project elements:

- New simple and easy to use "Element Menu"

- Rich Drag & Drop recording experience:

New 3D Element View

Accessed through the verifications menu, this new feature allows users to dissect the DOM hierarchy and target a specific element using a new 3D visualizer. This feature is extremely important when building Silverlight or HTML automation in real-world applications that have complex DOM or Visual Trees. Furthermore, the UI allows you to build all sorts of verifications against the targeted element with just few clicks.

New Slick Storyboard

A new storyboard experience.The storyboard is also now hooked to the Test Explorer and vice-versa so you can visual identify each step easily.

And MUCH many more

Test Explorer Enhancements: Do/Undo/Copy/Paste/Record at a certain step.
Support for XUnit & MBUnit
New find logic editor to modify how elements are found.
New tasks: Clear Cookies , WaitForUrl for redirects and Inspection Points.
Set a BaseUrl for your entire project.
Control Translators for all of Telerik's Silverlight RadControls.

Telerik also released their WebUI Test Studio (Beta) as part of their Q3 release which is based on our Design Canvas 2.0 Beta.

Enjoy and do let us know what you think!!!

ArtOfTest

Introducing RadScrollablePanel for Windows Forms

WinForms Team — Mon, 09 Nov 2009 12:00:00 GMT

A common question that we receive from our customers regarding our RadPanel control is whether the scrollbars can be customized so that they are consistent with the current theme used by the application. Since RadPanel supports the standard Windows Forms scrolling behavior and the customization of the standard scrollbars is basically impossible, we decided (by using some nice trickery) to introduce a new control that provides the RadPanel functionality and also supports scrollbar themes. Here is what we achieved:

In a nutshell, the RadScrollablePanel control is composed of two RadScrollBars and a panel that represents the container for the controls added. This panel also gives the scrolling functionality. With some non-client area calculations we managed to hide the standard scrollbars and map the RadScrollBars to the properties exposed by the container panel. In other words, without breaking the standard scrolling mechanism, we "replace" the standard scrollbars with ours and thus enable wider customization of the appearance of the panel.

Apart from all the magic behind it, this control is used exactly as a standard panel - any controls can be easily added to it with the standard Visual Studio drag-and-drop routine.

We hope that you will have fun using this nice control and would appreciate any feedback that could help us improve it!

Using Telerik Grid for ASP.NET MVC without any server-side code

Atanas Korchev — Mon, 09 Nov 2009 09:08:00 GMT

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:

<head>

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

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

</head>

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>
<script type="text/javascript" src="telerik.grid.min.js"></script>

Add the minimum HTML required by the grid:

<div id="Grid" class="t-widget t-grid">
 <div class="t-grid-header">
 <div class="t-grid-header-wrap">
 <table cellspacing="0">
 <colgroup>
 <col style="width:100px;" />
 <col style="width:80px;" />
 <col />
 </colgroup>
 <tr>
 <th class="t-header" scope="col">Author</th>
 <th class="t-header" scope="col">Avatar</th>
 <th class="t-header t-last-header" scope="col">Post</th>
 </tr>
 </table>
 </div>
 </div>
 <div class="t-grid-content" style="height:400px;">
 <table cellspacing="0">
 <colgroup>
 <col style="width:100px;" />
 <col style="width:80px;" />
 <col />
 </colgroup>
 <tbody>
 <tr class="t-no-data">
 <td colspan="3"></td>
 </tr>
 </tbody>
 </table>
 </div>
 <div class="t-grid-footer">
 <table cellspacing="0">
 <colgroup>
 <col style="width:100px;" />
 <col style="width:80px;" />
 <col />
 </colgroup>
 <tr>
 <td class="t-footer" colspan="3">
 <div class="t-status">
 <a class="t-icon t-refresh" href="#"></a>
 </div>
 </td>
 </tr>
 </table>
 </div>
</div>

Initialize the jQuery plugin of the grid:

$(document).ready(function() {
    $("#Grid").tGrid({
        columns: 
        [
            {"name":null,"type":""},
            {"name":null,"type":""},
            {"name":"text","type":"String"}
        ], 
        pageSize:0, 
        onDataBinding:onDataBinding, 
        onRowDataBound:onRowDataBound
    });
});

And finally bind it to the Twitter service:

function onRowDataBound(e) {
 var row = e.row;
 var dataItem = e.dataItem;

 // update `Author` cell with template
    row.cells[0].innerHTML = [
 '<a class="t-link" href="http://www.twitter.com/', dataItem.from_user, '">',
     dataItem.from_user,
 '</a>'
    ].join('');

 // update `Avatar` cell with template
    row.cells[1].innerHTML = [
 '<img width="48" height="48"',
 ' src="', dataItem.profile_image_url,
 '" alt="', dataItem.from_user, '" />'
     ].join('');
}

function onDataBinding(e) {
 var grid = $(this).data('tGrid');

    $('.t-status .t-icon', grid.element).addClass('t-loading');

 // call the twitter search api
    $.ajax({
     url: 'http://search.twitter.com/search.json',
     contentType: 'application/json; charset=utf-8',
     type: 'GET',
     dataType: 'jsonp',
     error: function(xhr, status) {
         alert(status);
     },
     data: {
         q: $('#searchText').val()
     },
     success: function(result) {
         grid.dataBind(result.results);
         $('.t-status .t-icon', grid.element).removeClass('t-loading');
     }
    });
}

I have attached a zip file with a runnable demo. Check it out!

html.grid.zip

Telerik Extensions for ASP.NET MVC – Troubleshooting

Atanas Korchev — Mon, 09 Nov 2009 09:06:00 GMT

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 because the UI components require it to output their client-side objects and JavaScript files. A typical location is at the end of your master page (~/Views/Shared/Site.master by default). All you need to do is add the following line at the end of your master page (or view page for that matter):

<%= Html.Telerik().ScriptRegistrar() %>

Unfortunately due to the specifics of ASP.NET MVC we cannot programmatically detect whether there is a ScriptRegistrar in the page.

The control is not skinned

Make sure you have registered the common and skin CSS files. This could be done either by using <link> tags or via the StyleSheetRegistrar component:

<%= Html.Telerik().StyleSheetRegistrar()

                 .DefaultGroup(group => group

                    .Add("telerik.common.css")

                    .Add("telerik.vista.css")

%>

By default the StyleSheetRegistrar will look in the ~/Content folder of your application.

The filtering menu of the grid does not appear but the filtering icon is rendered

This will occur if there is no ScriptRegistrar defined. See above for the solution. The rest of the features (paging, sorting) will work because the grid will fallback to server-side binding mode.

The grid is using the wrong type during databinding

The grid may fail to infer the right type of the data item if the collection is not IEnumerable<T> (for example List<T>). The reason is that the C# compiler prefers the Grid(T item) method instead of Grid(IEnumerable<T> dataSource). In a future release we will remove the Grid(T item) method. For now the workaround is to specify the type of the data item explicitly:

<%= Html.Telerik().Grid<Order>(Model) %>

The grid does not support templates and client-side binding (Ajax, WebService)

Currently the grid does not support client-side templates. We will provide the same in a future release. For now the workaround is to use the Format method for simple templates or the rowDataBound event:

Using Format:

<%= Html.Telerik().Grid(Model)

        .Name("Grid")

        .Columns(columns =>

            columns.Add(c => c.CustomerID).Format(

                Html.ActionLink("Edit", "Home", new { id = "{0}"}})

            ).Encoded(false).Title("Edit");

})

%>

Using rowDataBound:

function onRowDataBound(e) {

 //`this` is the DOM element of the grid

 var grid = $(this).data('tGrid');

 //the DOM element (<tr>) representing the row which is being databound

 var row = e.row;

 //the data item - JSON object.

 var dataItem = e.dataItem;

 //You can use the OnRowDataBound event to customize the way data is presented on the client-side

    row.cells[1].innerHTML = '<strong>' + dataItem.text + '</strong>';

Hope this helps!

RadElement Lifecycle – a WinForms TPF Story

WinForms Team — Fri, 06 Nov 2009 12:00:00 GMT

Why new TPF improvement?

Knowing that the faster an application loads, the better the overall User Experience is, we put serious efforts in optimizing our presentation framework as much as possible. Since Q3 2009, RadElement, the smallest visual unit in Telerik Presentation Framework (TPF) has been given its own lifecycle. The major benefit of this new improvement is a significant boost during the loading and disposing stages. Simple tests prove that controls load and dispose from 50% up to 300% faster, depending on the depth of the corresponding element tree hosted in each control.

Some Technical Stuff

A RadElement instance may now enter the following states:

Constructing:
The element is in a process of being constructed. Layout operations are forbidden and Property Notifications are not raised.

Constructed:
The element has already been successfully constructed and its child elements created. Layout operations are forbidden and Property Notifications are allowed.

Loading:
The element is in a process of being loaded. Layout operations are not allowed.

Loaded:
The element has already been successfully loaded. An element is considered “Loaded” when the owning RadControl’s handle has been successfully created and the control may be visualized on the screen. At this stage all layout operations as well as property notifications are allowed.

Unloaded:
A special state, which indicates that the element has been successfully loaded one or more times, but now it either does not reside in a valid element tree, or its owning RadControl does not have a handle created. Layout operations are not allowed.

Disposing:
The element is in a process of being disposed of. All layout operations and Property Notifications are forbidden.

Disposed:
The element has already been successfully disposed of and may not be used further, otherwise ObjectDisposedException will be thrown.

Simple Performance Tests

To measure the actual benefit of this improvement, we performed several simple tests, which do nothing but create several hundred instances of a given control type -- e.g. RadButton -- and measure the time needed to accomplish the task. Here are the results for:

200 Buttons (Q2 2009 vs. Q3 2009):

As you can see, the loading time boost here is nearly 3,5 times or about 350%

100 Grids (Q2 2009 vs. Q3 2009):

The boost here is less but is still significant – about 40%

100 RibbonBars (Q2 2009 vs. Q3 2009):

We are experiencing about 20% better loading time here.

Usability and Extensibility

And last (but not least) comes the fact that the new lifecycle offers easy to read and understand, yet flexible to extend, methods and entry points, which allow you to completely override any behavior at any stage. Such methods are:

OnLoad – implements element’s load semantic.
OnLoaded – notifies the element that it has been successfully loaded.
OnUnload – implements the core unload semantic.
OnUnloaded – notifies the element that is has been successfully unloaded from its previous element scene.
OnElementTreeChanged – provides convenient way for inheritors to add custom logic upon element tree change.
OnParentChanged – provides convenient way for inheritors to add custom logic upon parent change.
UpdateReferences – implements the core semantic of caching references to the current element tree and layout manager as well as update of some parent-dependent values such as tree level, inheritable element state, etc.

Future improvements

Well, we are planning some other TPF optimizations, which will boost both loading time and overall performance, but we will keep them in secret until they are complete :-) So, stay tuned.

Welcome the WebUI Test Studio v2.0!

Telerik QA Dept. — Fri, 06 Nov 2009 08:09:00 GMT

I’m happy to announce that after all the efforts of the ArtOfTest and Telerik teams during the last several months the product is now ready for you to enjoy! WebUI Test Studio v2.0 (Beta) is out with the Q3 2009 release and the final v2.0 is expected in December.

WebAii Framework

First of all, our advanced Click & Play automation solution is now upgraded with the latest WebAii Testing Framework! This means that all the additions we worked on and released till now in the automation framework are finally available in WebUI Test Studio as well. For all interested in the framework upgrade I’d like to point you to the following resources:

WebAii 2.0 Beta Announcement at the beginning of 2009 – this lists the important new features coming with the new WebAii 2.0 version.

WebAii 2.0 Beta 2 Important Updates – a more recent announcement about major updates.

WebAii Testing Framework release history till Q2 – log in and check all the framework improvements (including the RadControls AJAX and Silverlight wrappers) for the last couple of months.

as well as the core WebAii documentation.

Automation Design Canvas

Well, that was just the beginning! The good news come for all the Silverlight automation enthusiasts– WebUI Test Studio v2.0 features the completely scriptless built-in support for Silverlight (including v3) automation. Everything you’ve been able to accomplish with the ASP.NET automation (and much more) is now possible for Silverlight! Simple mouse interactions over the loaded application generate your automated tests, seamlessly running for all the supported browsers (IE, FF and now Safari on Windows) and maintained completely design-time via the cool Design Canvas plug-ins. The UI Explorer shows the entire visual tree and is also connected to the automation surface so that you can easily choose the element and check the tree of sub and parent elements.

I highly recommend reviewing the Design Canvas 2.0 Beta announcement by ArtOfTest describing the great new additions and improvements in the product.

Built-in RadControls Automation

The RadControls for ASP.NET AJAX Translators were migrated for Design Canvas 2.0 assuring complete backwards compatibility for everyone who worked with WebUI Test Studio 1.X before. Upon loading the old test projects with the new version you will be prompted if you accept the project migration and then the task is done in the background for you.

Also, we added Translators for almost all our Silverlight UI components. We will keep improving them as well as adding the ones still missing for the final release. A couple of snapshots follow demonstrating the new interactive highlighting surface.

The GridView Translator “Fans” and locators -- you no longer need to right-click to get the element menu, just hover over the element and it pops up in a second:

The Scheduler AppointmentItem Translator in action:

Charting Title Verification on the fancy Sales Report demo:

Verification options for the settings of the new CoverFlow:

And these are just a few of the hundred possible options currently in.

Are you ready to play with the tool? Go download the new version from your account and let us know of your feedback. As always it is highly appreciated!

Some more resources:

WebUI Test Studio Features

What’s new in the WebUI Test Studio Q3 2009 release

WebUI Test Studio Release History -- Q3 2009 Beta

The new product video on Telerik TV

Happy automating!

-Konstantin