ASP.NET CMS .NET content management system

KB Article

Home > Support > Knowledge Base > KB Article

Rendering RadioButtonList - ID#1073

Rating: Not rated
Last Modified: 8/5/2008

Related categories: Workarounds;

Article information
Article relates to	Sitefinity 3.1 or later
Created by	Penka Ivanova
Last modified by	Rebecca

Problem
Radio button lists render as unordered lists in Sitefinity

Background
This is because we have an adapter for RadioButtonList control that renders it as an unordered list. You cannot remove the adapter as this will break a great part of Sitefinity built-in functionality.

The ASP.NET RadioButtonList renders as a <table> element and that is the reason why we implemented an adapter that adapts the control to generate CSS friendly markup. Tables should be used only in extreme cases where there is no other viable alternative.

Here are some of the reasons why CSS-based layouts are superior to Table-based layouts in Website design:
1. Faster page loading
Table-based layouts are notorious for having an additional amount of junk markup and when comparing the load time of the table-based layout versus the load time of the CSS-based layout, the table layout takes 2 - 4 times longer for the page to load.

2. Redesigns are more efficient
Redesigning a website using tables is significantly slower than redesigning a website using CSS. Table-based designs mix visual data with content. On the other hand, CSS-based designs separate visual data from content. By separating the visual data from the content, a web designer is able to easily make changes to the appearance of a single page (or multiple pages) by simply editing the external CSS style sheet.

3. Visual consistency maintained throughout website(s)
When using external CSS style sheets, it is much easier to maintain visual consistency throughout a website. Rather than having to edit the code of every page, adjusting column widths, column heights, spacer gifs, CSS gives the designer control over elements that are used throughout a website, on a few pages, or on a single page.

4. Increased Accessibility
There are many reasons why using CSS is advantageous over using tables:

Separating content from visual information
Universal cross-browser style declarations
Placement of interactive elements
Multi-medium support (web browsers, screen readers, personal data assistants)

5. Quick website-wide updates

6. Easier to maintain

7. Increased usability by encouraging liquid design

8. More complex layouts and designs
From a web designer’s perspective, the fact that CSS-based layouts have the ability to be much more complex than table-based layouts should be enough of a reason to use CSS instead of tables when designing a website.

9. Extreme flexibility in positioning

Solution
If you want to use the standard ASP.NET functionality, you need to create a class in ~/App_Code that inherits RadioButtonList like this:

    
            using System; 
        
            using System.Data; 
        
            using System.Configuration; 
        
            using System.Web; 
        
            using System.Web.Security; 
        
            using System.Web.UI; 
        
            using System.Web.UI.HtmlControls; 
        
            using System.Web.UI.WebControls; 
        
            using System.Web.UI.WebControls.WebParts; 
        
            /// <summary> 
        
            /// Summary description for CustomRadioButtonList 
        
            /// </summary> 
        
            namespace System.Web.UI.WebControls 
        
            { 
        
                public class CustomRadioButtonList : RadioButtonList 
        
                { 
        
                } 
        
            }

Then, you should add the following row in controlAdapters section of ~/App_Browsers/BrowserFile.browser file:

    
            <adapter controlType="System.Web.UI.WebControls.CustomRadioButtonList" adapterType="" />

Finally, use your code CustomRadioButtonList control instead of the ASP.NET RadioButtonList:

    
            <%@ Register Assembly="App_Code" Namespace="System.Web.UI.WebControls" TagPrefix="asp" %> 
        
            ... 
        
                <form id="form1" runat="server"> 
        
            ... 
        
                            <asp:CustomRadioButtonList ID="CustomRadioButtonList1" runat="server"> 
        
                                <asp:ListItem Text="ListItem 1" Value="0"></asp:ListItem> 
        
                                <asp:ListItem Text="ListItem 2" Value="1"></asp:ListItem> 
        
                            </asp:CustomRadioButtonList> 
        
            ...

Article Comments

There are no comments yet.

Please Sign In to rate this article or to add it to your favorites.

Print Send to a Friend

Sitefinity ASP.NET CMS - Content Management System

KB Article