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

CommandCell - Just want to see an image

6 Answers 30 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Chris Kirkman
Top achievements
Rank 1
Chris Kirkman asked on 14 Dec 2017, 08:29 PM
I want the button in the command cell to appear as an image; however, still be able to click as if it's a button.  Basically get rid of the border and the background of the button.  How to do this?

6 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 15 Dec 2017, 07:23 AM
Hello, Chris,

Thank you for writing.  

In order to display just an image in the GridViewCommandColumn you can use the following code snippet: 
GridViewCommandColumn commandColumn = new GridViewCommandColumn("CommandColumn");
commandColumn.UseDefaultText = false;
commandColumn.Image = Properties.Resources.about_paint;
radGridView1.MasterTemplate.Columns.Add(commandColumn);



I hope this information helps. Should you have further questions I would be glad to help.
 
Regards,
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Chris Kirkman
Top achievements
Rank 1
answered on 18 Dec 2017, 02:36 PM
Not quite.  I need the image, but want to hide the rest of the button.  I.e. the border around the button and the background color (would like that to be transparent).
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 19 Dec 2017, 06:58 AM
Hello, Chris, 

Thank you for writing back. 

You can hide the fill and border for the button element in order to achieve your goal. Here is a sample code snippet: 
public RadForm1()
{
    InitializeComponent();
 
    this.radGridView1.CellFormatting+=radGridView1_CellFormatting;
}
 
private void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
    GridCommandCellElement commandCell = e.CellElement as GridCommandCellElement;
    if (commandCell!=null)
    {
        commandCell.CommandButton.ButtonFillElement.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        commandCell.CommandButton.BorderElement.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
    }
}



I hope this information helps. If you have any additional questions, please let me know. 

 Regards,
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Chris Kirkman
Top achievements
Rank 1
answered on 19 Dec 2017, 01:27 PM
That is excellent.  That resolved the problem.  I should have asked previously, but is there a way to make the pointer appear as a hand when hovering over this button/image?  That way it would be obvious that it is a clickable element.
0
Accepted
Dess | Tech Support Engineer, Principal
Telerik team
answered on 19 Dec 2017, 02:06 PM
Hello, Chris, 

Thank you for writing back. 

In order to change the cursor when you hover the button element it is necessary to handle the MouseMove event and detect the element under the mouse. Here is a sample code snippet:
private void radGridView1_MouseMove(object sender, MouseEventArgs e)
{
    var elementUnderMouse = this.radGridView1.ElementTree.GetElementAtPoint(e.Location);
    if (elementUnderMouse is RadButtonElement || elementUnderMouse is GridCommandCellElement)
    {
        this.radGridView1.Cursor = Cursors.Hand;
    }
    else if (this.radGridView1.Cursor == Cursors.Hand)
    {
        this.radGridView1.Cursor = Cursors.Default;
    }
}

I hope this information helps. If you have any additional questions, please let me know. 

 Regards,
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Chris Kirkman
Top achievements
Rank 1
answered on 19 Dec 2017, 02:38 PM
Thanks for the incredibly fast response.  Yes, this resolved my issue/question.  This thread might be worth placing in the general forum because I imagine it would be very helpful to many customers.  Thanks again.
Tags
GridView
Asked by
Chris Kirkman
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Chris Kirkman
Top achievements
Rank 1
Share this question
or