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 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.
C#
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); } }
VB
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 the following code example for MultipleButtonCellRender.
C#
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"; } }
VB
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.
C#
// Form Load this.gridGroupingControl1.TableModel.CellModels.Add("MultipleButton", new ITypeListSample.MultipleButtonGridCell.MultipleButtonCellModel(this.gridGroupingControl1.TableModel));
VB
'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.
C#
void gridGroupingControl1_QueryCellStyleInfo(object sender, GridTableCellStyleInfoEventArgs e) { if (e.TableCellIdentity.ColIndex == 2 && e.TableCellIdentity.RowIndex > 3) { e.Style.CellType = "MultipleButton"; e.Style.Description = "Click"; } }
VB
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.
C#
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); }
VB
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( )
C#
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 }
VB
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
C#
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]); } }
VB
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: