RadGrid Group Image

[Paul]

Hi,

Is it possible to put an image in the group header of a radgrid?
so the format

<Image> " Some Text " <count>

Cheers

Paul

[Shinu]

Hi Paul,

You can try the following code snippet to add an image in the GridGroupHeader.

CS:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridGroupHeaderItem)
        {
            GridGroupHeaderItem header = (GridGroupHeaderItem)e.Item;
            Image image = new Image();
            image.ID = "Image1";
            image.ImageUrl = "~/Image1.gif";
            header.DataCell.Controls.Add(image);

        }
    }

You can also refer the following help article to get details about customizing the GridGroupHeader.
Customizing GridGroupHeaderItem

Thanks
Shinu.

[Henrique Duarte]

Hi,

How can I add a image to group header keeping the group header text?

Regards,

Henrique

[Nikolay Rusev]

Hello Henrique Duarte,

You can try the code shown below

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridGroupHeaderItem)
    {
        GridGroupHeaderItem item = (GridGroupHeaderItem)e.Item;
        Image myImage = new Image();
        myImage.ImageUrl = "some image url";
        myImage.AlternateText = item.DataCell.Text;
        myImage.ToolTip = item.DataCell.Text;
        item.DataCell.Controls.Add(myImage);
        item.DataCell.Controls.Add(new LiteralControl(item.DataCell.Text));
    }

}

Sincerely yours,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Aryeh]

How about adding a different image for each group? The group has an html value in its text that has an image

[Vasko]

Hello Aryeh,

You can check for the current group's text and dynamically add images based on it: 

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridGroupHeaderItem)
    {
        GridGroupHeaderItem item = (GridGroupHeaderItem)e.Item;
        string groupCellText = item.DataCell.Text;

        Image myImage = new Image();

        if (groupCellText.Contains("Freight"))
        {
            myImage.ImageUrl = "home.png";
            myImage.AlternateText = groupCellText;
            myImage.ToolTip = groupCellText;
        }
        else if (groupCellText.Contains("OrderID"))
        {
            myImage.ImageUrl = "connection.png";
            myImage.AlternateText = groupCellText;
            myImage.ToolTip = groupCellText;
        }

        item.DataCell.Controls.Add(myImage);
        item.DataCellControls.Add(new LiteralControl(groupCellText));
    }
}


protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = OrdersTable();
}
private DataTable OrdersTable()
{
    DataTable dt = new DataTable();

    dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
    dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
    dt.Columns.Add(new DataColumn("Freight", typeof(double)));
    dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
    dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));

    dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };

    for (int i = 0; i < 10; i++)
    {
        int index = i + 1;

        DataRow row = dt.NewRow();

        row["OrderID"] = index;
        row["OrderDate"] = DateTime.Now.Date.AddDays(index);
        row["Freight"] = index * 0.01;
        row["ShipName"] = "Name " + index;
        row["ShipCountry"] = "Country " + index;

        dt.Rows.Add(row);
    }

    return dt;
}

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" GroupingEnabled="true" ShowGroupPanel="True" 
    OnItemDataBound="RadGrid1_ItemDataBound" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID" CommandItemDisplay="Top">
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                SortExpression="OrderDate" UniqueName="OrderDate">
            </telerik:GridDateTimeColumn>
            <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                FilterControlAltText="Filter Freight column" HeaderText="Freight"
                SortExpression="Freight" UniqueName="Freight">
            </telerik:GridNumericColumn>
            <telerik:GridBoundColumn DataField="ShipName"
                FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                SortExpression="ShipName" UniqueName="ShipName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCountry"
                FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                SortExpression="ShipCountry" UniqueName="ShipCountry">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings AllowDragToGroup="true" />
</telerik:RadGrid>

Regards,
Author nickname
Progress Telerik