Grid Header Image Alignment

[Rachel]

When I add an image to a header cell in my grid and set the TextImageRelation to ImageBeforeText, the cell displays with a big gap between the image and the text.  Why is this?  I want my image to display right next to the text, like this: [image] [header text].  What I get is more like this: [image]               [header text].  How can I fix to get a proper image/text display?

Thanks,

Rachel

[Svett]

Hello Rachel,

This happens because of our layout system and TextAlignment and ImageAlignment properties which are set to ContentAlignment.MiddleCenter. It positions the text and image depending on the properties and the size of the header cell element. So you can set the corresponding properties to ContentAlignment.MiddleLeft. Hence, the image and the text will be glued. You can use the following code snippet as a sample on how you can achieve it in the ViewCellFormatting event:

private void radGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
    if (e.CellElement is GridHeaderCellElement)
    {
        e.CellElement.Image = this.imageList1.Images[0];
        e.CellElement.TextImageRelation = TextImageRelation.ImageBeforeText;
        e.CellElement.TextAlignment = ContentAlignment.MiddleLeft;
        e.CellElement.ImageAlignment = ContentAlignment.MiddleLeft;
    }
}

If you need further assistance feel free to write us back.

All the best,
Svett
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Rachel]

Thanks Svett, but the left align columns were already working, and this is for columns where I want the header centered.  Can I get image and text together in the center of the header?

Thanks again,

Rachel

[Svett]

Hello Rachel,

Yes, you can center the image and text together by setting the ImageLayout property to ImageLayout.None. You can use this modified version of my previous source code snippet:

private void radGridView_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
    if (e.CellElement is GridHeaderCellElement)
    {
        e.CellElement.Image = this.imageList1.Images[0];
        e.CellElement.TextImageRelation = TextImageRelation.ImageBeforeText;
        e.CellElement.ImageAlignment = ContentAlignment.MiddleRight;
        e.CellElement.TextAlignment = ContentAlignment.MiddleLeft;
        e.CellElement.ImageLayout = ImageLayout.None;
    }
}

If you have another questions feel free to write us back.

Greetings,
Svett
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Rachel]

Thank you!  It works perfectly.

Rachel

[Alcatraz]

Hi,

Extending Rachael's question, can we add a click event to the image added inside the header.  My requirement is I will have a help icon "?" placed in the grid header and when the user clicks the same, I need to show up the help window or a message box containing help.

Thanks
KrishnanN

[Svett]

Hello Alcatraz,

You can achieve that by creating a custom cell. Then you can determine whether the mouse cursor is over the image:

public class MyGridHeaderCellElement : GridHeaderCellElement
{
    public MyGridHeaderCellElement(GridViewColumn col, GridRowElement row)
        : base(col, row)
    {

    }

    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(GridHeaderCellElement);
        }
    }

    protected override void OnMouseDown(MouseEventArgs e)
    {
        Point point = this.PointFromControl(e.Location);
        bool isOverImage = this.layoutManagerPart.LeftPart.Bounds.Contains(point);

        if (isOverImage)
        {
            MessageBox.Show("Hello, Alcatraz");
        }

        base.OnMouseDown(e);
    }
}

Also, you have to replace the default cell with its extended equivalent. You need to subscribe to CreateCell event:

private void radGridView1_CreateCell(object sender, GridViewCreateCellEventArgs e)
{
    if (e.CellType == typeof(GridHeaderCellElement))
    {
        e.CellType = typeof(MyGridHeaderCellElement);
    }
}

I hope this helps.

Greetings,
Svett
the Telerik team