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

GridView with command button with icon

12 Answers 716 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Yael
Top achievements
Rank 1
Yael asked on 02 Dec 2008, 08:37 AM
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

12 Answers, 1 is accepted

Sort by
0
Fabien
Top achievements
Rank 2
answered on 02 Dec 2008, 11:55 AM
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
0
Yael
Top achievements
Rank 1
answered on 04 Dec 2008, 08:49 AM
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
0
Fabien
Top achievements
Rank 2
answered on 04 Dec 2008, 04:02 PM
Can you explain more? Because i'm not sure to understand what's you want to do.
0
Yael
Top achievements
Rank 1
answered on 07 Dec 2008, 07:07 AM
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
0
Fabien
Top achievements
Rank 2
answered on 08 Dec 2008, 08:49 AM
Hi,

you should use method 1 and add ApplyTheme.

If it doesn't work, could you show me part of your code?
0
Yael
Top achievements
Rank 1
answered on 08 Dec 2008, 10:55 AM
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
0
Fabien
Top achievements
Rank 2
answered on 08 Dec 2008, 12:33 PM
Can you add this before binding your data?

 
            RadGridView.GridElement.DisableHTMLRendering = true

0
Yael
Top achievements
Rank 1
answered on 09 Dec 2008, 07:57 AM
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
0
Fabien
Top achievements
Rank 2
answered on 09 Dec 2008, 08:20 AM
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 :)
0
Nikolay
Telerik team
answered on 18 Dec 2008, 03:56 PM
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.
0
Yael
Top achievements
Rank 1
answered on 20 Dec 2008, 07:09 PM
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
0
Nick
Telerik team
answered on 22 Dec 2008, 03:58 PM
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.
Tags
GridView
Asked by
Yael
Top achievements
Rank 1
Answers by
Fabien
Top achievements
Rank 2
Yael
Top achievements
Rank 1
Nikolay
Telerik team
Nick
Telerik team
Share this question
or