Create a Windows-style GroupBox in ASP.NET

This one took me a little searching but it actually extraordinarily simple to do. In many Windows desktop applications, similar controls are grouped together under a titled category similar to this:

standard windows GroupBox control example



To create this look, there is a really simple way that doesn't require any fancy javascript or CSS positioning. You just use the asp:Panel control. The HTML/ASPX code looks like this:

<asp:panel ID="pnlGroupBox" runat="server" GroupingText="My Group Box Name&nbsp;">
    <table border="0" cellpadding="5" cellspacing="0">
        <tr>
            <td>
                This is the text or other controls that are in my group box.
                <br />
                <br />
                You could put a checkbox <asp:CheckBox ID="cbx1" runat="server" /> or a radio button <asp:RadioButton ID="rdo1" runat="server" />
                or any other .NET control here.
            </td>
        </tr>
    </table>
</asp:panel>

 
When you add this code to your ASPX page and run it, you should see something similar to this:

web GroupBox control example

This has been tested and works on IE 6.0 or higher, Safari 2.0 or higher, and Firefox 2.0 or higher.

Not Working

I can't figure out what I'm doing wrong. This is the effect I want, but I simply cannot get your example to work in my page. There isn't a border, and setting the panel border style doesn't do the trick... suggestions?

It works now

A Jquery css file was setting the field set border to 0, cancelling out the effect.

hyperlink for panel groupingtext

is it possible to add hyperlink to panel groupingtext

Group Box Query

Post was helpful.

NICE FIND

Just what i was looking for...
thanks

Grouping Text With Css

Hi,
I need to apply the css for Grouping text property in Panel .... i am not getting code for that pl Help me ...
Thanks in advance

You can try with the FIELDSET

You can try with the FIELDSET / LEGEND html elements, with some CSS work it can be made to look like the windows group and you can also use CSS on the legend text