CommandCell - Just want to see an image

7 posts, 1 answers
  1. Chris Kirkman
    Chris Kirkman avatar
    101 posts
    Member since:
    Apr 2010

    Posted 14 Dec 2017 Link to this post

    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?
  2.
  3. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr. avatar
    3282 posts

    Posted 15 Dec 2017 Link to this post

    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.
  5. Chris Kirkman
    Chris Kirkman avatar
    101 posts
    Member since:
    Apr 2010

    Posted 18 Dec 2017 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    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).
  7. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr. avatar
    3282 posts

    Posted 19 Dec 2017 Link to this post

    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.
  9. Chris Kirkman
    Chris Kirkman avatar
    101 posts
    Member since:
    Apr 2010

    Posted 19 Dec 2017 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    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.
  11. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr. avatar
    3282 posts

    Posted 19 Dec 2017 Link to this post

    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.
  13. Chris Kirkman
    Chris Kirkman avatar
    101 posts
    Member since:
    Apr 2010

    Posted 19 Dec 2017 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    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.
  14.
Back to Top