<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="http://weblogs.asp.net/utility/FeedStylesheets/atom.xsl" media="screen"?><feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en"><title type="html">Infinities Loop</title><subtitle type="html">ASP.NET and .NET from a new perspective</subtitle><id>http://weblogs.asp.net/infinitiesloop/atom.aspx</id><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/default.aspx" /><link rel="self" type="application/atom+xml" href="http://weblogs.asp.net/infinitiesloop/atom.aspx" /><generator uri="http://communityserver.org" version="3.0.20510.895">Community Server</generator><updated>2008-04-30T11:57:00Z</updated><entry><title>Minecrafter: The Minecraft Companion App for Windows Phone 7</title><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/archive/2010/11/08/minecrafter-the-minecraft-companion-app-for-windows-phone-7.aspx" /><id>http://weblogs.asp.net/infinitiesloop/archive/2010/11/08/minecrafter-the-minecraft-companion-app-for-windows-phone-7.aspx</id><published>2010-11-08T16:43:00Z</published><updated>2010-11-08T16:43:00Z</updated><content type="html">Introducing Minecrafter ! Minecrafter is an interactive guide for Minecraft . Every item, block, crafting pattern, and monster is described in detail in a beautiful, searchable interface. It’s also designed to help you find what you need faster. It’s not just a giant list of everything. For example, every item detail page shows you not only how to craft or smelt that item, but items it can be used to craft or smelt. Every icon displayed can also be clicked on to navigate to that item, allowing you...(&lt;a href="http://weblogs.asp.net/infinitiesloop/archive/2010/11/08/minecrafter-the-minecraft-companion-app-for-windows-phone-7.aspx"&gt;read more&lt;/a&gt;)&lt;img src="http://weblogs.asp.net/aggbug.aspx?PostID=7638168" width="1" height="1"&gt;</content><author><name>InfinitiesLoop</name><uri>http://weblogs.asp.net/members/InfinitiesLoop.aspx</uri></author><category term=".NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/.NET/default.aspx" /><category term="Game" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/Game/default.aspx" /><category term="WP7" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/WP7/default.aspx" /><category term="Minecraft" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/Minecraft/default.aspx" /></entry><entry><title>StackUnderflow.js: A JavaScript Library and Mashup Tool for StackExchange</title><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/archive/2010/06/07/stackunderflow-js-a-javascript-library-and-mashup-tool-for-stackexchange.aspx" /><id>http://weblogs.asp.net/infinitiesloop/archive/2010/06/07/stackunderflow-js-a-javascript-library-and-mashup-tool-for-stackexchange.aspx</id><published>2010-06-07T21:26:00Z</published><updated>2010-06-07T21:26:00Z</updated><content type="html">StackUnderflow.js is a JavaScript library that lets you retrieve – and render – questions from the StackExchange API directly on your website just by including a simple, lightweight .js script. The library is fully documented, so for technical details please check out the StackApps entry for it , and follow the links to the GitHub repository. The rest of this post is about my motivation for the library, how I am using it on the blog, and some other thoughts about the API. StackExchange (e.g. StackOverflow...(&lt;a href="http://weblogs.asp.net/infinitiesloop/archive/2010/06/07/stackunderflow-js-a-javascript-library-and-mashup-tool-for-stackexchange.aspx"&gt;read more&lt;/a&gt;)&lt;img src="http://weblogs.asp.net/aggbug.aspx?PostID=7520822" width="1" height="1"&gt;</content><author><name>InfinitiesLoop</name><uri>http://weblogs.asp.net/members/InfinitiesLoop.aspx</uri></author><category term="AJAX" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/AJAX/default.aspx" /><category term="JavaScript" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/JavaScript/default.aspx" /><category term="StackUnderflow" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/StackUnderflow/default.aspx" /></entry><entry><title>VSNewFile: A Visual Studio Addin to More Easily Add New Items to a Project</title><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/archive/2010/05/18/vsnewfile-a-visual-studio-addin-to-more-easily-add-new-items-to-a-project.aspx" /><id>http://weblogs.asp.net/infinitiesloop/archive/2010/05/18/vsnewfile-a-visual-studio-addin-to-more-easily-add-new-items-to-a-project.aspx</id><published>2010-05-18T20:30:00Z</published><updated>2010-05-18T20:30:00Z</updated><content type="html">&lt;p&gt;My first Visual Studio Add-in! Creating add-ins is pretty simple, once you get used to the CommandBar model it is using, which is apparently a general Office suite extensibility mechanism.&lt;/p&gt;  &lt;p&gt;Anyway, let me first explain my motivation for this. It started out as an academic exercise, as I have always wanted to dip my feet in a little VS extensibility. But I thought of a legitimate need for an add-in, at least in my personal experience, so it took on new life. But I figured I can’t be the only one who has felt this way, so I decided to publish the add-in, and host it on GitHub (&lt;a href="http://github.com/InfinitiesLoop/VSNewFile/downloads"&gt;VSNewFile on GitHub&lt;/a&gt;) hoping to spur contributions.&lt;/p&gt;  &lt;h2&gt;Adding Files the Built-in Way&lt;/h2&gt;  &lt;p&gt;Here’s the problem I wanted to solve. You’re working on a project, and it’s time to add a new file to the project. Whatever it is – a class, script, html page, aspx page, or what-have-you, you go through a menu or keyboard shortcut to get to the “Add New Item” dialog. Typically, you do it by right-clicking the location where you want the file (the project or a folder of it):&lt;/p&gt;  &lt;p&gt;&lt;img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="AddNewDialog" border="0" alt="AddNewDialog" src="http://weblogs.asp.net/blogs/infinitiesloop/AddNewDialog_68F6D528.png" width="737" height="402" /&gt; &lt;/p&gt;  &lt;p&gt;This brings up a dialog that contains, well, every conceivable type of item you might want to add. It’s all the available item templates, which can result in anywhere from a &lt;em&gt;ton&lt;/em&gt; to a &lt;em&gt;veritable sea&lt;/em&gt; of choices. To be fair, this dialog has been revamped in Visual Studio 2010, which organizes it a little better than Visual Studio 2008, and adds a search box. It also loads noticeably faster.&lt;/p&gt;  &lt;p&gt;&lt;img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="image" border="0" alt="image" src="http://weblogs.asp.net/blogs/infinitiesloop/image_7422F023.png" width="816" height="558" /&gt;&amp;#160; &lt;br /&gt;To me, this dialog is just getting in my way. If I want to add a JavaScript script to my project, I don’t want to have to hunt for the script template item in this dialog. Yes, it is categorized, and yes, it now has a search box. But still, all this UI to swim through when all I need is a new file in the project. I will name it. I will provide the content, I don’t even need a ‘template’. &lt;/p&gt;  &lt;p&gt;VS &lt;em&gt;kind of&lt;/em&gt; realizes this. In the add menu in a class library project, for example, there is a “Add Class…” choice. But all this really does is select that project item from the dialog by default. You still must wait for the dialog, see it, and type in a name for the file. How is that really any different than hitting F2 on an existing item? It isn’t.&lt;/p&gt;  &lt;h2&gt;Adding Files the Hack Way&lt;/h2&gt;  &lt;p&gt;What I often find myself doing, just to avoid going through this dialog, is to copy and paste an existing file, rename it, then “CTRL-A, DEL” the content. In a few short keystrokes I’ve got my new file. Even if the original file wasn’t the right type, it doesn’t matter – I will rename it anyway, including the extension. It works well enough if the place I am adding the file to doesn’t have much in it already. But if there are a lot of files at that level, it sucks, because the new file will have the name “Copy of xyz”, causing it to be moved into the ‘C’ section of the alphabetically sorted items, which might be far, far away from the original file (and so I tend to try and copy a file that starts with ‘C’ *evil grin*).&lt;/p&gt;  &lt;h2&gt;Using ‘Export Template’&lt;/h2&gt;  &lt;p&gt;To be completely fair I should at least mention this feature. I’m not even sure if this is new in VS 2010 or not (I think so). But it allows you to export a project item or items, including potential project references required by it. Then it becomes a new item in the available ‘installed templates’. No doubt this is useful to help bootstrap new projects. But that &lt;em&gt;still&lt;/em&gt; requires you to go through the ‘New Item’ dialog.&lt;/p&gt;  &lt;h2&gt;Adding Files with VSNewFile&lt;/h2&gt;  &lt;p&gt;So hopefully I have sufficiently defined the problem and got a few of you to think, “Yeah, me too!”… What VSNewFile does is let you skip the dialog entirely by adding project items directly to the context menu. But it does a bit more than that, so do read on.&lt;/p&gt;  &lt;p&gt;For example, to add a new class, you can right-click the location and pick that option. A new .cs file is instantly added to the project, and the new item is selected and put into the ‘rename’ mode immediately.&lt;/p&gt;  &lt;p&gt;&lt;a href="http://weblogs.asp.net/blogs/infinitiesloop/VSNewFileMenu_5814C1E9.png"&gt;&lt;img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="VSNewFileMenu" border="0" alt="VSNewFileMenu" align="left" src="http://weblogs.asp.net/blogs/infinitiesloop/VSNewFileMenu_thumb_6987B372.png" width="488" height="523" /&gt;&lt;/a&gt;&lt;a href="http://weblogs.asp.net/blogs/infinitiesloop/VSNewFileMenu_result_590F4277.png"&gt;&lt;img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="VSNewFileMenu_result" border="0" alt="VSNewFileMenu_result" align="left" src="http://weblogs.asp.net/blogs/infinitiesloop/VSNewFileMenu_result_thumb_0219E174.png" width="218" height="193" /&gt;&lt;/a&gt; &lt;/p&gt;  &lt;br clear="both" /&gt;  &lt;p&gt;The default items available are shown here. But you can customize them. You can also customize the content of each template. To do so, you create a directory in your documents folder, ‘VSNewFile Templates’. In there, you drop the templates you want to use, but you name them in a particular way.&lt;/p&gt;  &lt;p&gt;For example, here’s a template that will add a new item named “Add TITLE”. It will add a project item named “SOMEFILE.foo” (or ‘SOMEFILE1.foo’ if that exists, etc).&lt;/p&gt;  &lt;p&gt;&lt;a href="http://weblogs.asp.net/blogs/infinitiesloop/image_2B248070.png"&gt;&lt;img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_7CCD8B73.png" width="808" height="330" /&gt;&lt;/a&gt; &lt;/p&gt;  &lt;p&gt;The format of the file name is:&lt;/p&gt;  &lt;p&gt;&amp;lt;ORDER&amp;gt;_&amp;lt;KEY&amp;gt;_&amp;lt;BASE FILENAME&amp;gt;_&amp;lt;ICON ID&amp;gt;_&amp;lt;TITLE&amp;gt;.&amp;lt;EXTENTION&amp;gt;&lt;/p&gt;  &lt;p&gt;Where:&lt;/p&gt;  &lt;p&gt;&amp;lt;ORDER&amp;gt; is a number that lets you determine the order of the items in the menu (relative to each other).   &lt;br /&gt;&amp;lt;KEY&amp;gt; is a case sensitive identifier different for each template item. More on that later.    &lt;br /&gt;&amp;lt;BASE FILENAME&amp;gt; is the default name of the file, which doesn’t matter that much, since they will be renaming it anyway.    &lt;br /&gt;&amp;lt;ICON ID&amp;gt; is a number the dictates the icon used for the menu item. There are a huge number of built-in choices. More on that later.    &lt;br /&gt;&amp;lt;TITLE&amp;gt; is the string that will appear in the menu.    &lt;br /&gt;&lt;/p&gt;  &lt;p&gt;And, the contents of the file are the default content for the item (the ‘template’). The content of the file can contain anything you want, of course. But it also supports two tokens: %NAMESPACE% and %FILENAME%, which will be replaced with the corresponding values.&lt;/p&gt;  &lt;p&gt;Here is the content of this sample:&lt;/p&gt;  &lt;p&gt;&lt;em&gt;testing     &lt;br /&gt;Namespace = %NAMESPACE%      &lt;br /&gt;Filename = %FILENAME%&lt;/em&gt;&lt;/p&gt;  &lt;p&gt;I kind went back and forth on this. I could have made it so there’d be an XML or JSON file that defines the templates, instead of cramming all this data into the filename itself. I like the simplicity of this better. It makes it easy to customize since you can literally just throw these files around, copy them from someone else, etc, without worrying about merge data into a central description file, in whatever format. Here’s our new item showing up:&lt;/p&gt;  &lt;p&gt;&lt;a href="http://weblogs.asp.net/blogs/infinitiesloop/samplesomefile_2BB2CE09.png"&gt;&lt;img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="samplesomefile" border="0" alt="samplesomefile" src="http://weblogs.asp.net/blogs/infinitiesloop/samplesomefile_thumb_6942BC83.png" width="468" height="331" /&gt;&lt;/a&gt;&lt;/p&gt;  &lt;p&gt;&lt;/p&gt;  &lt;h2&gt;Practical Use&lt;/h2&gt;  &lt;p&gt;One immediate thing I am using this for is to make it easier to add very commonly used scripts to my web projects. For example, uh, say, jQuery? :) All I need to do is drop jQuery-1.4.2.js and jQuery-1.4.2.min.js into the templates folder, provide the order, title, etc, and then instantly, I can now add jQuery to any project I have without even thinking about “where is jQuery? Can I copy it from that other project?”&lt;/p&gt;  &lt;p&gt;&lt;a href="http://weblogs.asp.net/blogs/infinitiesloop/image_46EDB7BB.png"&gt;&lt;img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_6632EF3F.png" width="808" height="330" /&gt;&lt;/a&gt; &lt;a href="http://weblogs.asp.net/blogs/infinitiesloop/image_35333E92.png"&gt;&lt;img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_4BF516CC.png" width="477" height="334" /&gt;&lt;/a&gt;&amp;#160;&lt;/p&gt;  &lt;h2&gt;Using the KEY&lt;/h2&gt;  &lt;p&gt;There are two reasons for the ‘key’ portion of the item. First, it allows you to turn off the built-in, default templates, which are:&lt;/p&gt;  &lt;ul&gt;   &lt;li&gt;FILE = Add File (generic, empty file)&lt;/li&gt;    &lt;li&gt;VB = Add VB Class&lt;/li&gt;    &lt;li&gt;CS = Add C# Class (includes some basic usings)&lt;/li&gt;    &lt;li&gt;HTML = Add HTML page (includes basic structure, doctype, etc)&lt;/li&gt;    &lt;li&gt;JS = Add Script (includes an immediately-invoking function closure)&lt;/li&gt; &lt;/ul&gt;  &lt;p&gt;To turn one off, just include a file with the name “_&amp;lt;KEY&amp;gt;”. For example, to turn off all the items except our custom one, you do this:&lt;/p&gt;  &lt;p&gt;&lt;a href="http://weblogs.asp.net/blogs/infinitiesloop/image_7BB2BF4B.png"&gt;&lt;img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_13D8BA58.png" width="808" height="330" /&gt;&lt;/a&gt;&lt;/p&gt;  &lt;p&gt;&lt;a href="http://weblogs.asp.net/blogs/infinitiesloop/image_4566B89E.png"&gt;&lt;img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_7C439D95.png" width="462" height="238" /&gt;&lt;/a&gt; &lt;/p&gt;  &lt;p&gt;&lt;/p&gt;  &lt;p&gt;The other reason for the key is that there are new Visual Studio &lt;em&gt;Commands&lt;/em&gt; created for each one. This makes it possible to bind a keyboard shortcut to one of them. So you could, for example, have a keyboard combination that adds a new web page to your website, or a new CS class to your class library, etc. Here is our sample item showing up in the keyboard bindings option.&lt;/p&gt;  &lt;p&gt;&lt;a href="http://weblogs.asp.net/blogs/infinitiesloop/image_1E2F001A.png"&gt;&lt;img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_68B8CEA5.png" width="757" height="440" /&gt;&lt;/a&gt;Even though the contents of the template directory may change from one launch of Visual Studio to the next, the bindings will remain attached to any item with a particular key, thanks to it taking care not to lose keyboard bindings even though the commands are completely recreated each time.&lt;/p&gt;  &lt;h2&gt;The Icon Face ID&lt;/h2&gt;  &lt;p&gt;Visual Studio uses a Microsoft Office style add-in mechanism, I gather. There are a predetermined set of built-in icons available. You can use your own icons when developing add-ins, of course, but I’m no designer. I just wanted to find appropriate-ish icons for the built-in templates, and allow you to choose from an existing built-in icon for your own. Unfortunately, there isn’t a lot out there on the interwebs that helps you figure out what the built-in types are. There’s an MSDN article that describes at length a way to create a program that lists all the icons. But I don’t want to write a program to figure them out! Just show them to me! Sheesh :)&lt;/p&gt;  &lt;p&gt;Thankfully, someone out there felt the same way, and uses a novel hack to get the icons to show up in an outlook toolbar. He then painstakingly took screenshots of them, one group at a time. It isn’t complete though – there are tens of thousands of icons. But it’s good enough. If anyone has an exhaustive list, please let me, and the rest of the add-in community know.&lt;/p&gt;  &lt;p&gt;&lt;a href="http://www.kebabshopblues.co.uk/2007/01/04/visual-studio-2005-tools-for-office-commandbarbutton-faceid-property/" target="_blank"&gt;Icon Face ID Reference&lt;/a&gt;&lt;/p&gt;  &lt;h2&gt;Installing the Add-in&lt;/h2&gt;  &lt;p&gt;It will work with Visual Studio 2008 and Visual Studio 2010. Just unzip the release into your Documents\Visual Studio 20xx\Addins folder. It contains the binary and the Visual Studio “.addin” file. For example, the path to mine is:&lt;/p&gt;  &lt;p&gt;&lt;em&gt;C:\Users\InfinitiesLoop\Documents\Visual Studio 2010\Addins&lt;/em&gt;&lt;/p&gt;  &lt;h2&gt;Conclusion&lt;/h2&gt;  &lt;p&gt;So that’s it! I hope you find it as useful as I have. It’s on GitHub, so if you’re into this kind of thing, please do fork it and improve it!&lt;/p&gt;  &lt;p&gt;&lt;/p&gt;  &lt;p&gt;&lt;/p&gt;  &lt;p&gt;Reference:&lt;/p&gt;  &lt;ul&gt;   &lt;li&gt;&lt;a href="http://github.com/InfinitiesLoop/VSNewFile"&gt;VSNewFile on GitHub&lt;/a&gt;&lt;/li&gt;    &lt;li&gt;&lt;a href="http://github.com/InfinitiesLoop/VSNewFile/downloads"&gt;VSNewFile release on GitHub&lt;/a&gt;&lt;/li&gt;    &lt;li&gt;&lt;a href="http://www.kebabshopblues.co.uk/2007/01/04/visual-studio-2005-tools-for-office-commandbarbutton-faceid-property/"&gt;Icon Face ID Reference&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;&lt;img src="http://weblogs.asp.net/aggbug.aspx?PostID=7488521" width="1" height="1"&gt;</content><author><name>InfinitiesLoop</name><uri>http://weblogs.asp.net/members/InfinitiesLoop.aspx</uri></author><category term=".NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/.NET/default.aspx" /><category term="Visual Studio" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/Visual+Studio/default.aspx" /><category term="AJAX" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/AJAX/default.aspx" /><category term="JavaScript" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/JavaScript/default.aspx" /><category term="Addin" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/Addin/default.aspx" /></entry><entry><title>Tokenizing JavaScript - A look at what’s left after minification</title><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/archive/2010/04/21/tokenizing-javascript-a-look-at-what-s-left-after-minification.aspx" /><id>http://weblogs.asp.net/infinitiesloop/archive/2010/04/21/tokenizing-javascript-a-look-at-what-s-left-after-minification.aspx</id><published>2010-04-21T18:53:00Z</published><updated>2010-04-21T18:53:00Z</updated><content type="html">Minifiers JavaScript minifiers are popular these days. Closure , YUI Compressor , Microsoft Ajax Minifier , to name a few. Using one is essential for any site that uses more than a little script and cares about performance. Each tool of course has advantages and disadvantages. But they all do a pretty good job. The results vary only slightly in the grand scheme of things. Not enough to make so much of a difference that I’d say you should always use one over the other – use whatever fits in with your...(&lt;a href="http://weblogs.asp.net/infinitiesloop/archive/2010/04/21/tokenizing-javascript-a-look-at-what-s-left-after-minification.aspx"&gt;read more&lt;/a&gt;)&lt;img src="http://weblogs.asp.net/aggbug.aspx?PostID=7452881" width="1" height="1"&gt;</content><author><name>InfinitiesLoop</name><uri>http://weblogs.asp.net/members/InfinitiesLoop.aspx</uri></author><category term="AJAX" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/AJAX/default.aspx" /><category term="JavaScript" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/JavaScript/default.aspx" /><category term="Performance" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/Performance/default.aspx" /></entry><entry><title>Join the Dark Side of Visual Studio 2010</title><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/archive/2010/04/20/join-the-dark-side-of-visual-studio-2010.aspx" /><id>http://weblogs.asp.net/infinitiesloop/archive/2010/04/20/join-the-dark-side-of-visual-studio-2010.aspx</id><published>2010-04-20T20:38:00Z</published><updated>2010-04-20T20:38:00Z</updated><content type="html">Hard to believe it’s been so long, but it was almost 4 years ago when I published Join the Dark Side of Visual Studio . That was when a lot of people were still using VS2003, and importing and exporting environment settings required a custom add-in, VSStyler, which has since fallen off the planet and is hard to find (link, anyone? Let me know). Three versions of VS later, and I’m still using and loving the dark side. Pleased, I am (haha). In fact, that article for one reason or another is still one...(&lt;a href="http://weblogs.asp.net/infinitiesloop/archive/2010/04/20/join-the-dark-side-of-visual-studio-2010.aspx"&gt;read more&lt;/a&gt;)&lt;img src="http://weblogs.asp.net/aggbug.aspx?PostID=7451451" width="1" height="1"&gt;</content><author><name>InfinitiesLoop</name><uri>http://weblogs.asp.net/members/InfinitiesLoop.aspx</uri></author><category term=".NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/.NET/default.aspx" /><category term="Visual Studio" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/Visual+Studio/default.aspx" /><category term="Coding Environment" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/Coding+Environment/default.aspx" /></entry><entry><title>ASP.NET 4.0 ScriptManager Improvements</title><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/archive/2009/11/23/asp-net-4-0-scriptmanager-improvements.aspx" /><id>http://weblogs.asp.net/infinitiesloop/archive/2009/11/23/asp-net-4-0-scriptmanager-improvements.aspx</id><published>2009-11-24T05:51:00Z</published><updated>2009-11-24T05:51:00Z</updated><content type="html">.NET Framework 4 Beta 2 has been out for a little while now. There are some subtle improvements to the ScriptManager control in ASP.NET 4.0 that few have picked up on yet. Allow me to introduce you to them! First, let me say that this is strictly about features in the server-side ASP.NET ScriptManager control, not the Ajax library in general. Also – if you do not use the ASP.NET Ajax library but you are a WebForms developer, I assume you, this article is still for you! EnableCdn? Yes please. This...(&lt;a href="http://weblogs.asp.net/infinitiesloop/archive/2009/11/23/asp-net-4-0-scriptmanager-improvements.aspx"&gt;read more&lt;/a&gt;)&lt;img src="http://weblogs.asp.net/aggbug.aspx?PostID=7263952" width="1" height="1"&gt;</content><author><name>InfinitiesLoop</name><uri>http://weblogs.asp.net/members/InfinitiesLoop.aspx</uri></author><category term="ASP.NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/ASP.NET/default.aspx" /><category term="AJAX" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/AJAX/default.aspx" /><category term="JavaScript" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/JavaScript/default.aspx" /><category term="Script Loading" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/Script+Loading/default.aspx" /></entry><entry><title>Microsoft Ajax 4 Preview 5: The DataView Control</title><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/archive/2009/09/11/microsoft-ajax-4-preview-5-the-dataview-control.aspx" /><id>http://weblogs.asp.net/infinitiesloop/archive/2009/09/11/microsoft-ajax-4-preview-5-the-dataview-control.aspx</id><published>2009-09-11T20:00:00Z</published><updated>2009-09-11T20:00:00Z</updated><content type="html">Preview 5 of the Microsoft Ajax 4.0 library has been released. Some quick background – this the next version of the client-side ajax framework you have probably already heard of, the one that ships along with ASP.NET 3.5 (but is also available in script form). The fact it ships with ASP.NET has sometimes led to it being called the ASP.NET AJAX Framework. Technically, that name is a superset – it encompasses “Microsoft Ajax” and it’s ASP.NET specific, server-side features, like the ScriptManager....(&lt;a href="http://weblogs.asp.net/infinitiesloop/archive/2009/09/11/microsoft-ajax-4-preview-5-the-dataview-control.aspx"&gt;read more&lt;/a&gt;)&lt;img src="http://weblogs.asp.net/aggbug.aspx?PostID=7200367" width="1" height="1"&gt;</content><author><name>InfinitiesLoop</name><uri>http://weblogs.asp.net/members/InfinitiesLoop.aspx</uri></author><category term="ASP.NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/ASP.NET/default.aspx" /><category term="AJAX" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/AJAX/default.aspx" /><category term="JavaScript" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/JavaScript/default.aspx" /></entry><entry><title>ASP.NET WebForms: Taking Back the HTML</title><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/archive/2009/07/01/asp-net-webforms-taking-back-the-html.aspx" /><id>http://weblogs.asp.net/infinitiesloop/archive/2009/07/01/asp-net-webforms-taking-back-the-html.aspx</id><published>2009-07-01T23:44:00Z</published><updated>2009-07-01T23:44:00Z</updated><content type="html">&lt;P&gt;There’s a lot of &lt;A href="http://weblogs.asp.net/jeff/archive/2009/06/23/webforms-vs-mvc-the-desire-to-rewrite-everything-an-unexpected-benefit.aspx" mce_href="http://weblogs.asp.net/jeff/archive/2009/06/23/webforms-vs-mvc-the-desire-to-rewrite-everything-an-unexpected-benefit.aspx"&gt;debate&lt;/A&gt; &lt;A href="http://www.hanselman.com/forum/messages.aspx?TopicID=251" mce_href="http://www.hanselman.com/forum/messages.aspx?TopicID=251"&gt;these&lt;/A&gt; &lt;A href="http://haacked.com/archive/2008/11/13/future-of-aspnet.aspx" mce_href="http://haacked.com/archive/2008/11/13/future-of-aspnet.aspx"&gt;days&lt;/A&gt; about the ASP.NET WebForms model vs. the newer ASP.NET MVC model. There are advantages to both. Disadvantages to both. Pick the one that best fits your needs. Nuff said. But sometimes that choice isn’t so obvious.&lt;/P&gt;
&lt;P&gt;MVC for example essentially gives you much more control over the generated HTML for the page. Well, complete control. But sometimes you don’t really need complete control, and the lack of an encapsulated control kind of sucks. HTML Helpers help, but they have no design time experience. Hence, there are the &lt;A href="http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=24471" target=_blank mce_href="http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=24471"&gt;MVC Controls in the MVC Futures project&lt;/A&gt; on CodePlex and an interesting compromise between the two models, at least when it comes to the rendering part of the application.&lt;/P&gt;
&lt;P&gt;But then there’s the other side of the equation – you’ve got a WebForms application, and you need a little more control over the HTML. What’s the compromise there? Well, server controls try to give you control over the markup. Some of them do a pretty good job at it, like the ListView control added in ASP.NET 3.5. Others, not so good. If a control doesn’t let you do what you need, you are pretty much stuck – either abandon the control and all its usefulness, or write your own control.&lt;/P&gt;
&lt;H1&gt;What’s in a control anyway?&lt;/H1&gt;
&lt;P&gt;If you think about it, controls at the highest level are really two very different things.&lt;/P&gt;
&lt;OL&gt;
&lt;LI&gt;Controls abstract the rendering of HTML. &lt;/LI&gt;
&lt;LI&gt;Controls provide client-server integration by managing data between client and server. &lt;/LI&gt;&lt;/OL&gt;
&lt;P&gt;Take the CheckBox control. It renders an input and label, and connects them with the ‘for’ attribute, so clicking the text also checks and unchecks the checkbox. That’s it’s HTML abstraction. It provides client-server integration by allowing you to dynamically read and write to the checked property on a server-side proxy.&lt;/P&gt;
&lt;P&gt;A simple example of #2 is the TextBox control. Double meaning, uh, not intended. Type some text into the box and submit the form – magically, the server-side instance knows what its Text property should do. The control can also push data back to the client. Set the Text property, and magically the value is reflected in the rendered page. This can be much more complex though – the control might manage a hidden field, or rely on data stored in that catch-all hidden field we &lt;A href="http://weblogs.asp.net/infinitiesloop/archive/2006/08/03/Truly-Understanding-Viewstate.aspx" target=_blank mce_href="http://weblogs.asp.net/infinitiesloop/archive/2006/08/03/Truly-Understanding-Viewstate.aspx"&gt;love to hate&lt;/A&gt;, ViewState.&lt;/P&gt;
&lt;P&gt;The thing is, HTML abstraction is useful, but a lot of the time it doesn’t provide a ton of benefit. Client-server integration, however, is usually much more useful. If you don’t need that there’s a good chance you don’t need a control to begin with.&lt;/P&gt;
&lt;H1&gt;Html Controls&lt;/H1&gt;
&lt;P&gt;I would be wrong not to point out that there’s a whole namespace of controls in ASP.NET that are largely underused. HTML controls allow you to add a runat=”server” to an HTML element and get reasonable client-server integration with it. So if you don’t like how the CheckBox control renders, just use the HtmlCheckBox instead. But what if you’re using a more complex control that has no HTML equivalent?&lt;/P&gt;
&lt;P&gt;&lt;STRONG&gt;What if you could control the HTML for any server control without losing the client-server interaction?&lt;/STRONG&gt;&lt;/P&gt;
&lt;P&gt;Wouldn’t that be nice?&lt;/P&gt;
&lt;H1&gt;Taking Control&lt;/H1&gt;
&lt;P&gt;Introducing the &lt;STRONG&gt;CustomRender&lt;/STRONG&gt; control. This control suppresses the rendering of any control(s) you put in it, while allowing you to define your own, replacement HTML. It gets a little nicer than that, though. One step at a time – first, lets choose the enemy. A Button control that sets the text of a Label control.&lt;/P&gt;
&lt;DIV class=codeSample&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;script&lt;/SPAN&gt; runat&lt;SPAN style="COLOR: teal"&gt;="server"&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: #3e60fd"&gt;private&lt;/SPAN&gt; &lt;SPAN style="COLOR: #3e60fd"&gt;void&lt;/SPAN&gt; &lt;SPAN style="COLOR: white"&gt;ButtonClick&lt;/SPAN&gt;(&lt;SPAN style="COLOR: #3e60fd"&gt;object&lt;/SPAN&gt; &lt;SPAN style="COLOR: white"&gt;sender&lt;/SPAN&gt;, &lt;SPAN style="COLOR: #2b91af"&gt;EventArgs&lt;/SPAN&gt; &lt;SPAN style="COLOR: white"&gt;args&lt;/SPAN&gt;) {&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: white"&gt;Label1&lt;/SPAN&gt;&lt;SPAN style="COLOR: aqua"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: white"&gt;Text&lt;/SPAN&gt; &lt;SPAN style="COLOR: aqua"&gt;=&lt;/SPAN&gt; &lt;SPAN style="COLOR: gray"&gt;"You clicked Button1"&lt;/SPAN&gt;;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; }&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;script&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;asp&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;Button&lt;/SPAN&gt; ID&lt;SPAN style="COLOR: teal"&gt;="Button1"&lt;/SPAN&gt; runat&lt;SPAN style="COLOR: teal"&gt;="server"&lt;/SPAN&gt; Text&lt;SPAN style="COLOR: teal"&gt;="Go"&lt;/SPAN&gt; OnClick&lt;SPAN style="COLOR: teal"&gt;="ButtonClick"&lt;/SPAN&gt; &lt;SPAN style="COLOR: gray"&gt;/&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;asp&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;Label&lt;/SPAN&gt; ID&lt;SPAN style="COLOR: teal"&gt;="Label1"&lt;/SPAN&gt; runat&lt;SPAN style="COLOR: teal"&gt;="server"&lt;/SPAN&gt; &lt;SPAN style="COLOR: gray"&gt;/&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;/DIV&gt;
&lt;P&gt;&lt;STRONG&gt;You’re going down, Button1.&lt;/STRONG&gt; Bring on the CustomRender:&lt;/P&gt;
&lt;DIV class=codeSample&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;i88&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;CustomRender&lt;/SPAN&gt; runat&lt;SPAN style="COLOR: teal"&gt;="server"&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;ControlTemplate&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;asp&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;Button&lt;/SPAN&gt; ID&lt;SPAN style="COLOR: teal"&gt;="Button1"&lt;/SPAN&gt; runat&lt;SPAN style="COLOR: teal"&gt;="server"&lt;/SPAN&gt; Text&lt;SPAN style="COLOR: teal"&gt;="Go"&lt;/SPAN&gt; OnClick&lt;SPAN style="COLOR: teal"&gt;="ButtonClick"&lt;/SPAN&gt; &lt;SPAN style="COLOR: gray"&gt;/&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;asp&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;Label&lt;/SPAN&gt; ID&lt;SPAN style="COLOR: teal"&gt;="Label1"&lt;/SPAN&gt; runat&lt;SPAN style="COLOR: teal"&gt;="server"&lt;/SPAN&gt; &lt;SPAN style="COLOR: gray"&gt;/&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;ControlTemplate&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;i88&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;CustomRender&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;/DIV&gt;
&lt;P&gt;That’s step 1. Now how do we get our own HTML in here? As this stands, the button and label will not render anything. They still participate in the page lifecycle and all that goodness. But nothing renders. So we could just put the HTML next to the CustomRender control. But it would be nice if this control helped me out a little by giving me what these controls would have rendered, wouldn’t it? Lets swap over to Design View.&lt;/P&gt;
&lt;P&gt;If you’re one of the types that never uses Design View – it’s that button that says ‘Design’ on the lower left, or Shift-F7.&lt;/P&gt;
&lt;P&gt;&lt;A href="http://weblogs.asp.net/blogs/infinitiesloop/image_58CF26C0.png" mce_href="http://weblogs.asp.net/blogs/infinitiesloop/image_58CF26C0.png"&gt;&lt;IMG style="BORDER-RIGHT-WIDTH: 0px; DISPLAY: inline; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" title=image border=0 alt=image src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_2EFB8600.png" width=608 height=483 mce_src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_2EFB8600.png"&gt;&lt;/A&gt; &lt;/P&gt;
&lt;P&gt;Click on “Update HtmlTemplate”, then switch back on over to Source view. Voila…&lt;/P&gt;
&lt;DIV class=codeSample&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;i88&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;CustomRender&lt;/SPAN&gt; runat&lt;SPAN style="COLOR: teal"&gt;="server"&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;ControlTemplate&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;asp&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;Button&lt;/SPAN&gt; ID&lt;SPAN style="COLOR: teal"&gt;="Button1"&lt;/SPAN&gt; runat&lt;SPAN style="COLOR: teal"&gt;="server"&lt;/SPAN&gt; Text&lt;SPAN style="COLOR: teal"&gt;="Go"&lt;/SPAN&gt; OnClick&lt;SPAN style="COLOR: teal"&gt;="ButtonClick"&lt;/SPAN&gt; &lt;SPAN style="COLOR: gray"&gt;/&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;asp&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;Label&lt;/SPAN&gt; ID&lt;SPAN style="COLOR: teal"&gt;="Label1"&lt;/SPAN&gt; runat&lt;SPAN style="COLOR: teal"&gt;="server"&lt;/SPAN&gt; &lt;SPAN style="COLOR: gray"&gt;/&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;ControlTemplate&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;HtmlTemplate&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;input&lt;/SPAN&gt; ID&lt;SPAN style="COLOR: teal"&gt;="Button1"&lt;/SPAN&gt; name&lt;SPAN style="COLOR: teal"&gt;="Button1"&lt;/SPAN&gt; type&lt;SPAN style="COLOR: teal"&gt;="submit"&lt;/SPAN&gt; value&lt;SPAN style="COLOR: teal"&gt;="Go"&lt;/SPAN&gt; &lt;SPAN style="COLOR: gray"&gt;/&amp;gt;&lt;/SPAN&gt; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;span&lt;/SPAN&gt; ID&lt;SPAN style="COLOR: teal"&gt;="Label1"&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;span&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;HtmlTemplate&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;i88&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;CustomRender&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;/DIV&gt;
&lt;P&gt;The designer for the control has rendered its ControlTemplate and put the result into the HtmlTemplate. And just to prove it works, modify the HTML a little. Lets change the ‘value’ of the input from ‘Go’ to ‘Gone’. &lt;/P&gt;
&lt;P&gt;&lt;A href="http://weblogs.asp.net/blogs/infinitiesloop/image_6661972E.png" mce_href="http://weblogs.asp.net/blogs/infinitiesloop/image_6661972E.png"&gt;&lt;IMG style="BORDER-RIGHT-WIDTH: 0px; DISPLAY: inline; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" title=image border=0 alt=image src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_4BB4FB15.png" width=360 height=271 mce_src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_4BB4FB15.png"&gt;&lt;/A&gt; &lt;/P&gt;
&lt;P&gt;And now lets click the button and see if the server control still works. Remember, it’s supposed to set the text of the label to “You clicked Button1.”. Hmmmm.. nothing. It broke!!! No… remember, when you do this, you take complete control over the HTML. That text doesn’t just come from no where. The code is running, but you haven’t put it into your HTML.&lt;/P&gt;
&lt;P&gt;How do you do that? No problem – &lt;EM&gt;think of the HTML template like a mini-MVC View&lt;/EM&gt;.&lt;/P&gt;
&lt;DIV class=codeSample&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;HtmlTemplate&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;input&lt;/SPAN&gt; ID&lt;SPAN style="COLOR: teal"&gt;="Button1"&lt;/SPAN&gt; name&lt;SPAN style="COLOR: teal"&gt;="Button1"&lt;/SPAN&gt; type&lt;SPAN style="COLOR: teal"&gt;="submit"&lt;/SPAN&gt; value&lt;SPAN style="COLOR: teal"&gt;="Gone"&lt;/SPAN&gt; &lt;SPAN style="COLOR: gray"&gt;/&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;span&lt;/SPAN&gt; ID&lt;SPAN style="COLOR: teal"&gt;="Label1"&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: yellow"&gt;&amp;lt;%&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;=&lt;/SPAN&gt; &lt;SPAN style="COLOR: white"&gt;Label1&lt;/SPAN&gt;&lt;SPAN style="COLOR: aqua"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: white"&gt;Text&lt;/SPAN&gt; &lt;SPAN style="COLOR: yellow"&gt;%&amp;gt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;span&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;HtmlTemplate&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;/DIV&gt;
&lt;P&gt;Now when we click the button, it works:&lt;/P&gt;
&lt;P&gt;&lt;A href="http://weblogs.asp.net/blogs/infinitiesloop/image_23361901.png" mce_href="http://weblogs.asp.net/blogs/infinitiesloop/image_23361901.png"&gt;&lt;IMG style="BORDER-RIGHT-WIDTH: 0px; DISPLAY: inline; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" title=image border=0 alt=image src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_21854D2D.png" width=360 height=271 mce_src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_21854D2D.png"&gt;&lt;/A&gt; &lt;/P&gt;
&lt;H1&gt;Show Off – The Challenge&lt;/H1&gt;
&lt;P&gt;“Okay,” you say, “but that’s just a button and a label. What about a real world scenario,” you spout in disbelief? I dunno if you said that, but it’s more interesting to pretend like you are challenging me to put this technique to the test. &lt;U&gt;I accept your pretend challenge&lt;/U&gt;.&lt;/P&gt;
&lt;P&gt;Way back in ASP.NET 1.x there was the DataGrid control. As great as it was at the time, it’s limitations eventually led to the GridView control. As great as &lt;EM&gt;that&lt;/EM&gt; was, you still didn’t get enough control over the markup and CSS, so the ListView control was born (I often wonder what we’d call the next iteration – running out of two-word data-like combinations aren’t we? No, there already is a DataList control!). My point being that in the current set of databound controls, the DataGrid control is probably the oldest and most set in its ways, and most known for its lack of customizability. It renders as a &amp;lt;Table&amp;gt;, and that’s that. How 1990’s of it.&lt;/P&gt;
&lt;P&gt;A perfect target for the challenge – let’s do the unthinkable. &lt;U&gt;Get a DataGrid to render as &amp;lt;UL&amp;gt; and &amp;lt;LI&amp;gt; and be styled with 100% CSS, while maintaining the server-side features like SelectedIndex&lt;/U&gt;.&lt;/P&gt;
&lt;P&gt;First, lets take a look at a DataGrid utilizing the SelectedIndex feature.&lt;/P&gt;
&lt;DIV class=codeSample&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;asp&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;DataGrid&lt;/SPAN&gt; ID&lt;SPAN style="COLOR: teal"&gt;="dg1"&lt;/SPAN&gt; runat&lt;SPAN style="COLOR: teal"&gt;="server"&lt;/SPAN&gt; &lt;BR&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; AutoGenerateColumns&lt;SPAN style="COLOR: teal"&gt;="false"&lt;/SPAN&gt; SelectedIndex&lt;SPAN style="COLOR: teal"&gt;="1"&lt;/SPAN&gt; SelectedItemStyle-CssClass&lt;SPAN style="COLOR: teal"&gt;="selected"&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; DataSource&lt;SPAN style="COLOR: teal"&gt;='&lt;/SPAN&gt;&lt;SPAN style="COLOR: yellow"&gt;&amp;lt;%&lt;/SPAN&gt;# DummyData &lt;SPAN style="COLOR: yellow"&gt;%&amp;gt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;'&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;Columns&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;asp&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;BoundColumn&lt;/SPAN&gt; DataField&lt;SPAN style="COLOR: teal"&gt;="Name"&lt;/SPAN&gt; &lt;SPAN style="COLOR: gray"&gt;/&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;asp&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;ButtonColumn&lt;/SPAN&gt; DataTextField&lt;SPAN style="COLOR: teal"&gt;="Price"&lt;/SPAN&gt; DataTextFormatString&lt;SPAN style="COLOR: teal"&gt;="{0:c}"&lt;/SPAN&gt; CommandName&lt;SPAN style="COLOR: teal"&gt;="Select"&lt;/SPAN&gt; &lt;SPAN style="COLOR: gray"&gt;/&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;Columns&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;asp&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;DataGrid&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;/DIV&gt;
&lt;P&gt;It shows two columns – a product name, and a price, formatted as currency. You can click on the price to select the item, which then has a different CSS class. The DummyData property is just returning an ArrayList with a few sample items. Let’s not forget how you databind this thing… you may be using a DataSource control. For this purpose we’ll just do it the old fashioned way.&lt;/P&gt;
&lt;DIV class=codeSample&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;protected&lt;/SPAN&gt; &lt;SPAN style="COLOR: #3e60fd"&gt;override&lt;/SPAN&gt; &lt;SPAN style="COLOR: #3e60fd"&gt;void&lt;/SPAN&gt; &lt;SPAN style="COLOR: white"&gt;OnLoad&lt;/SPAN&gt;(&lt;SPAN style="COLOR: #2b91af"&gt;EventArgs&lt;/SPAN&gt; &lt;SPAN style="COLOR: white"&gt;e&lt;/SPAN&gt;) {&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: #3e60fd"&gt;if&lt;/SPAN&gt; (&lt;SPAN style="COLOR: aqua"&gt;!&lt;/SPAN&gt;&lt;SPAN style="COLOR: white"&gt;Page&lt;/SPAN&gt;&lt;SPAN style="COLOR: aqua"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: white"&gt;IsPostBack&lt;/SPAN&gt;) {&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: white"&gt;dg1&lt;/SPAN&gt;&lt;SPAN style="COLOR: aqua"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: white"&gt;DataBind&lt;/SPAN&gt;();&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; }&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: #3e60fd"&gt;base&lt;/SPAN&gt;&lt;SPAN style="COLOR: aqua"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: white"&gt;OnLoad&lt;/SPAN&gt;(&lt;SPAN style="COLOR: white"&gt;e&lt;/SPAN&gt;);&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;}&lt;/PRE&gt;&lt;/DIV&gt;
&lt;P&gt;Now lets take a look at the rendering.&lt;/P&gt;
&lt;DIV class=codeSample&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;table&lt;/SPAN&gt; cellspacing&lt;SPAN style="COLOR: teal"&gt;="0"&lt;/SPAN&gt; rules&lt;SPAN style="COLOR: teal"&gt;="all"&lt;/SPAN&gt; border&lt;SPAN style="COLOR: teal"&gt;="1"&lt;/SPAN&gt; id&lt;SPAN style="COLOR: teal"&gt;="dg1"&lt;/SPAN&gt; style&lt;SPAN style="COLOR: teal"&gt;="&lt;/SPAN&gt;&lt;SPAN style="COLOR: red"&gt;border-collapse&lt;/SPAN&gt;:&lt;SPAN style="COLOR: #3e60fd"&gt;collapse&lt;/SPAN&gt;;&lt;SPAN style="COLOR: teal"&gt;"&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;tr&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;td&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: yellow"&gt;&amp;amp;nbsp;&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;td&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;td&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: yellow"&gt;&amp;amp;nbsp;&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;td&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;tr&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;tr&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;td&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;Widget&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;td&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;td&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;a&lt;/SPAN&gt; href&lt;SPAN style="COLOR: teal"&gt;="javascript:__doPostBack('dg1$ctl02$ctl00','')"&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;$19.95&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;a&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;td&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;tr&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;tr&lt;/SPAN&gt; class&lt;SPAN style="COLOR: teal"&gt;="selected"&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;td&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;Horn&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;td&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;td&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;a&lt;/SPAN&gt; href&lt;SPAN style="COLOR: teal"&gt;="javascript:__doPostBack('dg1$ctl03$ctl00','')"&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;$2.99&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;a&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;td&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;tr&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;table&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;/DIV&gt;
&lt;P&gt;&lt;A href="http://weblogs.asp.net/blogs/infinitiesloop/image_3FEF8E16.png" mce_href="http://weblogs.asp.net/blogs/infinitiesloop/image_3FEF8E16.png"&gt;&lt;IMG style="BORDER-RIGHT-WIDTH: 0px; DISPLAY: inline; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" title=image border=0 alt=image src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_3A347470.png" width=425 height=357 mce_src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_3A347470.png"&gt;&lt;/A&gt; &lt;/P&gt;
&lt;P&gt;A few things of note going on here. For the SelectedIndex feature to work, the ButtonColumn has rendered an &amp;lt;A&amp;gt; tag which does a postback. The ID it passes to the __doPostBack function is the UniqueID of a link button it has added to the control tree. The LinkButton raises a bubble command named “Select”, which the DataGrid picks up and sets its SelectedIndex property. While rendering, the DataGrid applies a different style to the selected item.&lt;/P&gt;
&lt;P&gt;Translating this into your own custom HTML is pretty easy actually. The trick is to do rendering only – you could in theory use a Repeater to bind over the same items. We’re trying to leverage the existing features of the DataGrid, so rather than grab the data directly we’re enumerate the DataGrid’s Items collection and try to reuse as much as we can.&lt;/P&gt;
&lt;P&gt;Again, think of this template as a mini-MVC view, and the actual control we are targeting is like our ViewData. That way, changes to the DataGrid don’t require changes to the custom rendering.&lt;/P&gt;
&lt;DIV class=codeSample&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;i88&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;CustomRender&lt;/SPAN&gt; runat&lt;SPAN style="COLOR: teal"&gt;="server"&lt;/SPAN&gt; ID&lt;SPAN style="COLOR: teal"&gt;="c1"&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;ControlTemplate&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;asp&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;DataGrid&lt;/SPAN&gt; ID&lt;SPAN style="COLOR: teal"&gt;="dg1"&lt;/SPAN&gt; runat&lt;SPAN style="COLOR: teal"&gt;="server"&lt;/SPAN&gt; SelectedItemStyle-BackColor&lt;SPAN style="COLOR: teal"&gt;="Red"&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; AutoGenerateColumns&lt;SPAN style="COLOR: teal"&gt;="false"&lt;/SPAN&gt; SelectedIndex&lt;SPAN style="COLOR: teal"&gt;="1"&lt;BR&gt;            &lt;/SPAN&gt;SelectedItemStyle-CssClass&lt;SPAN style="COLOR: teal"&gt;="selected"&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; DataSource&lt;SPAN style="COLOR: teal"&gt;='&lt;/SPAN&gt;&lt;SPAN style="COLOR: yellow"&gt;&amp;lt;%&lt;/SPAN&gt;# DummyData &lt;SPAN style="COLOR: yellow"&gt;%&amp;gt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;'&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;Columns&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;asp&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;BoundColumn&lt;/SPAN&gt; DataField&lt;SPAN style="COLOR: teal"&gt;="Name"&lt;/SPAN&gt; &lt;SPAN style="COLOR: gray"&gt;/&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;asp&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;ButtonColumn&lt;/SPAN&gt; DataTextField&lt;SPAN style="COLOR: teal"&gt;="Price"&lt;BR&gt;                     &lt;/SPAN&gt;DataTextFormatString&lt;SPAN style="COLOR: teal"&gt;="{0:c}"&lt;/SPAN&gt; CommandName&lt;SPAN style="COLOR: teal"&gt;="Select"&lt;/SPAN&gt; &lt;SPAN style="COLOR: gray"&gt;/&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;Columns&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;asp&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;DataGrid&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;ControlTemplate&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;HtmlTemplate&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: yellow"&gt;&amp;lt;%&lt;/SPAN&gt; &lt;SPAN style="COLOR: #3e60fd"&gt;for&lt;/SPAN&gt; (&lt;SPAN style="COLOR: #3e60fd"&gt;int&lt;/SPAN&gt; &lt;SPAN style="COLOR: white"&gt;i&lt;/SPAN&gt; &lt;SPAN style="COLOR: aqua"&gt;=&lt;/SPAN&gt; &lt;SPAN style="COLOR: yellow"&gt;0&lt;/SPAN&gt;; &lt;SPAN style="COLOR: white"&gt;i&lt;/SPAN&gt; &lt;SPAN style="COLOR: aqua"&gt;&amp;lt;&lt;/SPAN&gt; &lt;SPAN style="COLOR: white"&gt;dg1&lt;/SPAN&gt;&lt;SPAN style="COLOR: aqua"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: white"&gt;Items&lt;/SPAN&gt;&lt;SPAN style="COLOR: aqua"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: white"&gt;Count&lt;/SPAN&gt;; &lt;SPAN style="COLOR: white"&gt;i&lt;/SPAN&gt;&lt;SPAN style="COLOR: aqua"&gt;++&lt;/SPAN&gt;) {&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="BACKGROUND: #151515; COLOR: green"&gt;// enumerate the DataGrid's items so we can choose how to render them&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: #3e60fd"&gt;var&lt;/SPAN&gt; &lt;SPAN style="COLOR: white"&gt;item&lt;/SPAN&gt; &lt;SPAN style="COLOR: aqua"&gt;=&lt;/SPAN&gt; &lt;SPAN style="COLOR: white"&gt;dg1&lt;/SPAN&gt;&lt;SPAN style="COLOR: aqua"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: white"&gt;Items&lt;/SPAN&gt;[&lt;SPAN style="COLOR: white"&gt;i&lt;/SPAN&gt;];&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="BACKGROUND: #151515; COLOR: green"&gt;// the ButtonColumn is rendering a LinkButton or Button &lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: #3e60fd"&gt;var&lt;/SPAN&gt; &lt;SPAN style="COLOR: white"&gt;priceLink&lt;/SPAN&gt; &lt;SPAN style="COLOR: aqua"&gt;=&lt;/SPAN&gt; (&lt;SPAN style="COLOR: #2b91af"&gt;IButtonControl&lt;/SPAN&gt;)&lt;SPAN style="COLOR: white"&gt;item&lt;/SPAN&gt;&lt;SPAN style="COLOR: aqua"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: white"&gt;Cells&lt;/SPAN&gt;[&lt;SPAN style="COLOR: yellow"&gt;1&lt;/SPAN&gt;]&lt;SPAN style="COLOR: aqua"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: white"&gt;Controls&lt;/SPAN&gt;[&lt;SPAN style="COLOR: yellow"&gt;0&lt;/SPAN&gt;];&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: yellow"&gt;%&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;ul&lt;/SPAN&gt; class&lt;SPAN style="COLOR: teal"&gt;="item&lt;/SPAN&gt;&lt;SPAN style="COLOR: yellow"&gt;&amp;lt;%&lt;/SPAN&gt;= dg1.SelectedIndex == i ? " selected" : "" &lt;SPAN style="COLOR: yellow"&gt;%&amp;gt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;"&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;li&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: yellow"&gt;&amp;lt;%&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;=&lt;/SPAN&gt; &lt;SPAN style="COLOR: white"&gt;item&lt;/SPAN&gt;&lt;SPAN style="COLOR: aqua"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: white"&gt;Cells&lt;/SPAN&gt;[&lt;SPAN style="COLOR: yellow"&gt;0&lt;/SPAN&gt;]&lt;SPAN style="COLOR: aqua"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: white"&gt;Text&lt;/SPAN&gt; &lt;SPAN style="COLOR: yellow"&gt;%&amp;gt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;li&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;li&lt;/SPAN&gt; class&lt;SPAN style="COLOR: teal"&gt;='price'&lt;/SPAN&gt; &lt;BR&gt;                onclick&lt;SPAN style="COLOR: teal"&gt;="&lt;/SPAN&gt;&lt;SPAN style="COLOR: yellow"&gt;&amp;lt;%&lt;/SPAN&gt;= Page.GetPostBackEventReference((Control)priceLink) &lt;SPAN style="COLOR: yellow"&gt;%&amp;gt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;"&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;BR&gt;                &lt;/SPAN&gt;&lt;SPAN style="COLOR: yellow"&gt;&amp;lt;%&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;=&lt;/SPAN&gt; &lt;SPAN style="COLOR: white"&gt;priceLink&lt;/SPAN&gt;&lt;SPAN style="COLOR: aqua"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: white"&gt;Text&lt;/SPAN&gt; &lt;SPAN style="COLOR: yellow"&gt;%&amp;gt;&lt;BR&gt;            &lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;li&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;ul&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: yellow"&gt;&amp;lt;%&lt;/SPAN&gt; } &lt;SPAN style="COLOR: yellow"&gt;%&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;HtmlTemplate&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;i88&lt;/SPAN&gt;&lt;SPAN style="COLOR: teal"&gt;:&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;CustomRender&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;/DIV&gt;
&lt;P&gt;A for loop enumerates the DataGrid.Items collection. For the first column we just repeat the cell’s text. The 2nd column is more complex as it contains a LinkButton with a postback reference. Even so, it’s not too complex – get a reference to the LinkButton and use Page.GetPostBackEventReference() to generate the necessary postback script. We are now free to apply CSS in anyway we like. Watching for the the SelectedIndex, we apply a ‘selected’ class, for example.&lt;/P&gt;
&lt;P&gt;I’ve just quickly put together these styles to make each ‘item’ float left, so the “grid” isn’t even a grid anymore, just to show how it can be totally different.&lt;/P&gt;
&lt;DIV class=codeSample&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;style&lt;/SPAN&gt; type&lt;SPAN style="COLOR: teal"&gt;="text/css"&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: #a31515"&gt;ul.item&lt;/SPAN&gt; {&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: red"&gt;float&lt;/SPAN&gt;: &lt;SPAN style="COLOR: #3e60fd"&gt;left&lt;/SPAN&gt;;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: red"&gt;list-style-type&lt;/SPAN&gt;: &lt;SPAN style="COLOR: #3e60fd"&gt;none&lt;/SPAN&gt;;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: red"&gt;padding&lt;/SPAN&gt;: &lt;SPAN style="COLOR: #3e60fd"&gt;0px&lt;/SPAN&gt; &lt;SPAN style="COLOR: #3e60fd"&gt;10px&lt;/SPAN&gt; &lt;SPAN style="COLOR: #3e60fd"&gt;0px&lt;/SPAN&gt; &lt;SPAN style="COLOR: #3e60fd"&gt;10px&lt;/SPAN&gt;;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; }&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: #a31515"&gt;ul.selected&lt;/SPAN&gt; {&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: red"&gt;border&lt;/SPAN&gt;: &lt;SPAN style="COLOR: #3e60fd"&gt;solid&lt;/SPAN&gt; &lt;SPAN style="COLOR: #3e60fd"&gt;1px&lt;/SPAN&gt; &lt;SPAN style="COLOR: #3e60fd"&gt;red&lt;/SPAN&gt;;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; }&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: #a31515"&gt;li.price&lt;/SPAN&gt; {&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: red"&gt;cursor&lt;/SPAN&gt;: &lt;SPAN style="COLOR: #3e60fd"&gt;pointer&lt;/SPAN&gt;;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: red"&gt;color&lt;/SPAN&gt;: &lt;SPAN style="COLOR: #3e60fd"&gt;Blue&lt;/SPAN&gt;;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="COLOR: red"&gt;text-decoration&lt;/SPAN&gt;: &lt;SPAN style="COLOR: #3e60fd"&gt;underline&lt;/SPAN&gt;;&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; }&lt;/PRE&gt;&lt;PRE style="MARGIN: 0px"&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;lt;/&lt;/SPAN&gt;&lt;SPAN style="COLOR: #3e60fd"&gt;style&lt;/SPAN&gt;&lt;SPAN style="COLOR: gray"&gt;&amp;gt;&lt;/SPAN&gt;&lt;/PRE&gt;&lt;/DIV&gt;
&lt;P&gt;And here it is running.&lt;/P&gt;
&lt;P&gt;&lt;A href="http://weblogs.asp.net/blogs/infinitiesloop/image_3C8DF66E.png" mce_href="http://weblogs.asp.net/blogs/infinitiesloop/image_3C8DF66E.png"&gt;&lt;IMG style="BORDER-RIGHT-WIDTH: 0px; DISPLAY: inline; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" title=image border=0 alt=image src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_41FC6712.png" width=425 height=357 mce_src="http://weblogs.asp.net/blogs/infinitiesloop/image_thumb_41FC6712.png"&gt;&lt;/A&gt; &lt;/P&gt;
&lt;H1&gt;Mission Accomplished&lt;/H1&gt;
&lt;P&gt;Perhaps you are thinking that is pretty ugly and difficult. If you are, remember that is why controls abstract that stuff away for you, so it’s easy and expressive. This is by no means “the end” of control rendering. It’s a tool you should keep in your toolbox. If you have a difficult to fix rendering issue for a specific control, now you don’t have to say goodbye to the whole thing.&lt;/P&gt;
&lt;H1&gt;How does it work?&lt;/H1&gt;
&lt;P&gt;It’s actually pretty simple! All controls create their HTML in the Render() method. To control the HTML, you just need a way of injecting your own HTML while suppressing the stuff it’s Render() method produces. Ok – so, &lt;EM&gt;don’t call Render()&lt;/EM&gt;. The Render method unfortunately does not only produce HTML. Sometimes it produces script references or “startup” scripts. Sometimes it registers with the ASP.NET Event Validation feature for security purposes. So this control still calls Render, but it throws away the resulting HTML. It instantiates the ControlTemplate like any other template, adding it to its own control tree so they particulate in the lifecycle. It just chooses to actually render the HTML template instead. That is, unless it is design time. Then it renders the control template – allowing you to use the controls in the designer like you normally could.&lt;/P&gt;
&lt;H1&gt;Gotchas&lt;/H1&gt;
&lt;P&gt;Controls will not necessarily take kindly to being rendered “for reals” at Design Time. The page isn’t real, and the other controls on the page don’t necessarily exist or are in their proper hierarchy. So the “Update HtmlTemplate” designer action may not always work. It might even cause an exception to be thrown. It depends on the control.&lt;/P&gt;
&lt;P&gt;Also, I find that although the correct HTML is being rendered internally, VS gets it’s hands on it and makes a few modifications to the persistence of it for some reason. It seems mostly benign, like reordering element attributes. But one bad thing it does is capitalize the ‘id’ attribute, which is supposed to be in lower case if you care about XHTML compliance. Easy enough to fix once you get the HTML bootstrapped. I’m trying to find out from someone on the team why this happens and if we can fix it. If all else fails, you can always run the page and use the actual source to get the HTML rather than use the designer trick.&lt;/P&gt;
&lt;H1&gt;Download &amp;amp; Discuss&lt;/H1&gt;
&lt;P&gt;It’s up on code gallery, including the sample of the world’s first cannibalized DataGrid.&lt;/P&gt;
&lt;P&gt;&lt;A title=http://code.msdn.microsoft.com/aspnetcustomrender href="http://code.msdn.microsoft.com/aspnetcustomrender" mce_href="http://code.msdn.microsoft.com/aspnetcustomrender"&gt;http://code.msdn.microsoft.com/aspnetcustomrender&lt;/A&gt;&lt;/P&gt;&lt;img src="http://weblogs.asp.net/aggbug.aspx?PostID=7138290" width="1" height="1"&gt;</content><author><name>InfinitiesLoop</name><uri>http://weblogs.asp.net/members/InfinitiesLoop.aspx</uri></author><category term=".NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/.NET/default.aspx" /><category term="ASP.NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/ASP.NET/default.aspx" /><category term="Visual Studio" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/Visual+Studio/default.aspx" /><category term="HTML" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/HTML/default.aspx" /><category term="MVC" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/MVC/default.aspx" /></entry><entry><title>Professional ASP.NET 3.5 AJAX Released</title><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/archive/2009/02/10/professional-asp-net-3-5-ajax-released.aspx" /><id>http://weblogs.asp.net/infinitiesloop/archive/2009/02/10/professional-asp-net-3-5-ajax-released.aspx</id><published>2009-02-10T23:35:00Z</published><updated>2009-02-10T23:35:00Z</updated><content type="html">&lt;P mce_keep="true"&gt;Looking for an ASP.NET AJAX book? This one has been massively updated from its 2.0 version, to cover in detail the features added in 3.5, and not to be forgotten, 3.5 SP1. For example, Script Combining was a new feature in 3.5 SP1, and so was History support, so it's an important distinction! The 2.0 book was 307 pages, and this one is 552. History support, by the way, has a dedicated chapter. Script combining is a major portion of the chapter on the ScriptManager.&lt;/P&gt;
&lt;P mce_keep="true"&gt;&amp;nbsp;Another important difference between the 2.0 and 3.5 versions -- this time, I'm a contributing author. :) My first major technical publication, hopefully more to come. I'm that weird guy on the right.&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.amazon.com/Professional-ASP-NET-AJAX-Bill-Evjen/dp/0470392177" target=_blank mce_href="http://www.amazon.com/Professional-ASP-NET-AJAX-Bill-Evjen/dp/0470392177"&gt;&lt;IMG border=0 src="http://www.infinity88.com/images/blog/ASPNET35AJAX.jpg" mce_src="http://www.infinity88.com/images/blog/ASPNET35AJAX.jpg"&gt;&lt;/A&gt; 
&lt;P&gt;&lt;A href="http://www.amazon.com/Professional-ASP-NET-AJAX-Bill-Evjen/dp/0470392177" target=_blank mce_href="http://www.amazon.com/Professional-ASP-NET-AJAX-Bill-Evjen/dp/0470392177"&gt;http://www.amazon.com/Professional-ASP-NET-AJAX-Bill-Evjen/dp/0470392177&lt;/A&gt; &lt;/P&gt;&lt;img src="http://weblogs.asp.net/aggbug.aspx?PostID=6897200" width="1" height="1"&gt;</content><author><name>InfinitiesLoop</name><uri>http://weblogs.asp.net/members/InfinitiesLoop.aspx</uri></author><category term=".NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/.NET/default.aspx" /><category term="ASP.NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/ASP.NET/default.aspx" /><category term="AJAX" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/AJAX/default.aspx" /></entry><entry><title>The Event Handler That Cried Wolf</title><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/archive/2009/01/14/the-event-handler-that-cried-wolf.aspx" /><id>http://weblogs.asp.net/infinitiesloop/archive/2009/01/14/the-event-handler-that-cried-wolf.aspx</id><published>2009-01-14T16:00:00Z</published><updated>2009-01-14T16:00:00Z</updated><content type="html">I ran into an interesting and unexpected behavior in ASP.NET AJAX event handling the other day. Once I figured out what was going on, I was almost positive it was a bug, so I started looking into what a solution would be. But just out of curiosity, I looked at what the behavior was for a server-side event. Much to my surprise, the behavior was the same. The behavior then was consistent with the server-side behavior, not a bug. But is it the &amp;quot;correct&amp;quot; behavior? Tell me what you think......(&lt;a href="http://weblogs.asp.net/infinitiesloop/archive/2009/01/14/the-event-handler-that-cried-wolf.aspx"&gt;read more&lt;/a&gt;)&lt;img src="http://weblogs.asp.net/aggbug.aspx?PostID=6835068" width="1" height="1"&gt;</content><author><name>InfinitiesLoop</name><uri>http://weblogs.asp.net/members/InfinitiesLoop.aspx</uri></author><category term=".NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/.NET/default.aspx" /><category term="ASP.NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/ASP.NET/default.aspx" /><category term="AJAX" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/AJAX/default.aspx" /></entry><entry><title>ASP.NET AJAX 4.0: Observing updates to POJOs (Plain 'Ole JavaScript Objects)</title><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/archive/2008/11/09/asp-net-ajax-4-0-observing-updates-to-pojos-plain-ole-javascript-objects.aspx" /><id>http://weblogs.asp.net/infinitiesloop/archive/2008/11/09/asp-net-ajax-4-0-observing-updates-to-pojos-plain-ole-javascript-objects.aspx</id><published>2008-11-10T07:27:00Z</published><updated>2008-11-10T07:27:00Z</updated><content type="html">First of all, if you haven't already done so, download the ASP.NET AJAX 4.0 Preview 3 now and try it out! And after you're done with that, come back here, or there , or there , or there , and let us know what you think and what you like or don't like about it. We love feedback, and it really does have an impact on the product. We wouldn't go through all the trouble of releasing preview bits or presenting these things if it didn't. So, I thought I would detail one of the interesting yet behind-the...(&lt;a href="http://weblogs.asp.net/infinitiesloop/archive/2008/11/09/asp-net-ajax-4-0-observing-updates-to-pojos-plain-ole-javascript-objects.aspx"&gt;read more&lt;/a&gt;)&lt;img src="http://weblogs.asp.net/aggbug.aspx?PostID=6728228" width="1" height="1"&gt;</content><author><name>InfinitiesLoop</name><uri>http://weblogs.asp.net/members/InfinitiesLoop.aspx</uri></author><category term=".NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/.NET/default.aspx" /><category term="ASP.NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/ASP.NET/default.aspx" /><category term="AJAX" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/AJAX/default.aspx" /><category term="JavaScript" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/JavaScript/default.aspx" /></entry><entry><title>Google Chrome - Aw, Snap!</title><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/archive/2008/09/03/google-chrome-aw-snap.aspx" /><id>http://weblogs.asp.net/infinitiesloop/archive/2008/09/03/google-chrome-aw-snap.aspx</id><published>2008-09-04T05:32:00Z</published><updated>2008-09-04T05:32:00Z</updated><content type="html">Plenty of people have already seen this... interesting... error screen in chrome. I wanted to see what a run-away script would do to Chrome. There's always a warning that the script is taking too long, giving you a chance to shut it down. Here's what Chrome does... What is that icon? Is the page COLD or something? It's snowing! It's wearing a scarf! I guess the connection is that the page is "frozen." EDIT: If I decide to "kill" it, they should have an animation of a spear going through it or something...(&lt;a href="http://weblogs.asp.net/infinitiesloop/archive/2008/09/03/google-chrome-aw-snap.aspx"&gt;read more&lt;/a&gt;)&lt;img src="http://weblogs.asp.net/aggbug.aspx?PostID=6597803" width="1" height="1"&gt;</content><author><name>InfinitiesLoop</name><uri>http://weblogs.asp.net/members/InfinitiesLoop.aspx</uri></author><category term="AJAX" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/AJAX/default.aspx" /><category term="JavaScript" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/JavaScript/default.aspx" /></entry><entry><title>Visual Studio Tip: Disable F1!</title><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/archive/2008/07/18/visual-studio-tip-disable-f1.aspx" /><id>http://weblogs.asp.net/infinitiesloop/archive/2008/07/18/visual-studio-tip-disable-f1.aspx</id><published>2008-07-18T20:35:00Z</published><updated>2008-07-18T20:35:00Z</updated><content type="html">Lately I've been using a laptop more often than a desktop to work in Visual Studio, and of course like most laptop keyboards, the keys are jammed close together. The most annoying thing I keep doing by mistake is hitting F1 instead of Escape, which of course begins the not-so-quick process of bringing up help. Every time I do it, I sigh, wait, and close it. No longer... realizing I can just disable F1 has made my day. Now I can hit escape without fear....(&lt;a href="http://weblogs.asp.net/infinitiesloop/archive/2008/07/18/visual-studio-tip-disable-f1.aspx"&gt;read more&lt;/a&gt;)&lt;img src="http://weblogs.asp.net/aggbug.aspx?PostID=6417150" width="1" height="1"&gt;</content><author><name>InfinitiesLoop</name><uri>http://weblogs.asp.net/members/InfinitiesLoop.aspx</uri></author><category term=".NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/.NET/default.aspx" /><category term="Visual Studio" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/Visual+Studio/default.aspx" /><category term="Coding Environment" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/Coding+Environment/default.aspx" /><category term="Keyboard" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/Keyboard/default.aspx" /></entry><entry><title>My Latest Work</title><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/archive/2008/06/17/my-latest-work.aspx" /><id>http://weblogs.asp.net/infinitiesloop/archive/2008/06/17/my-latest-work.aspx</id><published>2008-06-18T04:18:00Z</published><updated>2008-06-18T04:18:00Z</updated><content type="html">Sky Lynn Reed's 0th birthday is 5/15/2008 at 5:44pm, when she weighed 8 pounds, 0 ounces. A nice round binary number. Our first born! There are simply no words to describe the experience. We debated on whether we should have kids for a long time. After being married almost 5 years now, we finally decided to take the plunge. Now that she's here, and about 5 weeks old, we couldn't imagine our lives without her. Of course, being a programmer daddy should be fun. We'll just see how early it is possible...(&lt;a href="http://weblogs.asp.net/infinitiesloop/archive/2008/06/17/my-latest-work.aspx"&gt;read more&lt;/a&gt;)&lt;img src="http://weblogs.asp.net/aggbug.aspx?PostID=6288949" width="1" height="1"&gt;</content><author><name>InfinitiesLoop</name><uri>http://weblogs.asp.net/members/InfinitiesLoop.aspx</uri></author><category term="Musings" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/Musings/default.aspx" /><category term="Off Topic" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/Off+Topic/default.aspx" /></entry><entry><title>Flickering UI From the ASP.NET AJAX Toolkit TabContainer while in an UpdatePanel?</title><link rel="alternate" type="text/html" href="http://weblogs.asp.net/infinitiesloop/archive/2008/04/30/flickering-ui-from-the-asp-net-ajax-toolkit-tabcontainer-while-in-an-updatepanel.aspx" /><id>http://weblogs.asp.net/infinitiesloop/archive/2008/04/30/flickering-ui-from-the-asp-net-ajax-toolkit-tabcontainer-while-in-an-updatepanel.aspx</id><published>2008-04-30T18:57:00Z</published><updated>2008-04-30T18:57:00Z</updated><content type="html">UPDATE This issue is officially fixed in .NET 3.5 SP1. If you have applied the workaround in this blog post, you no longer need it. But the story of this bug is still rather interesting. UPDATE If you upgrade from Microsoft ASP.NET AJAX Extensions 1.0 to 3.5, and you have a TabContainer inside an update panel, like this: &amp;lt; asp : UpdatePanel ID = "UpdatePanel1" runat = "server" &amp;gt; &amp;lt; ContentTemplate &amp;gt; &amp;lt; act : TabContainer runat = "server" &amp;gt; &amp;lt; act : TabPanel runat = "server" &amp;gt;...(&lt;a href="http://weblogs.asp.net/infinitiesloop/archive/2008/04/30/flickering-ui-from-the-asp-net-ajax-toolkit-tabcontainer-while-in-an-updatepanel.aspx"&gt;read more&lt;/a&gt;)&lt;img src="http://weblogs.asp.net/aggbug.aspx?PostID=6145452" width="1" height="1"&gt;</content><author><name>InfinitiesLoop</name><uri>http://weblogs.asp.net/members/InfinitiesLoop.aspx</uri></author><category term=".NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/.NET/default.aspx" /><category term="ASP.NET" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/ASP.NET/default.aspx" /><category term="AJAX" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/AJAX/default.aspx" /><category term="JavaScript" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/JavaScript/default.aspx" /><category term="Script Loading" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/Script+Loading/default.aspx" /><category term="HTML" scheme="http://weblogs.asp.net/infinitiesloop/archive/tags/HTML/default.aspx" /></entry></feed>