This is a migrated thread and some comments may be shown as answers.

How To?: Adding an Image to a Command Column

5 Answers 192 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Jonathan
Top achievements
Rank 1
Jonathan asked on 02 Jun 2008, 03:42 PM
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

5 Answers, 1 is accepted

Sort by
0
Kiril
Telerik team
answered on 03 Jun 2008, 01:00 PM
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
0
Jon
Top achievements
Rank 1
answered on 01 Oct 2009, 11:49 PM
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;  
    }  
}   

 

0
Jack
Telerik team
answered on 02 Oct 2009, 09:11 AM
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.
0
Jon
Top achievements
Rank 1
answered on 11 Nov 2009, 09:03 PM
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.
0
Jack
Telerik team
answered on 12 Nov 2009, 05:18 PM
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.
Tags
GridView
Asked by
Jonathan
Top achievements
Rank 1
Answers by
Kiril
Telerik team
Jon
Top achievements
Rank 1
Jack
Telerik team
Share this question
or