Resize Images in GridCommandCellElement

[Richard]

I am trying to use an image on the buttons in GridCommandCellElement columns. How do I Zoom the image to fit the cell?

[Emanuel Varga]

Hello Richard,

In order to access the CommandButton inside the GridCommandCellElement you have to register for the CellFormatting event, and to achieve the desired functionality you can do the following:

void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
    GridViewDataColumn column = e.CellElement.ColumnInfo as GridViewDataColumn;
    if (column != null && column.Name == "Command")
    {
        GridCommandCellElement cell = e.CellElement as GridCommandCellElement;
        if (cell != null)
        {
            //To Set the image you can use:
            cell.CommandButton.Image = Properties.Resources.calendar;
            //or this:
            cell.CommandButton.ImagePrimitive.Image = Properties.Resources.calendar;

            //Set the Scaling to SizeToFit:
            cell.CommandButton.ImagePrimitive.ImageScaling = Telerik.WinControls.Enumerations.ImageScaling.SizeToFit;
        }
    }
}

Hope this helps, if you have any other questions or comments, please let me know,

Best Regards,
Emanuel Varga

[Svett]

Hello Richard,

I think that the better approach is to stretch the image vertically and horizontally by setting the corresponding properties in the CellFormatting event. You can use the following code snippet based on the Emauel's code snippet:

private void Grid_CellFormatting(object sender, CellFormattingEventArgs e)
{
    GridViewDataColumn column = e.CellElement.ColumnInfo as GridViewDataColumn;
    if (column != null && column.Name == "Command")
    {
        GridCommandCellElement cell = e.CellElement as GridCommandCellElement;
        if (cell != null)
        {
            //To Set the image you can use:
            cell.CommandButton.Image = Properties.Resources.background;
            //or this:
            cell.CommandButton.ImagePrimitive.Image = Properties.Resources.background;

            //Set the Scaling to SizeToFit:
            cell.CommandButton.ImagePrimitive.StretchHorizontally = true;
            cell.CommandButton.ImagePrimitive.StretchHorizontally = true;
        }
    }
}

I hope this helps.

Regards,
Svett
the Telerik team

[Emanuel Varga]

Hello Svett, Richard,

That stretching of an image would look extremely ugly, at least in my point of view. One of the biggest advantages that Telerik Controls has to offer over that of the competition is a stunning UI (and also great performance) so why would you destroy all of that by stretching images in a column?

I guess it's a matter of preference (quantity over quality?)

Best Regards,
Emanuel Varga

[Richard]

What I am really trying to do is to create a button in the grid with icons for functions such as edit and delete. What is the best way to accomplish this?

[Emanuel Varga]

Hello again Richard,

For this i would suggest a custom column with a custom cell element,

Please take a look at this thread, i've posted there an example application which should get you started.

Hope this helps, if you have any more questions please do not hesitate to say so,

Best Regards,
Emanuel Varga

[Richard]

This seems like overkill. All I want to do is create two columns with buttons that have images.

[Emanuel Varga]

Hello again,

If you are ok with creating two colums, then i would just create two CommandColumns, set the maximum width, and set the images.
After that register for the CommandCellClick event and based on the sender perform an action.

Hope this helps, if you have any other questions or comments, please let me know,

Best Regards,
Emanuel Varga