Atanas Korchev's blog

Internet Explorer JavaScript Performance Tip - use the "children" property

Atanas Korchev — Thu, 14 Aug 2008 09:03:37 GMT

Today I was profiling the initialization time of RadTreeView for ASP.NET Ajax and found out that the biggest bottleneck was traversing the DOM tree. The code looks something like this:

    
            //get_childListElement() returns an HTML element 
        
            var childNodes = parent.get_childListElement().childNodes; 
        
            for (var i = 0, length = childNodes.length; i < length; i++) 
        
            { 
        
                 var childNode = childNodes[i]; 
        
                 //Perform additional initialization 
        
            }

I tested with 10000 elements and in IE7 I got about 25000ms whilst in FireFox the total time was around 33ms (Core 2 Duo @ 2.33GHz). Quite a difference if you ask me.

I thought that there may be some IE specific method/property which could perform better and I dug into MSDN. And a few minutes later I found the children property!!! Apparently the children collection contains only HTML elements (whilst childNodes is full of TextNode elements). I changed the code like this:

    
            //get_childListElement() returns an HTML element 
        
            var childNodes = parent.get_childListElement().children; 
        
            for (var i = 0, length = childNodes.length; i < length; i++) 
        
            { 
        
                var childNode = childNodes[i]; 
        
                //Perform additional initialization 
        
            }

Lo and behold the total traverse time went down to around 30ms in IE7 !!! This is what I call a performance boost :)

To make it cross-browser friendly I ended up with this:

    
            var childList = parent.get_childListElement(); 
        
            var childNodes = childList.children || childList.childNodes;

The bottom line is that you can expect some serious performance improvements in treeviews with lots of nodes. For example the initialization time of a fully expanded treeview with 10000 (10x10x10x10) nodes improved by 30% (3152ms vs. 2249ms). However if the total number of nodes per level is greater e.g. 10x1000 the performance boost is even bigger - 5590ms vs. 1851ms which is 66%.

I have attached a sample page with tests using unordered list with 10000 list items.

Source

Yet another update of RadControls for ASP.NET Ajax DynamicData support

Atanas Korchev — Wed, 13 Aug 2008 10:22:10 GMT

ASP.NET Dynamic Data has just gone official with the SP1 release of Visual Studio 2008 and .NET 3.5. We have just released updated version of our Dynamic Data bits which is tested against the official release and has few minor improvements (such as implementation of the DataControl property). Get it from here.

RadTreeView for ASP.NET Ajax Load On Demand Modes - why so many?

Atanas Korchev — Fri, 08 Aug 2008 04:16:40 GMT

In my previous blog post I told you how the Web Service load on demand mode of RadTreeView delivers the best performance. A logical question arises - why we have the other load on demand modes (server side postback and callback) if they do not perform on par with the Web Service mode. The answer is not that obvious. The truth is every load on demand mode has its pros and cons. The following table describes visually the load on demand modes according to three criterions - performance, templates support, ease of implementation.

	Performance	Templates Support	Ease of Implementation
Web Service
Server Side Callback
Server Side PostBack

And now lets delve into more details.

Web Service

Performance

The Web Service load on demand mode is the undisputed champion in terms of performance. It does not execute the page lifecycle, does not send the ViewState to the server and outputs tidy JSON which saves precious traffic.

Templates

The Web Service load on demand mode completely disregards the template set for RadTreeView (read as "templates don't work at all"). The reason is simple. Since only JSON is sent back and forth the actual template contents (controls and HTML that is) are lost. RadTreeView utilizes its client-side rendering abilities to convert the JSON returned from the web service into HTML representation of tree nodes. A possible workaround is to use ASP.NET Ajax 4.0 templates. Check here for a sample project and running demo.

Implementation

I won't say that implementing a Web Service method is hard but it is not as easy as subscribing to a server-side event (NodeExpand).

Server Side Callback

Performance

Server Side Callback mode comes second here. Using ASP.NET 2.0 Callbacks involves sending the ViewState of the page back to the server. The page life cycle is executed as well. The good thing is that only a small portion of HTML is returned - only the nodes added during the NodeExpand event.

Templates

Server Side Callback mode supports templates with one limitation. It does not support any controls with client-side behavior (e.g. other RadControls for ASP.NET Ajax). You can use anything else though - static HTML, text boxes, buttons etc.

Implementation

Somehow it feels easier to subscribe to an event and create RadTreeNode objects than implement a web service. A good think to know when using Server Side Callback mode is that only the expanded RadTreeNode will be updated after the load on demand request finishes. If you update any other control in the page the changes will not be applied (rendered).

Server Side PostBack

Performance

The Server Side PostBack mode has worst performance without any doubts. The page is posted back and as a result all controls are rendered and updated. A possible workaround is to wrap the RadTreeView control inside RadAjaxPanel or UpdatePanel. Then only the RadTreeView control will be updated. Still performance will be worse than other load on demand modes because the whole RadTreeView control will be rendered and updated.

Templates

Full support for templates with no limitations.

Implementation

As with the Server Side Callback mode the user should subscribe to the NodeExpand event and add child nodes to the currently expanded node. A side effect from the full postback is that the developer can update other controls in the page (provided RadTreeView is not wrapped inside RadAjaxPanel/UpdatePanel).

I hope this helps,

Atanas

Performance Tip: Use Web Service Load On Demand with RadTreeView

Atanas Korchev — Wed, 06 Aug 2008 09:49:13 GMT

A common scenario for a treeview control is to populate it with lots of nodes. Adding a few thousand nodes initially is not a good idea though. Think of all the rendered HTML. Even rendering a few thousand strings (without any extra markup) will result in a few megabytes of HTML. That's where load on demand comes into play. RadTreeView supports three different types of load on demand: web service, server side callback and server side postback. From those the server-side postback mode is least efficient in terms of performance because it postbacks and updates the whole page. Here is how the output looks like (total size 28775 bytes):

As you can see the complete page is rendered and loaded again.

Server-side callback relies on the ASP.NET 2.0 built-in callbacks. It is significantly faster than the server-side postback mode because it renders only the nodes loaded on demand as well as some event validation data. Here is a typical output rendered by a server-side callback (total size is 1631 bytes):

Still the server-side callback mode is not the fastest load on demand mode supported by RadTreeView. Any callback request submits the page ViewState back to the server and causes the page lifecycle to execute. Indeed the lifecycle is not full but still it consumes some server time and the developer should avoid to perform any other tasks apart from populating the treeview. The IsCallback property comes in handy in such cases and helps the developer avoid hitting the database for no reason during load on demand requests.

When you want to squeeze the last bit of performance from RadTreeView you should opt for web-service load on demand. Here is how a typical web service load on demand request looks like (total size is 1745 bytes):

As you can see only JSON is transmitted in this case - no HTML or ViewState. On top of it the page lifecycle is not executed at all. Now the best part - I will tell you how to decrease that output even more!

By default the web service method returns objects of type RadTreeNodeData which contain the most commonly used properties of a RadTreeNode object. However you may not need all of them. So why transmit empty values in the JSON output? The solution is simple - create a custom class containing only the properties you need to use - e.g. Text, Value and ExpandMode:

    public class NodeData
    {
        public string Value { get; set; }
        public string Text { get; set; }
        public TreeNodeExpandMode ExpandMode { get; set; }
    }

Now use that class in your web service method instead of RadTreeNodeData. Here is how the output looks like now (total size is 500 bytes):

As you can see only the relevant properties are transmitted back from the server. However there is still one thing bothering me - that "__type":"ProductCategories+NodeData" string does not seem to be relevant in this scenario. Fortunately the fix is quite simple - change the return type of the WebService method from RadTreeNodeData[] to IEnumerable. Here is the output after this change (total size is 310 bytes) Not bad! If you don't plan to use server-side postback events (such as NodeDrop and NodeClick) you can improve the total performance even more by setting the PersistLoadOnDemandNodes property to false. By default this property is set to true which means that RadTreeView logs (in JSON format) all nodes created on demand so they are later available after postback (required for server-side events). However this operation may become time consuming in case there are lots of load on demand nodes. If you don't need postback events just set that property to false to enable logging and persistence. Even if you need postback events you can "fake" them using RadAjaxManager. You can check the attached example for a sample implementation.

You may wonder why on earth our web-service example is so inefficient. The answer is easy - for simplicity. The RadTreeNodeData class is provided so the user can instantly start development. Optimizing the performance can be done at a later stage. Nevertheless a new example will be added in our online examples utilizing all of the aforementioned optimizations.

Live Demo | Download

RadControls and ASP.NET Dynamic Data - Minor Update

Atanas Korchev — Thu, 31 Jul 2008 07:02:06 GMT

We have just published a new update of our Dynamic Data bits. We fixed a bug which could cause possible duplication of items in RadComboBox (in the ForeignKey editor). The zip also includes the latest official release of RadControls for ASP.NET Ajax. You can download the bits from here.

RadControls and ASP.NET Ajax 4.0 Preview

Atanas Korchev — Wed, 23 Jul 2008 08:37:56 GMT

Two days ago Bertrand Le Roy announced the first preview of ASP.NET Ajax 4.0. If you haven't read its roadmap you can check it out here. Lots of cool stuff is coming out - client-side templates, bindings, fluent client-side API (similar to jQuery) and more.

Things are a bit hectic here because of the Q2 2008 release. Nevertheless Vlad and I managed to prepare two demo pages demonstrating how to use the client-side templates introduced in the ASP.NET Ajax preview with RadGrid and RadTreeView (yes it was that easy). Both controls are bound to web services and the client-side templates are used to visually customize the look and feel of the data. Here are the steps I took to build the RadTreeView demo:

I registered the MicrosoftAjaxTemplates.js in the ScriptManager:

    
                <asp:ScriptManager runat="server" ID="ScriptManager1"> 
            
                    <Scripts> 
            
                        <asp:ScriptReference Path="~/MicrosoftAjaxTemplates.js" /> 
            
                    </Scripts> 
            
                </asp:ScriptManager>

Configured a RadTreeView instance to consume a web service:

    
                <telerik:RadTreeView runat="server" ID="RadTreeView1" OnClientNodeDataBound="onNodeDataBound"> 
            
                    <WebServiceSettings Path="WebService.asmx" Method="GetProducts" /> 
            
                    <Nodes> 
            
                        <telerik:RadTreeNode Text="Beverages" ExpandMode="WebService"> 
            
                        </telerik:RadTreeNode> 
            
                        <telerik:RadTreeNode Text="Condiments" ExpandMode="WebService"> 
            
                        </telerik:RadTreeNode> 
            
                    </Nodes> 
            
                </telerik:RadTreeView>

Added a LinqToSql class and dropped the Categories and Products tables (can you guess the database?) in the .dbml

Wrote the implementation of the GetProducts web service method which is used to populate RadTreeView:

    
                    [WebMethod] 
            
                    public IList<Product> GetProducts(RadTreeNodeData node) { 
            
                        NorthwindDataContext db = new NorthwindDataContext(); 
            
                        var products = from p in db.Products 
            
                                       where p.Category.CategoryName == node.Text 
            
                                       select p ; 
            
                        return products.ToList(); 
            
                    }

When I ran the web site and ended up with an exception upon expanding a node: "A circular reference was detected while serializing an object of type Product". Silly me - the Product class had a Category property which in turn had a collection of Product objects. The fix was easy - set the "Child Property" of the Category_Product association to false. Everything was up and running.

I added a client-side template

    
                <div id="myTemplate" class="sys-template"> 
            
                    <table> 
            
                        <tr> 
            
                            <td> 
            
                                {{ ProductName }} 
            
                            </td> 
            
                            <td> 
            
                                {{ UnitPrice }} 
            
                            </td> 
            
                        </tr> 
            
                    </table> 
            
                </div>

The "sys-template" CSS class only hides the template (display:none)

The final step was to consume the OnClientNodeDataBound event (which is a brand new client-side event occurring when a node is created during web-service load on demand) and instantiate the template inside the node's text HTML element:

    
                <script type="text/javascript"> 
            
                    function onNodeDataBound(sender, args) { 
            
                        var node = args.get_node(); 
            
                        var dataItem = args.get_dataItem(); 
            
                        var template = new Sys.Preview.UI.Template.getTemplate($get("myTemplate")); 
            
                        template.createInstance(node.get_textElement(), dataItem); 
            
                    } 
            
                </script>

Using the ASP.NET Ajax client-side templates is absolutely intuitive and painless! I can't wait to see the next refresh of ASP.NET Ajax 4.0.

Live Demo (RadGrid) | Live Demo (RadTreeView) | Download

Web Resources demystified: Part 3 (Troubleshooting)

Atanas Korchev — Fri, 18 Jul 2008 07:28:41 GMT

In this post I will show you how to troubleshoot Web Resource related problems and how to deal with them.

If you are using an ASP.NET server control with rich client-side behavior it is likely built to utilize web resources. Sometimes your page loads and that rich server side control does not work at all - the tree view does not expand, the grid cannot sort etc. Most of the times this is because the JavaScript files of those controls have failed to load. If your browser is configured to prompt on JavaScript errors you may see the following error messages:

"RadTreeView is undefined" if you are using RadControls for ASP.NET (Classic)
"Sys is undefined" or "Telerik is undefined" if you are using RadControls for ASP.NET Ajax (former "Prometheus")

Receiving one of those messages indicates that there is a Web Resource related issue. The next step is to find out what exactly is causing that error message.

Manually requesting the web resource handler

The fastest way would be to view the rendered output of your page and get the URL of the offending script tag. Here is a short demo with RadTreeView Classic:

    
            <div id="RadTreeView1_wrapper"> 
        
                <!-- 6.3.5 --><script type="text/javascript" src="/Sample/WebResource.axd?d=mOXVXvUPV2JWSrl55DXbLd4CU3OqV82yycNo3oZC9Qn3B05GrDVSd8t21hVYrCq41DKrZevSapn__c8UQPRmtdYqo9Oc7wmveT4PyIINoBOcBUJOfqTubx1YzP6v6wYp0&amp;t=633437882200000000"></script>

Then paste that URL in your browser's address bar (after the domain and folder of course). Normally the web server should serve back the content of that web resource. However in case of a problem with the web resource HTTP handler you would see an error page saying that the server returned HTTP error code 404 (not found) or 500 (server error).

Using web development tools to request the web resource handler

Another useful technique is to use an HTTP traffic sniffer tool - Fiddler for Internet Explorer or FireBug for FireFox. Here are two screenshots showing a failed request to a web resource file:

Fiddler

FireBug

Dealing with the 404 error code (the requested URL was not found)

Please check the following:

Check in the IIS management console that the .axd extension (the default HTTP handler extension) is allowed:
Also check if the "Verify if file exists" checkbox is unchecked. This screen appears after you click the "Edit" button appearing in the previous screenshot:

If you are using RadControls for ASP.NET Ajax check if the "ScriptResource.axd" HTTP handler is correctly registered in your web.config. Look for the following statement:

ASP.NET 2.0:

    
                <add verb="GET,HEAD" path="ScriptResource.axd" 

                type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" 

                validate="false"/>

ASP.NET 3.5

        
                <add path="ScriptResource.axd" verb="GET,HEAD" 

                type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" 

                validate="false" />

IIS7 Integrated Mode

The following statement should be present in the <handlers> section instead of <httpHandlers>:

    
                <handlers> 
            
                <add name="ScriptResource" preCondition="integratedMode"  
            
                verb="GET,HEAD" path="ScriptResource.axd"  
            
                type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

Note: if you are using .NET 2.0 the version of the System.Web.Extensions assembly should be "1.0.61025.0". If you are using .NET 3.5 the version should be "3.5.0.0". Always make sure you are referring to the right assembly version.

If you are using RadControls for ASP.NET Ajax and RadScriptManager check if the Telerik.Web.UI.WebResource.axd HTTP handler is correctly registered in your web.config:

ASP.NET 2.0:

    
                <add path="Telerik.Web.UI.WebResource.axd" verb="*" 

                type="Telerik.Web.UI.WebResource, Telerik.Web.UI, Version=2008.1.619.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4" 

                validate="false" />

ASP.NET 3.5

<add path="Telerik.Web.UI.WebResource.axd" verb="*"
type="Telerik.Web.UI.WebResource, Telerik.Web.UI, Version=2008.1.619.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
validate="false" />

IIS7

The following statement should be present in the <handlers> section instead of <httpHandlers>:

    
                <handlers> 
            
                <add name="Telerik.Web.UI.WebResource" 
            
                 path="Telerik.Web.UI.WebResource.axd" verb="*"  
            
                type="Telerik.Web.UI.WebResource, Telerik.Web.UI, Version=2008.1.619.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>

Note: The version in the HTTP handler registration statement will vary depending on the release date and .NET runtime (2.0 or 3.5). Always make sure you are referring to the right assembly version.

Dealing with the 500 error code (server error)

You should check the detailed error message. There are two common cases:

"Padding is invalid and cannot be removed"
The problem is likely to be related with the machine key. This blog post delves into why this error occurs. This MSDN article describes how to create a custom machine key.
"Specified argument was out of the range of valid values. Parameter name: utcDate"
The assembly containing the embedded resources is probably built in the future (its last modified time is later than the current time). This can occur when deploying in a different time zone. The solution is simple - run the following command line statement (the commas at the end are important!):
copy /b <path to assembly which is built in the future>,,

I hope this helps,

Atanas

The difference between ID, ClientID and UniqueID

Atanas Korchev — Fri, 06 Jun 2008 06:50:10 GMT

I this post I will try to explain the difference between those three commonly used properties. Each property is described in a separate section. Attached you can find a sample web site as well as two screenshots visually depicting the difference between the ID, ClientID and UniqueID properties.

ID

The ID property is used to assign an identifier to an ASP.NET server control which can be later used to access that control. You can use either the field generated in the codebehind or pass the value of the ID property to the FindControl method. There is a catch though - the ID property is unique only within the current NamingContainer (page, user control, control with item template etc). If a server control is defined inside the item template of some other control (Repeater, DataGrid) or user control, its ID property is no longer unique. For example, you can add some user control twice in the same page. Any child controls of that user control will have the same ID. Also the ASP.NET page parser won't generate a codebehind field corresponding to the control ID in case the control is defined inside a template. This is the reason you cannot easily find a specific control when it is part of a template - you need to use the FindControl method of its container control instead. As a side note, setting the ID property is not mandatory. If you don't set it the ASP.NET Runtime will generate one for you in the form of "_ctl0", "_ctl1", etc.

UniqueID

The UniqueID property is the page-wide unique identifier of an ASP.NET server control. Its uniqueness is guaranteed by prefixing the ID of a server control with the ID of its NamingContainer. If the NamingContainer is the Page the UniqueID will remain the same as the ID.

For example if a Label with ID="Label1" is defined in a user control with ID = "UserControl1" the UniqueID of the Label will be "UserControl1$Label1". Adding another instance of the same user control (with ID = "UserControl2") will make the UniqueID of its child label to be "UserControl2$Label1".

The UniqueID property is also used to provide value for the HTML "name" attribute of input fields (checkboxes, dropdown lists, and hidden fields). UniqueID also plays major role in postbacks. The UniqueID property of a server control, which supports postbacks, provides data for the __EVENTTARGET hidden field. The ASP.NET Runtime then uses the __EVENTTARGET field to find the control which triggered the postback and then calls its RaisePostBackEvent method. Here is some code which illustrates the idea:

IPostBackEventHandler postBackInitiator = Page.FindControl(Request.Form["__EVENTTARGET") As IPostBackEventHandler; if (postBackInitiator != null) postBackInitiator.RaisePostBackEvent(Request.Form["__EVENTARGUMENT"]);
You can use the UniqueID property to find any control no matter how deep it is nested in the control hierarchy. Just pass its value to the FindControl method of the Page.

ClientID

The ClientID property is quite similar to the UniqueID. It is generated following the same rules (the ID of the control prefixed by the ID of its NamingContainer). The only difference is the separator - for the ClientID it is the "_" (underscore) symbol.
The ClientID property is globally unique among all controls defined in an ASP.NET page. You may ask why we need two different globally unique properties. The answer is that ClientID serves a different purpose than UniqueID. In most server controls the ClientID property provides the value for the HTML "id" attribute of the HTML tag of that server control. For example this:

<asp:Label ID="Label1" Text="Label" />

will render as this:

<span id="Label1">Label</span>

That's why you often use the following JavaScript statement to access the DOM element corresponding to some ASP.NET server control:


var label = document.getElementById("<%= Label1.ClientID%>");

which in turn renders as:


var label = document.getElementById("Label1");

It is worth mentioning that the values of the ID, UniqueID and ClientID will be the same if the control is defined in the master page (or the page). This however can often lead to unexpected errors. If the ID of the control is hardcoded inside the JavaScript statement (e.g. "Label1") this code will only work provided the control is defined in the Page or master page. Moving the control and the JavaScript code into a userc control with ID "UserControl1" will fail at runtime because the control will now render as:

<span id="UserControl1_Label1">Label</span>

That's why you should prefer using the "<%= Label1.ClientID%>" syntax to get the client-side id of server controls.

Additionaly the ClientID is used in ASP.NET Ajax as the unique identifier of client-side controls. Thus the following JavaScript statement is commonly used:

var control = $find("<%= MyControl1.ClientID %>");

Example

I have attached a sample web site which demonstrates the difference between those three properties of controls defined in a page (without a master), master page, content placeholder and user control. Here are two screenshots from the output:

Normal ASPX page (without a master page):

Master page scenario:

I hope this helps.

RadControls for ASP.NET Ajax in SharePoint 2007 and DotNetNuke

Atanas Korchev — Wed, 04 Jun 2008 08:36:56 GMT

SharePoint

We recently pulled out a sample SharePoint 2007 (MOSS) site which shows RadControls for ASP.NET Ajax working in SharePoint environment. You can check it out by going to http://sharepoint.telerik.com. This site is a SharePoint Publishing portal. We have modified the master page and replaced the default navigation controls with RadTabStrip and RadPanelbar. The required steps are described in detail in our online documentation. The Corporate section of the SharePoint is utilizing a different master page which incorporates RadMenu and RadTreeView.

RadEditor for MOSS also got a major update - go check Stoyans's blog post for more info.

Also we prepared three demo pages showcasing RadScheduler, RadEditor and RadGrid working seamlessly in SharePoint. The main challenge here was to get ASP.NET Ajax working in SharePoint. This blog post has all the required steps outlined (installing, getting the UpdatePanel to work). Make sure you read it before using ASP.NET Ajax in your SharePoint site.

DotNetNuke

There is some news on the DNN front as well. We have updated our Skin Objects to use RadControls for ASP.NET Ajax. They are now available for download from the Client.Net. Our RadEditor DNN content provider was updated as well. At the time being we are working on migration of the other DNN modules - PageAdmin and Events. We also plan to publish a detailed tutorial how to create a custom DNN module utilizing RadControls for ASP.NET Ajax. It will be part of our online documentation. Our sample DNN site will also get a facelift so stay tuned for more.

RadControls and ASP.NET Dynamic Data - Update

Atanas Korchev — Thu, 22 May 2008 08:16:06 GMT

We have been working for some time to integrate RadGrid in the ListDetails page template. I am pleased to announce that this is now a fact. You can use a modified version of ListDetails.aspx bundled with RadGrid. See for yourself:

You can download the bits from here. They are tested with the latest Dynamic Data bits which you can grab from here.

I would like to thank David Ebbo for his continuous support and help. Also a big thank you to my colleague Vlad (our local RadGrid expert) who provided invaluable assistance with the technical implementation.

RadControls and ASP.NET Dynamic Data - Part Deux

Atanas Korchev — Wed, 16 Apr 2008 06:29:35 GMT

It seems that I've managed to mess things up in my previous blog post. The sample web site and user controls work but ... they are using the December CTP release of ASP.NET Dynamic Data! Kudos to Scott Hunter for spotting the problem. It seems that albeit I installed the latest Dynamic Data bits I forgot to uninstall the December CTP and Visual Studio 2008 was still using the old Web Site template. Be careful when installing the new bits - uninstall any previous releases first!

The sample web site and field template user controls have been updated. Please download it from here. Keep in mind that the RenderHint attribute is replaced by the UIHint attribute. The semantics of using that attribute have also changed. Now you need a MetaDataType object on which you apply the UIHint attribute. Here is the modified code for the Order object:

    
            [MetadataType(typeof(OrderMetadata))] 
        
            public partial class Order 
        
            { 
        
            } 
        
            public class OrderMetadata 
        
            { 
        
                [UIHint("DateTimeTelerik")] 
        
                public object OrderDate { get; set; } 
        
                [UIHint("DateTimeTelerik")] 
        
                public object RequiredDate { get; set; } 
        
                [UIHint("DateTimeTelerik")] 
        
                public object ShippedDate { get; set; } 
        
                [UIHint("ForeignKeyTelerik")] 
        
                public object Customer { get; set; } 
        
                [UIHint("ForeignKeyTelerik")] 
        
                public object Employee { get; set; } 
        
                [UIHint("IntegerTelerik")] 
        
                [Range(1, 3)] 
        
                public object ShipVia { get; set; } 
        
                [UIHint("DecimalTelerik")] 
        
                public object Freight { get; set; } 
        
                [UIHint("TextTelerik")] 
        
                public object ShipName { get; set; } 
        
                [UIHint("TextTelerik")] 
        
                public object ShipAddress { get; set; } 
        
                [UIHint("TextTelerik")] 
        
                public object ShipCity { get; set; } 
        
                [UIHint("TextTelerik")] 
        
                public object ShipRegion { get; set; } 
        
                [UIHint("TextTelerik")] 
        
                public object ShipPostalCode { get; set; } 
        
                [UIHint("TextTelerik")] 
        
                public object ShipCountry { get; set; } 
        
            }

RadControls and ASP.NET Dynamic Data

Atanas Korchev — Mon, 14 Apr 2008 09:00:36 GMT

Update: the sample code linked in this post is NOT using the latest release of the ASP.NET Dynamic Data. Please check this post for updated sample and field template user controls.

ASP.NET Dynamic Data

I am thrilled to announce that there is a new drop available for the ASP.NET Dynamic Data. You don't know what the heck that is? It is the upcoming technology from the ASP.NET team which is designed to help you build web sites faster. Go check the following links immediately:

http://weblogs.asp.net/scottgu/archive/2008/04/10/asp-net-dynamic-data-preview-available.aspx

http://sessions.visitmix.com/?selectedSearch=T24

http://blogs.msdn.com/davidebb/archive/2008/03/06/dynamic-data-at-mix-and-upcoming-changes.aspx

http://davidebbo.members.winisp.net/screencasts/dbimage.wmv

http://www.hanselman.com/blog/PuttingASPNETDynamicDataIntoContext.aspx

Points of extensibility

One of the key features of ASP.NET Dynamic Data are the DynamicField and his buddy the FieldTemplateUserControl. DynamicFields represent the field of your objects. The FieldTemplateUserControl displays and edits the corresponding DynamicField - integer, decimal, date time etc.

Why do I need to know all that? Here is the answer - ASP.NET Dynamic Data is highly extensible. You can create custom FieldTemplate user controls - replace the built-in TextBox in Integer_Edit.ascx (used to edit integer fields) with RadNumericTextBox, integrate RadDatePicker to make choosing a date easier, use RadSlider to extend the paging mechanism etc. I have created a sample dynamic data web site with custom field templates all of which use RadControls for ASP.NET Ajax.
How to use it:

Download and install the latest preview of ASP.NET Dynamic Data. Get it from http://code.msdn.microsoft.com/dynamicdata
Download the sample site and extract the zip file somewhere. If you need to use the field templates in your project copy all user controls from ~/App_Shared/DynamicDataFields in your dynamic data web site.
Apply the RenderHint attribute to your objects specifying the field name and editor (find an example below)

To see a screenshot of the final result click here.

The RenderHint attribute

Of course the sample site I have built is using the Northwind database so I will show you how to use the custom editors with the Order class. To apply the render hint attribute you first need to add a new partial class in your App_Code folder with the same name as the object you want to customize. In my case I have added a partial class named Order. Then use the RenderHint attribute to specify the field name and editor:

    
            [RenderHint("OrderDate", "DateTimeTelerik")] 
        
            [RenderHint("Customer", "ForeignKeyTelerik")] 
        
            [RenderHint("ShipVia", "IntegerTelerik")] 
        
            [Range("ShipVia", 1, 3)] 
        
            [RenderHint("ShipName", "TextTelerik")] 
        
            public partial class Order 
        
            { 
        
            }

The RenderHint attribute is used to hint the Dynamic Data runtime which user control must be used to display and edit a specific DynamicField. Keep in mind that RenderHint works only for objects of the specified type. For example applying the RenderHint attribute for the Order will take effect only for editing and displaying the Orders table from the Northwind database. You can however easily edit the default field template controls so you don't have to apply the RenderHint attribute for every field of every object.

The sample web site provides custom FieldTemplateUserControls for editing integers, decimals, date time, text and foreign key. GridViewPager.ascx is also modified to use RadSlider.

In conclusion, I would like to thank David Ebbo from Microsoft for holding my hand during the integration of RadControls with ASP.NET Dynamic Data.