How Do I Add Colgroup Tag to ASP:Datagrid Control?

Question

How do I add a colgroup tag to the datagrid control so that I can style each column using css?

Answer 1

I thought this was addressed in .NET 3.5, but I can't find any references. Anyways, here is a hand-rolled server control that allows you to specify colgroup...

public class ColGroupGridView : GridView
{
    private ColGroup _ColGroup = null;
    private ITemplate _ColGroupTemplate = null;

    [TemplateContainer(typeof(ColGroup))]
    public virtual ITemplate ColGroupTemplate
    {
        get { return _ColGroupTemplate; }
        set { _ColGroupTemplate = value; }
    }

    protected override void CreateChildControls()
    {
        base.CreateChildControls();
        _ColGroup = new ColGroup();
        ColGroupTemplate.InstantiateIn(_ColGroup);
    }

    protected override void Render(HtmlTextWriter writer)
    {
        // Get the base class's output
        StringWriter sw = new StringWriter();
        HtmlTextWriter htw = new HtmlTextWriter(sw);
        base.Render(htw);
        string output = sw.ToString();
        htw.Close();
        sw.Close();

        // Insert a <COLGROUP> element into the output
        int pos = output.IndexOf("<tr");

        if (pos != -1 && _ColGroup != null)
        {
            sw = new StringWriter();
            htw = new HtmlTextWriter(sw);
            _ColGroup.RenderPrivate(htw);
            output = output.Insert(pos, sw.ToString());
            htw.Close();
            sw.Close();
        }

        // Output the modified markup
        writer.Write(output);
    }
}

internal class ColGroup : WebControl, INamingContainer
{
    internal void RenderPrivate(HtmlTextWriter writer)
    {
        writer.Write("<colgroup>");
        base.RenderContents(writer);
        writer.Write("</colgroup>");
    }
}

Use it like this...

<custom:ColGroupGridView ... runat="server">
    <ColGroupTemplate>
        <col class="itemid" />
        <col class="cover-image" />
        <col class="title" />
        <col class="number" />
        <col class="year" />
        <col class="rating" />
        <col class="cgc-rating" />
        <col class="description" />
    </ColGroupTemplate>
    <!-- Rest of stuff here... -->
</custom:ColGroupGridView>

Source: Jeff Prosise's Blog

Answer 2

I've searched for some days for a solution on how to add ColGroup template to a GridView. Using the answer given by Josh uphere, and a couple of days of reading about derived objects, especially GridView, I thought that an updated and working solution would help people around.

Imports System.ComponentModel
Imports System.Web.UI
Imports Microsoft.VisualBasic
Imports System.IO

Namespace CustomControls
<ToolboxData("<{0}:GridViewColGroup runat=server></{0}:GridViewColGroup>")> _
<System.Security.Permissions.PermissionSetAttribute(System.Security.Permissions.SecurityAction.Demand, Name:="FullTrust"), _
ParseChildren(True)> _
Public Class GridViewColGroup
    Inherits GridView
    Implements INamingContainer

    Private _ColGroup As ColGroup = Nothing
    Private _ColGroupTemplate As ITemplate = Nothing

    <Browsable(False), _
    Description("The ColGroup template."), _
    TemplateContainer(GetType(ColGroup)), _
    PersistenceMode(PersistenceMode.InnerProperty)> _
    Public Overridable Property ColGroupTemplate() As ITemplate
        Get
            Return _ColGroupTemplate
        End Get
        Set(ByVal value As ITemplate)
            _ColGroupTemplate = value
        End Set
    End Property

    <Browsable(False), _
    DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)> _
    Public Property ColGroup() As ColGroup
        Get
            Me.EnsureChildControls()
            Return _ColGroup
        End Get
        Set(ByVal value As ColGroup)
            _ColGroup = value
        End Set
    End Property

    Protected Overrides Sub CreateChildControls()
        MyBase.CreateChildControls()

        _ColGroup = New ColGroup()

        If Not ColGroupTemplate Is Nothing Then
            ColGroupTemplate.InstantiateIn(_ColGroup)
        End If

        Me.Controls.Add(_ColGroup)
    End Sub

    Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
        EnsureChildControls()
        ' Get the base class's output
        Dim sw As New StringWriter()
        Dim htw As New HtmlTextWriter(sw)
        MyBase.Render(htw)
        Dim output As String = sw.ToString()
        htw.Close()
        sw.Close()

        ' Insert a <COLGROUP> element into the output
        Dim pos As Integer = output.IndexOf("<tr")

        If pos <> -1 AndAlso _ColGroup IsNot Nothing Then
            sw = New StringWriter()
            htw = New HtmlTextWriter(sw)
            _ColGroup.RenderPrivate(htw)
            output = output.Insert(pos, sw.ToString())
            htw.Close()
            sw.Close()
        End If

        ' Output the modified markup
        writer.Write(output)
    End Sub
End Class


<ToolboxItem(False)> _
Public Class ColGroup
    Inherits WebControl
    Implements INamingContainer

    Friend Sub RenderPrivate(ByVal writer As HtmlTextWriter)
        writer.Write("<colgroup>")
        MyBase.RenderContents(writer)
        writer.Write("</colgroup>")
    End Sub
End Class

End Namespace

This really offers you the opportunity to use it as Josh sais:

<aspcust:GridViewColGroup runat="server" ID="gridName">
    <ColGroupTemplate>
        <col class="some_class_1" />
        <col class="some_class_2" />
        ...
        <col class="some_class_n" />
    </ColGroupTemplate>
    <Columns>
        ...
    </Columns>
</aspcust:GridViewColGroup>

if you wrap the derived class into a namespace and register it in the web.config as follows:

<configuration>
    <system.web>
        <pages>
            <controls>
                <add tagPrefix="aspcust" namespace="CustomControls" />
            </controls >
        </pages >
    </system.web>
</configuration>

Programatically, you can add a new column into ColGroup at, let's say, PreRender:

Protected Sub gridName_PreRender(ByVal sender As Object, ByVal e As System.EventArgs)
    Dim grd As CustomControls.GridViewColGroup = sender
    Dim wctrl As New WebControl(HtmlTextWriterTag.Col)
    wctrl.CssClass = "some_class_m"
    grd.ColGroup.Controls.Add(wctrl)
End Sub

Cheers.