How can I add Caption/Title to GridView? : The Official Microsoft ASP.NET Forums

Reply

jcasp

Star

11540 Points

How can I add Caption/Title to GridView?

Feb 24, 2006 05:26 PM|LINK

Have you ever wanted to add a Title or Caption to your GridView (i.e. at the top of your GridView control)? Some of you may already be aware of the GridView.Caption property, but entering your caption text displays a simple text rather than being able to define styles like other GridView elements. Well, I think there is a way to get around this limitation.

While trying to answer one of the post about GridView.Caption property, I realized that you can assign a full HTML rather than a simple text. This means that you can be creative in designing what your caption looks like. Following simple example illustrates using some HTML tags to define the border and background color to the caption area:

<asp:GridView ID="GridView1" runat="server" ...

Caption='<table border="1" width="100%" cellpadding="0" cellspacing="0" bgcolor="yellow"><tr><td>Grid Heading</td></tr></table>'

CaptionAlign="Top">

What this does is to insert a Table that fills the Caption region (width="100%" ensures same width as that of the GridView) while using Yellow background color. What's more, it opens the door to adding captions that are limited only by your imagination. Happy coding.

Moved by mbanavige on Feb 03, 2008 01:50 AM

Reply

ronen82

Member

15 Points

3 Posts

Re: How can I add Caption/Title to GridView?

Apr 02, 2006 09:49 PM|LINK

this is a very nice thing. thanks

also made me realize i had a blue background set, even though i'm using a background image, since i applied bgcolor=transperant on the caption :)

Reply

Manotas

Member

540 Points

131 Posts

Re: How can I add Caption/Title to GridView?

Sep 21, 2006 02:27 PM|LINK

Tht's great...
I'm using it, but instead of formatting the attributtes directly I'm using an CssStyle and works wonderful...

Thanks,

Reply

pradeepkonda

Member

47 Points

44 Posts

Re: How can I add Caption/Title to GridView?

Oct 05, 2006 03:50 AM|LINK

how can we add caption using CssStyle?

Reply

Manotas

Member

540 Points

131 Posts

Re: How can I add Caption/Title to GridView?

Oct 05, 2006 08:52 AM|LINK

For example, creating the table inside the caption as sugestted by JCasp, but instead of defining the background color, image or the table borders in each time you set a title for your grid, the class attibute can be set in the HTML code as in the code below :

<asp:GridView ID="GridView1" runat="server" ... caption='<table width="100%" class="TestCssStyle"><tr><td class="text_Title">Grid Heading</td></tr></table>'>

And in the CSS file, the TestCssStyle could be whatever you want:

.testCssStyle
{
color: #1f5ca9;
background-color: #c5d4e6;
table-layout: auto;
border-collapse: separate;
border-right: gray thin solid;
border-top: gray thin solid;
border-left: gray thin solid;
border-bottom: gray thin solid;
}

Hope it helps....

Reply

Zozo

Member

12 Points

9 Posts

Re: How can I add Caption/Title to GridView?

May 27, 2007 10:14 AM|LINK

I found a slightly better way to do just that using CSS

Instead of adding code in the Caption, leave the Caption to be Caption="My Title".

Then, if the gridview CssClass is "gv" than by setting the ".gv caption" in your stylesheet you can manipulate the caption as you wish.

.gv caption
{
text-align:left;
font-weight:bold;
font-size:larger;
padding: 2px;
background-color: Red;
}

Note that you still need to use the CaptionAlign="WHATEVER" to tell the browser where to place the caption in relation to the gridview.

Zozo

Edited by Zozo on May 27, 2007 02:14 PM

Reply

CharlesF

Participant

1745 Points

330 Posts

Re: How can I add Caption/Title to GridView?

May 27, 2007 05:11 PM|LINK

I thought I'd share my solution, it's just an alternative approach to the same problem. In my solution, I created a custom control that inherits from the GridView. I just added a Caption Template to the original control. You can edit the Caption template for your gridview from the Visual Studio designer instead of having to switch to source view to add a formatted HTML caption manually. Another nice thing about this is that you can simply drag in other controls into your Caption template just as if it were any other gridview row template.

Here's the source code:

Imports Microsoft.VisualBasic
Imports System
Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.Design


Namespace YourCompanyName.WebControls


    <Designer(GetType(CaptionTemplateDesigner))> _
    <ToolboxData("<{0}:GridViewWithCaption runat=server></{0}:GridViewWithCaption>")> _
    <ParseChildren(True)> _
    Public Class GridViewWithCaption
        Inherits System.Web.UI.WebControls.GridView


        Private _captionTemplate As ITemplate
        Private _totalColumns As Integer


        Public Sub New()
        End Sub


        <Browsable(False)> _
        <PersistenceMode(PersistenceMode.InnerProperty)> _
        <TemplateContainer(GetType(CaptionContainer))> _
        Public Property CaptionTemplate() As ITemplate
            Get
                Return _captionTemplate
            End Get
            Set(ByVal value As ITemplate)
                _captionTemplate = value
            End Set
        End Property


        Protected Overloads Overrides Sub PrepareControlHierarchy()
            MyBase.PrepareControlHierarchy()
            Dim t As Table = CType(Controls(0), Table)
            If Not (_captionTemplate Is Nothing) AndAlso String.IsNullOrEmpty(Caption) Then
                Dim row As TableRow = New TableRow
                t.Rows.AddAt(0, row)
                Dim cell As TableCell = New TableCell
                cell.ColumnSpan = _totalColumns
                row.Cells.Add(cell)
                Dim cc As CaptionContainer = New CaptionContainer(Me)
                _captionTemplate.InstantiateIn(cc)
                cell.Controls.Add(cc)
                cell.DataBind()
            End If
            Return
        End Sub


        Protected Overloads Overrides Function CreateColumns(ByVal dataSource As PagedDataSource, ByVal useDataSource As Boolean) As ICollection
            Dim coll As ICollection = MyBase.CreateColumns(dataSource, useDataSource)
            _totalColumns = coll.Count
            Return coll
        End Function
    End Class


    Public Class CaptionContainer
        Inherits WebControl
        Implements INamingContainer
        Private _grid As GridViewWithCaption


        Public Sub New(ByVal g As GridViewWithCaption)
            _grid = g
        End Sub


        Public ReadOnly Property GridViewWithCaption() As GridViewWithCaption
            Get
                Return _grid
            End Get
        End Property


    End Class


    ' Designer for the TemplateGroupsSample class
    Public Class CaptionTemplateDesigner
        Inherits System.Web.UI.Design.WebControls.GridViewDesigner
        'Inherits System.Web.UI.Design.ControlDesigner

        Private o_TemplateGroups As TemplateGroupCollection = Nothing


        Public Overrides Sub Initialize(ByVal Component As IComponent)
            ' Initialize the base
            MyBase.Initialize(Component)
            ' Turn on template editing
            SetViewFlags(ViewFlags.TemplateEditing, True)
        End Sub


        Public Overrides ReadOnly Property TemplateGroups() As TemplateGroupCollection
            Get


                If IsNothing(o_TemplateGroups) Then
                    o_TemplateGroups = MyBase.TemplateGroups


                    Dim o_TemplateGroup As TemplateGroup
                    Dim o_TemplateDefinition As TemplateDefinition
                    Dim ctl As GridViewWithCaption = CType(Component, GridViewWithCaption)


                    o_TemplateGroup = New TemplateGroup("Caption Template")
                    o_TemplateDefinition = New TemplateDefinition(Me, "Caption Template", ctl, "CaptionTemplate", False)
                    o_TemplateGroup.AddTemplateDefinition(o_TemplateDefinition)
                    o_TemplateGroups.Add(o_TemplateGroup)


                End If


                Return o_TemplateGroups


            End Get


        End Property


    End Class




End Namespace

/bb|[^b]{2}/ that is the question.