Currently, there is no property that handles your requirement, adding anchor – <a …> tag – to the group header of WebGrid.

The scenario can be achieved through client-side (JavaScript) script by accessing the cell element of group header and set its innerHTML property with the desired value, in this case is adding the anchor tag.

I create a simple sample of WebGrid. The grid is bind to Employees table of Northwind.mdb and grouped by Country and Title field.

...
    <RootTable DataKeyField="EmployeeID">
    <GroupedColumns>
        <ISWebGrid:WebGridGroup ColumnMember="Country" GroupMode="Expanded" />
        <ISWebGrid:WebGridGroup ColumnMember="Title" GroupMode="Expanded" />
    </GroupedColumns>
    ...

A script that is used to set a link on the root group header is added into the page.

function SetLink() {
    // get WebGrid's object
    var WebGrid1 = ISGetObject("WebGrid1");

    // get the RootTable object of WebGrid
    var table = WebGrid1.GetRootTable();

    // obtains the collection of the GroupRows
    var groupRows = table.GetGroupRows();

    // iterate through groupRows
    for (var i = 0; i < groupRows.length; i++) {
        if (groupRows[i].GroupRowText == "UK")
            groupRows[i].GetElement().childNodes[1].innerHTML = "<a href='http://maps.google.co.uk'" +
                "target='_blank'>" + groupRows[i].GroupRowText + "</a>";
        if (groupRows[i].GroupRowText == "USA")
            groupRows[i].GetElement().childNodes[1].innerHTML = "<a href='http://maps.google.com'" +
                "target='_blank'>" + groupRows[i].GroupRowText + "</a>";
    }

    return true;
}

If the GroupRowText equals to “UK” then add a link to UK google maps and so does if the GroupRowText equals to “USA”.

I enclosed the sample as attachment. Please download and test the sample on your end and let us know whether it helps or not.

Thank you for your reply.

But we can not do this on Client side  due to security reason. We need to encrypt some values in the URL.

Thanks!

David

Please carefully follow the steps below.

1. Set the column type of “Country” column to “Custom”

<ISWebGrid:WebGridColumn Caption="Country" DataMember="Country" Name="Country" Width="100px"
    ColumnType="Custom">
</ISWebGrid:WebGridColumn>

2. Utilize the OnInitializeRow server-side event of WebGrid as shown in the sample snippet code below.

protected void WebGrid1_InitializeRow(object sender, ISNet.WebUI.WebGrid.RowEventArgs e)
{
    string str = null;

    if (e.Row.Type == RowType.GroupHeader)
    {
        if (e.Row.Cells[0].Text == "UK")
        {
            str = e.Row.Cells[0].Text;
            e.Row.Cells[0].Value = "<a href='http://maps.google.co.uk'" +
            "target='_blank'>" + str + "</a>";
        }
        if (e.Row.Cells[0].Text == "USA")
        {
            str = e.Row.Cells[0].Text;
            e.Row.Cells[0].Text = "<a href='http://maps.google.com'" +
            "target='_blank'>" + str + "</a>";
        }
    }
}

The snippet code will do exactly the same as the “SetLink” JavaScript function in my previous post.

Hope this helps.

 Hi,Yudi ,

Can you explain why it must use step one("Set the column type of “Country” column to “Custom”)?

I just use step two,it seems work fine.

Hello Frank,

I’m testing this scenario using WebGrid 7.0 build 429 and WebUI.NET Framework 3.0 build 770. In my test page, I need to do step #1 – set ColumnType property to “Custom”, because by default the ColumnType property is set to “Text”. If the ColumnType is “Text”, the hyperlink tag in the group header will be treated as literal text.

ColumnType=”Text” means that cells that belong to a column with this setting will display only text.

Hope this helps.