GridView with command button with icon

[Yael]

Hi
In the Grid I have a column that is 'Actions' columns. Meaning that the user is clicking on the field in this column, that start some operation on the relevant row.
The column has a picture icon of 'play' and 'stop'.
I didn't find the way to put the icon on the 'Command button' for the grid.
So, i used a simple column and put the icon and when the user is pressing on this column, i catch the event: grid_CellClick.

The problem is that the user don't see that the 'button' was pressed.

1. Is there a way to put an icon or image on the command button for the grid?
2. Is there  a way to simulate the button pressing on the column, even when it is not a command button?

Thanks Yael Kline

[Fabien]

Hi,

there is two ways to do it. With GridViewCommandColumn or GridViewDataColumn.

First of all, add CellFormatting event in your grid.

Add this function (to apply theme)

        /// <summary>
        /// Apply a theme to a RadItem
        /// </summary>
        /// <param name="pItem">Item criteria</param>
        /// <param name="pThemeName">Theme name</param>
        private void ApplyThemeToElement(RadItem pItem, string pThemeName)
        {
            DefaultStyleBuilder builder = ThemeResolutionService.GetStyleSheetBuilder(pItem, pThemeName) as DefaultStyleBuilder;
            if (builder != null)
                //clone because control might modify it later
                pItem.Style = new XmlStyleSheet(builder.Style).GetStyleSheet();
        }

1/ GridViewCommandColumn solution

        private void RadGridView_Example_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            if (e.CellElement.ColumnInfo is GridViewCommandColumn && !(e.CellElement.RowElement is GridTableHeaderRowElement))
            {
                GridViewCommandColumn column = (GridViewCommandColumn)e.CellElement.ColumnInfo;
                if (column.FieldName == "ActionButtonColumnName")
                {
                    RadButtonElement element = (RadButtonElement)e.CellElement.Children[0];
                    element.DisplayStyle = DisplayStyle.Image;
                    // This is an example of course
                    element.Image = global::NameSpaceOfApplication.Properties.Resources.ActionBitmap;
                    e.CellElement.StringAlignment = StringAlignment.Center;
                    this.ApplyThemeToElement(element, "ControlDefault");
                }
            }
        }

2/ GridViewDataColumn solution

        private void RadGridView_Example_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            // exclude header element in the data column
            if (e.CellElement.ColumnInfo is GridViewDataColumn && !(e.CellElement.RowElement is GridTableHeaderRowElement))
            {
                GridViewDataColumn column = (GridViewDataColumn)e.CellElement.ColumnInfo;
                if (column.FieldName == "ActionButtonColumnName")
                {

                    // check if the RadButton is already added to the cell
                    if (e.CellElement.Children.Count > 0)
                        return;

                    try
                    {

                        RadButtonElement element = new RadButtonElement();
                        element.Click +=new EventHandler(element_Click);
                        element.DisplayStyle = DisplayStyle.Image;
                        // apply theme
                        this.ApplyThemeToElement(element, "ControlDefault");

                        e.CellElement.Children.Add(element);
                    }
                    catch { }
                }
            }
        }

Style and other params is an example of course. I hope it'll help you.


Best regards,

Fabien

[Yael]

Hi
Thank you for the answer.
I tried it and it is working.
Another question:
I want to simulate the button pressing on the column.
The button is flat and when the user is pressing it, it is not showing like an ordinary button.
The user don't know if the button was pressed untill the result is showing, and it takes a while.
I guess you have some property for that.

Thanks Yael

[Fabien]

Can you explain more? Because i'm not sure to understand what's you want to do.

[Yael]

Hi
Usualy, when a user is pressing on a button, he can actuly see  the button pressed!
When the mouse is pressing the button it looks like it is going down and up, like a 'real' button.
The button that i added to the grid does not look like it is pressed.
I want that the user would fill the press action when he see the button pressed.
You can see this action in each simple button that you add to a form.

Thanks Yael

[Fabien]

Hi,

you should use method 1 and add ApplyTheme.

If it doesn't work, could you show me part of your code?

[Yael]

Hi
I can see that you don't understand my question.

(The first example with GridViewCommandColumn, looks better but is added lot's of time and when i click on the button, the event fires lots of time).
I used your second method with GridViewDataColumn and the ApplyThemeToElement method.
The button was added to my grid and that is OK!!!

The problem is that the button is flat like in Html style
And i want it to look like window form style, and that when the button is pressed it will look pressed(usualy a border is added to simulate that).
How can i simulate the press(click) action???
My code looks like that:
RadButtonElement element;
if(e.CellElement.Children.Count == 0)
{
    element = new  RadButtonElement();
    element.Click += new EventHandler(element_click);
    element.DisplayStyle = DisplayStyle.Image;
    element.ImageAlignment = ContentAlignment.MiddleCenter;
    e.CellElement.ImageLayout = ImageLayout.Center;
    this.ApplyThemeToElement(element,"ControlDefault");
    e.CellElement.Children.Add(element);
}
else
    element = (RadButtonElement)e.CellElement.Children[0];
switch(status)
{
    case 1:
        element.Image = this.images[1];    //images is list of images
        break;
}

It is working and the button is added but in flat style.
I'll be happy to get improoved code from you.

(Comment: I don't have internet on my computer so i can't give you the original class code.
I just copy the relevant code for you.)

Yael

[Fabien]

Can you add this before binding your data?

            RadGridView.GridElement.DisableHTMLRendering = true;

[Yael]

Hi
I tried to add this row to my code.
There is no 'DisableHTMLRendering '  in my GridElement Class.
It is fail to compile.
Am i mising someting? (reference or 'using')
Maybe it is in the last version Q3?
I am using Q2 release?

(I also searched for 'DisableHTMLRendering ' in the documentation and 'telerik site' and didn't find anything!!!)

Waiting for your answer.

Yael

[Fabien]

That's why! I use Q3 and you the Q2.

This should explain why we don't have same reactions. I encourage you to update your winform component :)

[Nikolay]

Hi guys,

Fabien, thank you for sharing your knowledge with the community. We highly appreciate it.

Yael, currently we have an issue with the theming of the RadButtonElement when added in the GridViewDataColumn. To overcome this issue, you should inherit from RadButtonElement, override the ThemeEffectiveType property and add the instance of the custom class to the cells of the GridViewDataColumn.
I have demonstrated the approach in the sample project attached.

As to the GridViewCommandColumn, I did not understood what exactly are your issues with it. Could you please elaborate a bit more on this topic?

Regards,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Yael]

Hi
My Issue is:
When you put an ordinary button on a form in windows (like Visual Basic, or c#), and the user is clicking on the button, the button is pushed down and up. You get the filling that the button is realy pressed like 'real' button.
It is accomplished by adding the button a black frame around it.

I am very disappointed that you don't understand my 'issue'.

Thanks Yael

[Nick]

Hi Yael,

Thank you for contacting us back.

Please try the following modification of the sample project Nikolay sent to you.

 void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            if (e.CellElement.ColumnInfo is GridViewDataColumn && !(e.CellElement.RowElement is GridTableHeaderRowElement))
            {
                GridViewDataColumn column = (GridViewDataColumn)e.CellElement.ColumnInfo;
                if (column.FieldName == "ActionButtonColumnName")
                {
                    if (e.CellElement.Children.Count > 0)
                        return;
                    try
                    {

                        MyButtonElement element = new MyButtonElement();
                        element.DisplayStyle = DisplayStyle.Image;
                        e.CellElement.Children.Add(element);
                        this.ApplyThemeToElement(element, "ControlDefault");

                        element.MouseDown+=new MouseEventHandler(element_MouseDown);
                        element.MouseUp += new MouseEventHandler(element_MouseUp);
                    }
                    catch { }
                }
            }
        }

        void element_MouseUp(object sender, MouseEventArgs e)
        {
            ((BorderPrimitive)((RadButtonElement)sender).BorderElement).ForeColor = Color.FromArgb(115, 146, 189);
        }

        void element_MouseDown(object sender, MouseEventArgs e)
        {
            ((BorderPrimitive)((RadButtonElement)sender).BorderElement).ForeColor = Color.Black;
        }

It changes the default border to black on mouse down and back to normal on mouse up.

Do not hesitate to contact us back if you have further questions.

Greetings,
Nick
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.