ButtonEdit Cells

This sample demonstrates how you can implement a button edit control in grid cells. The ButtonEditCellButton class that is derived from the class GridCellButton, is used to draw buttons in grid cells. Inside this class, the ButtonEditStyleProperties class can be accessed in order to supply the necessary style settings for these button controls. This class will let you create different types of button controls like buttons with images, buttons painted with colors, button faces with text, buttons with borders, etc.

This sample also provides many options like aligning the buttons in grid cells, aligning the text on the button face, etc. You can also enable or disable these button controls. Apart from these classes, this sample also includes a cell model and a cell renderer class which, can be used to create a custom cell type. In addition, this sample also has RTL support for these button edit cells.

Given below are sample screen shots.

Button Edit Cells

Here is the code snippet to create the Button Edit Cell Type.

    		// The ButtonEditCellButton Class draws a button control in the grid cell identified by the given rowindex and colindex
    		public class ButtonEditCellButton : GridCellButton
    		{
    			public override void Draw(Graphics g, int rowIndex, int colIndex, bool bActive, GridStyleInfo style)
    			{
    				ButtonEditStyleProperties sp = new ButtonEditStyleProperties(style);
    				ButtonState buttonState = ButtonState.Normal;
 	
    				// Draw the button.
    				DrawButton(g, Bounds, buttonState, style);


    				// Draw the button face.
    				DrawButtonFace(g, buttonState, style);
    			}
    		}  

Here is the sample code snippet for drawing different types of button faces.

    		// Draws the image based on ButtonEditInfo.ButtonEditType.
    		switch(sp.ButtonEditInfo.ButtonEditType)
    			{
    				case ButtonType.Browse:	
    					resourceName = "Browse.bmp";
    				break;
    				case ButtonType.Check:
    					resourceName = "Check.bmp";
    				break;	
    		.............
    		.............
    				default:
    					resourceName = "Browse.bmp";
    				break;
    			}


    		// Draws the image from ButtonEditInfo.Imag.e
    		if(sp.ButtonEditInfo.ButtonEditType == ButtonType.Image)
    		{
    			if(sp.ButtonEditInfo.Image != null)
    			{
    				if (!drawPressed) 
    				{ 
    				DrawingUtils.DrawImage
    						      (g, sp.ButtonEditInfo.Image as Image,Bounds.X+2, Bounds.Y+2, Bounds.Width-4, Bounds.Height-4);
    				}
    				else
    				{
    				DrawingUtils.DrawImage
    						     (g, sp.ButtonEditInfo.Image as Image,Bounds.X+1, Bounds.Y+1, Bounds.Width-4, Bounds.Height-4);		
    				}
    			}
    			return;
    		}


    		// Colored button drawing.
    		Color hilight = SystemColors.ControlLightLight; 
    		Color shadow = SystemColors.ControlDarkDark; 
    		Color draw = sp.ButtonEditInfo.BackColor;
    		Brush br = new SolidBrush(draw); 


    		// Colors the button only if the ForceBackColor is set (themes application).
    		if(sp.ButtonEditInfo.ForceBackColor)
    		{
    				if (!drawPressed) 
    				{ 
    					g.FillRectangle(br, Bounds);
    					if(buttonState == ButtonState.Flat)
    					{
    						ControlPaint.DrawBorder(g, Bounds, SystemColors.ControlDark, ButtonBorderStyle.Solid);
    					}
    					else
    					{                	
    						GridUtil.Draw3dFrame(g, rect.Left, rect.Top, rect.Right-1, rect.Bottom-1, 1, hilight, shadow);
    					}				
    				}


    				// Draw the button text.
    				string text = sp.ButtonEditInfo.Text;


    				if (text != null && text.Length > 0)
    				{
    					Font font = style.GdipFont;
    					StringFormat format = new StringFormat();
    					if (isRightToLeft)
    					{
    						format.FormatFlags |= StringFormatFlags.DirectionRightToLeft;
    					}
    					format.Alignment = StringAlignment.Center;
    					Color textColor = Grid.PrintingMode && Grid.Model.Properties.BlackWhite ? Color.Black : sp.ButtonEditInfo.TextColor;
    					DrawText(g, sp.ButtonEditInfo.Text, font, faceRect, style, textColor, true, isRightToLeft);
    				}

    		}  

Here is the code to Register the button edit cell type.

    		this.gridControl1.CellModels.Add("ButtonEdit", new ButtonEditCellModel(this.gridControl1.Model));  

Then the Style.CellType is set for the cells that need to have this button edit control.

    		// Image Button
    		this.gridControl1[row, col].CellType = "ButtonEdit";
    		sp = new ButtonEditStyleProperties(this.gridControl1[row, col]);
    		sp.ButtonEditInfo.ButtonEditType = ButtonType.Browse;


    		// Button with text.
    		this.gridControl1[row, col].CellType = "ButtonEdit";
    		sp = new ButtonEditStyleProperties(this.gridControl1[row, col]);
    		sp.ButtonEditInfo.ButtonEditType = ButtonType.None;
    		sp.ButtonEditInfo.Width = 40;
    		sp.ButtonEditInfo.Text = "Sync";
    		sp.ButtonEditInfo.TextColor = Color.DarkGreen;


    		// Coloured Button
    		this.gridControl1[row, col].CellType = "ButtonEdit";
    		sp = new ButtonEditStyleProperties(this.gridControl1[row, col]);
    		sp.ButtonEditInfo.ForceBackColor = true;
    		sp.ButtonEditInfo.ButtonEditType = ButtonType.None;
    		sp.ButtonEditInfo.BackColor = Color.LightGreen;


    		// Setting the Enabled property.
    		this.gridControl1[row,col].CellType = "ButtonEdit";
    		sp = new ButtonEditStyleProperties(this.gridControl1[row, col]);
    		sp.ButtonEditInfo.ButtonEditType = ButtonType.None;
    		sp.ButtonEditInfo.Text = "BT";
    		sp.ButtonEditInfo.Width = 30;
    		sp.ButtonEditInfo.Enabled = false;


    		// Bordered button
    		this.gridControl1[row, col].CellType = "ButtonEdit";
    		sp.ButtonEditInfo.ButtonEditType = ButtonType.None;
    		sp.ButtonEditInfo.Width = 30;