How To?: Adding an Image to a Command Column

[Jonathan]

Hi there,

I was hoping you could shed some light on how I could add an image to a Command Column.  Currently my command column contains a button... but I would like it to contain a nice little edit image instead.

Any ideas, or sample code?

Thanks for you help.

Jon

[Kiril]

Hello Jonathan,

Thank you for writing.

You can set an image to a button in the command column by setting the Image property of the RadButtonElement, which is a child of the CellElement in the GridViewCommandColumn. Subscribe to the CellFormattingEvent as shown below:

radGridView1.CellFormatting +=

new CellFormattingEventHandler(radGridView1_CellFormatting);

Load the image in a variable outside the handler of the event. This will improve performance.

Include the code below in the handler:

        void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            if (e.CellElement is GridCommandCellElement)
            {
                RadButtonElement bte = (RadButtonElement)e.CellElement.Children[0];
                if (bte.Image == null)
                {
                    bte.TextImageRelation = TextImageRelation.Overlay;
                    bte.DisplayStyle = DisplayStyle.Image;
                    bte.Image = img;
                }
            }
        }

I hope this helps. If you have any other questions, please contact me.

Kind regards,
Kiril
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Jon]

This is working for me, except for when the user clicks add new row, in that case it is not putting in the image. 

if (e.CellElement is GridCommandCellElement)
{
    var bte = (RadButtonElement)e.CellElement.Children[0];
    if (bte.Image == null)
    {
        bte.TextImageRelation = TextImageRelation.Overlay;
        bte.DisplayStyle = DisplayStyle.Image;
        bte.ImageAlignment = ContentAlignment.MiddleCenter;
        bte.Image = Properties.Resources.Calculate__2;
        bte.AutoSize = true;
    }
}

 

[Jack]

Hi Jon Masters,

CellFormatting fires only for regular data rows. For system rows like "add new row" and table header row, you should handle ViewCellFormatting. I hope that helps.

Sincerely yours,
Jack
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jon]

if (e.CellElement is GridCommandCellElement)
            {
                var bte = (RadButtonElement)e.CellElement.Children[0];
                bte.ButtonFillElement.BackColor = Color.Transparent;
                bte.ButtonFillElement.BackColor2 = Color.Transparent;
                bte.ButtonFillElement.BackColor3 = Color.Transparent;
                bte.ButtonFillElement.BackColor4 = Color.Transparent;
                bte.BorderElement.Width = 0;
                if (bte.Image == null)
                {
                    bte.TextImageRelation = TextImageRelation.Overlay;
                    bte.DisplayStyle = DisplayStyle.Image;
                    bte.ImageAlignment = ContentAlignment.MiddleCenter;
                    bte.Image = Properties.Resources.Calculate16;
                    bte.AutoSize = true;
                }
            }

I ended up adding the lines to suppress the backcolor and the border so that the image floats, instead of inside a button.

[Jack]

Hi Jon Masters, I am glad that you have found a solution and thank you for sharing it with the community - I have updated your Telerik Points.

 
Sincerely yours,
Jack
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.