We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to replace the default +/- expand buttons with the customized image buttons when the records are grouped WinForms in the GridGroupingControl?

Platform: WinForms |
Control: GridGroupingControl

Customize the image button

To replace the default +/- expand buttons with the customized image buttons, you need to create a new CellModel and CellRenderer. In the following code example, GridPushButtonCellModel and GridPushButtonCellRenderer are created by inheriting the GridPushButtonCellModel and GridPushButtonCellRenderer from the sample. The following code example shows how to use these classes.

Creating CellModel

Refer to the following code example to create a new cell model.


public class GridPushButtonImageCellModel: GridPushButtonCellModel
    protected GridPushButtonImageCellModel(SerializationInfo info, StreamingContext context) : base(info, context){}
    public GridPushButtonImageCellModel(GridModel grid) : base(grid){}
    public override GridCellRendererBase CreateRenderer(GridControlBase control)
        return new GridPushButtonImageCellRenderer(control, this);


Public Class GridPushButtonImageCellModel
    Inherits GridPushButtonCellModel
    Protected Sub New(ByVal info As SerializationInfo, ByVal context As StreamingContext)
       MyBase.New(info, context)
    End Sub
    Public Sub New(ByVal grid As GridModel)
    End Sub
    Public Overrides Function CreateRenderer(ByVal control As GridControlBase) As GridCellRendererBase
        Return New GridPushButtonImageCellRenderer(control, Me)
    End Function
End Class

Creating CellRenderer

Refer to the following code example to create a new CellRenderer.


public class GridPushButtonImageCellRenderer : GridPushButtonCellRenderer
    private ImageCellButton pushButton;
    public GridPushButtonImageCellRenderer(GridControlBase grid, GridPushButtonImageCellModel cellModel) : base(grid, cellModel)
        AddButton(pushButton = new ImageCellButton(this));


Public Class GridPushButtonImageCellRenderer
    Inherits GridPushButtonCellRenderer
    Private pushButton As ImageCellButton = New ImageCellButton(Me)
    Public Sub New(ByVal grid As GridControlBase, ByVal cellModel As GridPushButtonImageCellModel)
        MyBase.New(grid, cellModel)
    End Sub
End Class

Creating ImageCellButton


public class ImageCellButton : GridCellButton
    static GridIconPaint iconPainter;
    static ImageCellButton()
       iconPainter = new GridIconPaint("ImagePushButton.", typeof(ImageCellButton).Assembly);
    public ImageCellButton(GridPushButtonCellRenderer control) : base(control)
        Console.WriteLine("In ImageCellButton");
    public override void Draw(Graphics g, int rowIndex, int colIndex, bool bActive, GridStyleInfo style)
         base.Draw(g, rowIndex, colIndex, bActive, style);
         //Draws the button.
         bool hovering = IsHovering(rowIndex, colIndex);
         bool mouseDown = IsMouseDown(rowIndex, colIndex);
         bool disabled = !style.Clickable;
         ButtonState buttonState = ButtonState.Normal;
  buttonState |= ButtonState.Inactive|ButtonState.Flat;
         else if (!hovering && !mouseDown)
  buttonState |= ButtonState.Flat;
  Point ptOffset = Point.Empty;
     ptOffset = new Point(1, 1);
     buttonState |= ButtonState.Pushed;
  DrawButton(g, Bounds, buttonState, style);
            Image img = Image.FromFile(Application.StartupPath + "..\\..\\..\\Browse.bmp");
            Bitmap bmp = img as Bitmap;
            Rectangle r = iconPainter.PaintIcon(g, Bounds, ptOffset, bmp, Color.Black);


Public Class ImageCellButton
    Inherits GridCellButton
    Private Shared iconPainter As GridIconPaint
       Shared Sub New()
       iconPainter = New GridIconPaint("ImagePushButton.", GetType(ImageCellButton).Assembly)
    End Sub
    Public Sub New(ByVal control As GridPushButtonCellRenderer)
        Console.WriteLine("In ImageCellButton")
    End Sub
    Public Overrides Sub Draw(ByVal g As Graphics, ByVal rowIndex As Integer, ByVal colIndex As Integer, ByVal bActive As Boolean, ByVal style As GridStyleInfo)
        MyBase.Draw(g, rowIndex, colIndex, bActive, style)
        'Draws the button.
        Dim hovering As Boolean = IsHovering(rowIndex, colIndex)
        Dim mouseDown As Boolean = IsMouseDown(rowIndex, colIndex)
        Dim disabled As Boolean = Not style.Clickable
        Dim buttonState As ButtonState = ButtonState.Normal
        If disabled Then
 buttonState = buttonState Or ButtonState.Inactive Or ButtonState.Flat
        ElseIf (Not hovering) AndAlso (Not mouseDown) Then
 buttonState = buttonState Or ButtonState.Flat
        End If
        Dim ptOffset As Point = Point.Empty
        If mouseDown Then
 ptOffset = New Point(1, 1)
 buttonState = buttonState Or ButtonState.Pushed
        End If
        DrawButton(g, Bounds, buttonState, style)
        Dim img As Image = Image.FromFile(Application.StartupPath & "..\..\..\Browse.bmp")
        Dim bmp As Bitmap = TryCast(img, Bitmap)
        Dim r As Rectangle = iconPainter.PaintIcon(g, Bounds, ptOffset, bmp, Color.Black)
End Sub

Adding CellModel

The following code example illustrates how to add cell model to the GridGroupingControl. The text ImagePushButton mentioned while adding the CellModel is used as CellType.


//Adds the ImagePushButton Model in the GridGroupingControl CellModel.
this.gridGroupingControl1.TableModel.CellModels.Add("ImagePushButton", new GridPushButtonImageCellModel(this.gridGroupingControl1.TableModel));


'Adds the ImagePushButton Model in the GridGroupingControl CellModel.
Me.gridGroupingControl1.TableModel.CellModels.Add("ImagePushButton", New GridPushButtonImageCellModel(Me.gridGroupingControl1.TableModel))

Assigning CellType

The following code example illustrates how to add cell type to the GridGroupingControl.


//Loads image in the GroupExpander used in grouping cases.
this.gridGroupingControl1.TableDescriptor.Appearance.GroupCaptionPlusMinusCell.CellType = "ImagePushButton";
//Loads image in the RecordExpander used in nestedgrid cases.
this.gridGroupingControl1.TableDescriptor.Appearance.RecordPlusMinusCell.CellType = "ImagePushButton";


'Loads image in the GroupExpander used in grouping cases.
Me.gridGroupingControl1.TableDescriptor.Appearance.GroupCaptionPlusMinusCell.CellType = "ImagePushButton"
'Loads image in the RecordExpander used in nestedgrid cases.
Me.gridGroupingControl1.TableDescriptor.Appearance.RecordPlusMinusCell.CellType = "ImagePushButton"


Customized image push button added in record plus minus cell

Figure 1: Customized ImagePushButton added in the RecordPlusMinusCell

Customized image push button added in grid caption plus minus cell

Figure 2: Customized ImagePushButton added in the GroupCaptionPlusMinusCell


C#: CustomizedImageButton-C#

VB: CustomizedImageButton-VB

2X faster development

The ultimate WinForms UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile