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 add more than one button in a grid cell in WinForms GridGroupingControl?

Platform: WinForms |
Control: GridGroupingControl

Multiple button in grid cell

To set more than one button in a cell for particular column in grid and handled the click event for button. Here we have create a custom cell renderer class”MultipleButtonGridCell”.

1. Creating CellModel/CellRenderer in a class

You can use the GridModel class to create the CellModel class in a grid. The GridModel class can hold all the information about the grid. Using “GridCellRendererBase” class to create the CellRenderer class in the CellModel class.


If you want to add TextBoxCellModel class, you can use the GridTextBoxCellModel class. Use the “TextBoxCellRendererBase” class to create the GridTextBoxCellRenderer class in the TextBoxCellModel class.


Refer the following code example for MultipleButtonCellModel.


public class MultipleButtonCellModel : GridStaticCellModel
    protected MultipleButtonCellModel(SerializationInfo info, StreamingContext context)
                : base(info, context)
    public MultipleButtonCellModel(GridModel grid)
                : base(grid)
          AllowFloating = false;                
          ButtonBarSize = new Size(55,55);                
    public override GridCellRendererBase CreateRenderer(GridControlBase control)
          return new MultipleButtonCellRenderer(control, this);



Public Class MultipleButtonCellModel
      Inherits GridStaticCellModel
      Protected Sub New(ByVal info As SerializationInfo, ByVal context As StreamingContext)
           MyBase.New(info, context)
      End Sub
      Public Sub New(ByVal grid As GridModel)
           AllowFloating = False
           ButtonBarSize = New Size(55,55)
      End Sub
      Public Overrides Function CreateRenderer(ByVal control As GridControlBase) As GridCellRendererBase
           Return New MultipleButtonCellRenderer(control, Me)
      End Function
End Class


Refer the following code example for MultipleButtonCellRender.



public class MultipleButtonCellRenderer : GridStaticCellRenderer
     MultipleButtonGridCell[] mybuttons;
     public MultipleButtonCellRenderer(GridControlBase grid, GridCellModelBase cellModel)
                : base(grid, cellModel)
         // Code for adding buttons into the cell
         mybuttons = new MultipleButtonGridCell[2];
         for (int n = 0; n < 2; n++)
              mybuttons[n] = new MultipleButtonGridCell(this);
         mybuttons[0].Interior = new BrushInfo(GradientStyle.PathEllipse, Color.Blue, Color.White);
         mybuttons[0].Text = "Button1";
         mybuttons[1].Interior = new BrushInfo(GradientStyle.PathEllipse, Color.Blue, Color.White);
         mybuttons[1].Text = "Button2";



Public Class MultipleButtonCellRenderer
     Inherits GridStaticCellRenderer
     Private mybuttons() As MultipleButtonGridCell
     Public Sub New(ByVal grid As GridControlBase, ByVal cellModel As GridCellModelBase)
           MyBase.New(grid, cellModel)
           'code for adding buttons into the cell
           mybuttons = New MultipleButtonGridCell(1){}
           For n As Integer = 0 To 1
                mybuttons(n) = New MultipleButtonGridCell(Me)
           Next n
           mybuttons(0).Interior = New BrushInfo(GradientStyle.PathEllipse, Color.Blue, Color.White)
           mybuttons(0).Text = "Button1"
           mybuttons(1).Interior = New BrushInfo(GradientStyle.PathEllipse, Color.Blue, Color.White)
           mybuttons(1).Text = "Button2"
     End Sub
End Class

2. Adding CellModel into grid

If you want to add the Cellmodel class into grid, you can use the Add method of cellmodel collection. In the collection you can add the CellType and CellModel class name.

You can add the new CellType into CellModels through the following code examples.



// Form Load
this.gridGroupingControl1.TableModel.CellModels.Add("MultipleButton", new ITypeListSample.MultipleButtonGridCell.MultipleButtonCellModel(this.gridGroupingControl1.TableModel));



'Form Load
Me.gridGroupingControl1.TableModel.CellModels.Add("MultipleButton", New ITypeListSample.MultipleButtonGridCell.MultipleButtonCellModel(Me.gridGroupingControl1.TableModel))


3. Assigning the CellType

You can set the CellType in the grid and the assigned same CellType name in the CellModel collection.

Refer the following code example for assigning the CellType of a cell using QueryCellStyleInfo event.



void gridGroupingControl1_QueryCellStyleInfo(object sender, GridTableCellStyleInfoEventArgs e)
      if (e.TableCellIdentity.ColIndex == 2 && e.TableCellIdentity.RowIndex > 3)
          e.Style.CellType = "MultipleButton";
          e.Style.Description = "Click";



Private Sub gridGroupingControl1_QueryCellStyleInfo(ByVal sender As Object, ByVal e As GridTableCellStyleInfoEventArgs)
    If e.TableCellIdentity.ColIndex = 2 AndAlso e.TableCellIdentity.RowIndex > 3 Then
       e.Style.CellType = "MultipleButton"
       e.Style.Description = "Click"
    End If   
End Sub

4. Adding a Button and handle the click event

If you want to add the button into a cell, you can use the AddButton( ) method in the CellRenderer class. In our sample, we have added a normal button, here a class MultipleButtonGridCell is created that have the CustomCellmodel class (MultileButtonCellModel) and renderer class MultipleButtonCellRender. The MultileButtonCellModel class can define the size of the button in the model class by using “ButtonBarSize” property.  The MultipleButtonCellRenderer class is used to add the number of buttons inside the cell.


The TableControlCellButtonClicked event is handled for each button of the cell and you can identify which button was clicked using e.Inner.Button attribute.



this.gridGroupingControl1.TableControlCellButtonClicked += gridGroupingControl1_TableControlCellButtonClicked;
void gridGroupingControl1_TableControlCellButtonClicked(object sender, GridTableControlCellButtonClickedEventArgs e)
     GridTableCellStyleInfo style = e.TableControl.GetTableViewStyleInfo(e.Inner.RowIndex, e.Inner.ColIndex);
     int recordNumber = style.TableCellIdentity.DisplayElement.GetRecord().GetSourceIndex() + 1;
     MessageBox.Show("Clicked Button: " + e.Inner.Button.Text + "\nRecord Number: " + recordNumber.ToString() + "\nRow Index: " + e.Inner.RowIndex + "\nColumn Index: " + e.Inner.ColIndex, "Click Information", MessageBoxButtons.OK, MessageBoxIcon.Information);



AddHandler Me.gridGroupingControl1.TableControlCellButtonClicked, AddressOf gridGroupingControl1_TableControlCellButtonClicked
Private Sub gridGroupingControl1_TableControlCellButtonClicked(ByVal sender As Object, ByVal e As GridTableControlCellButtonClickedEventArgs)
      Dim style As GridTableCellStyleInfo = e.TableControl.GetTableViewStyleInfo(e.Inner.RowIndex, e.Inner.ColIndex)
      Dim recordNumber As Integer = style.TableCellIdentity.DisplayElement.GetRecord().GetSourceIndex() + 1
      MessageBox.Show("Clicked Button: " & Convert.ToString(e.Inner.Button.Text) & vbLf & "Record Number: " & recordNumber.ToString() & vbLf & "Row Index: " & Convert.ToString(e.Inner.RowIndex) & vbLf & "Column Index: " & Convert.ToString(e.Inner.ColIndex), "Click Information", MessageBoxButtons.OK, MessageBoxIcon.Information)
End Sub


5. Adding an Image

If you want to add the image into a cell, you can use the AddButton( ) method in the CellRenderer class. In our sample, we have added an image, here a class MultipleImageCell is created that have the CustomCellmodel class (MultipleImageCellModel) and renderer class MultipleImageCellRenderer and using Draw( ) method to draw the image inside the button. The MultipleImageCellModel class can define the size of the button in the model class by using “ButtonBarSize” property.  . The MultipleImageCellRenderer class is used to add the number of image inside the cell.


Refer the following code example for Draw( )



public override void Draw(Graphics g, int rowIndex, int colIndex, bool bActive, GridStyleInfo style)
      Point ptOffset = Point.Empty;
      Rectangle bound = base.Bounds;
      bound.Width += 15;
      bound.Height += 5;
      Bitmap bmp = this.image as Bitmap;
      Rectangle r = iconPainter.PaintIcon(g, bound, ptOffset, bmp, Color.Black); //Draw the image inside a button



Public Overrides Sub Draw(ByVal g As Graphics, ByVal rowIndex As Integer, ByVal colIndex As Integer, ByVal bActive As Boolean, ByVal style As GridStyleInfo)
      Dim pt As Point = Point.Empty
      Dim bound As Rectangle = Rectangle.FromLTRB((MyBase.Bounds.Left-30),       MyBase.Bounds.Top, MyBase.Bounds.Right, MyBase.Bounds.Bottom)
      bound.Width += Me.image.Width
      bound.Height += 10
      Dim bmp As Bitmap = TryCast(Me.image, Bitmap)
      Dim r As Rectangle = iconPainter.PaintIcon(g, bound, pt, bmp, Color.Black)
End Sub


Refer the following code example for MultipleImageCellRenderer


public class MultipleImageCellRenderer : GridStaticCellRenderer
     MultipleImageCell[] mybuttons;
     public MultipleImageCellRenderer(GridControlBase grid, GridCellModelBase cellModel)
            : base(grid, cellModel)
            // Asign the image in the button
            Image image1 = Image.FromFile(@"..\\..\\delete.png");
            mybuttons = new MultipleImageCell[1];
            Image image2 = Image.FromFile(@"..\\..\\basic.png");
            mybuttons = new MultipleImageCell[2];
            mybuttons[0] = new MultipleImageCell(this, image1);
            mybuttons[0].Text = "Image1";
            mybuttons[1] = new MultipleImageCell(this, image2);
            mybuttons[1].Text = "Image2";



Public Class MultipleImageCellRenderer
Inherits GridStaticCellRenderer
Private mybuttons() As MultipleImageCell
    Public Sub New(ByVal grid As GridControlBase, ByVal cellModel As GridCellModelBase)
MyBase.New(grid, cellModel)
      Dim image1 As Image = Image.FromFile("..\\..\\delete.png")
      mybuttons = New MultipleImageCell(0){}
      Dim image2 As Image = Image.FromFile("..\\..\\basic.png")
      mybuttons = New MultipleImageCell(1){}
      mybuttons(0) = New MultipleImageCell(Me, image1)
      mybuttons(0).Text = "Image1"
      mybuttons(1) = New MultipleImageCell(Me, image2)
      mybuttons(1).Text = "Image2"
    End Sub
End Class



C#: MultipleButtonGridCell CS

VB: MultipleButtonGridCell 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