How to add more than one button in a grid cell in WinForms GridGroupingControl?

Multiple button in grid cell

To set more than one button in a cell for particular column in the grid and handle the click events for the buttons, we have created a custom cell renderer class called 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 to 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)
           MyBase.New(grid)
           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 to 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);
              AddButton(mybuttons[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";
     }
}

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)
                AddButton(mybuttons(n))
           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 to the following code example for assigning the CellType of a cell using the 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

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

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. Refer to the following code example for Draw method.

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 to 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";
            AddButton(mybuttons[0]);
            AddButton(mybuttons[1]);
     }
}

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"
      AddButton(mybuttons(0))
      AddButton(mybuttons(1))
    End Sub
End Class

Samples:

C#: MultipleButtonGridCell CS

VB: MultipleButtonGridCell VB

Did you find this information helpful?

Yes

Comments (0)