Articles in this section
Category / Section

How to align button at the centre of a cell?

2 mins read

In order to align the button at the center of grid cell, the customized cell model and cell renderer of the button can be used. Then override the OnLayout() method to specify the bounds of the button to align at center.

Code Snippet

Defining the custom cell model

C#

public class SampleButtonCellModel : GridStaticCellModel
{
   protected SampleButtonCellModel(SerializationInfo info, StreamingContext context)
             : base(info, context)
   {
   }
   public SampleButtonCellModel(GridModel grid)
          : base(grid)
   {
       AllowFloating = false;
       ButtonBarSize = new Size(120, 120);
   }
 
   public override GridCellRendererBase CreateRenderer(GridControlBase control)
   {
       return new SampleButtonCellRenderer(control, this);
   }
}

 

VB

Public Class SampleButtonCellModel
 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(120, 120)
   End Sub
 
   Public Overrides Function CreateRenderer(ByVal control As GridControlBase) As GridCellRendererBase
   Return New SampleButtonCellRenderer(control, Me)
   End Function
End Class

 

 

Defining custom cell renderer

C#

public class SampleButtonCellRenderer : GridStaticCellRenderer
{
    protected GridCellButton sampleButton;
    public SampleButtonCellRenderer(GridControlBase grid, GridCellModelBase cellModel)
            : base(grid, cellModel)
    {
       AddButton(this.sampleButton = new GridCellButton(this));
       this.ForceRefreshOnActivateCell = true;
    }
    protected SampleButtonCellRenderer(GridControlBase grid, GridCellModelBase cellModel, GridCellButton button)
            : base(grid, cellModel)
    {
        this.sampleButton = button;
    }
    protected override void OnDraw(Graphics g, Rectangle clientRectangle, int rowIndex, int colIndex, GridStyleInfo style)
    {
        base.OnDraw(g, clientRectangle, rowIndex, colIndex, style);
    }
 
    protected override Rectangle OnLayout(int rowIndex, int colIndex, GridStyleInfo style, Rectangle innerBounds, Rectangle[] buttonsBounds)
    {
       TraceUtil.TraceCurrentMethodInfo(rowIndex, colIndex, style, innerBounds, buttonsBounds);
       Rectangle rect = GridUtil.CenterInRect(innerBounds, this.Model.ButtonBarSize);
       int width = rect.Width / 2;
       buttonsBounds[0] = new Rectangle(rect.X + width / 2, rect.Y, width, rect.Height);
       return innerBounds;
    }
}

 

VB

Public Class SampleButtonCellRenderer
 Inherits GridStaticCellRenderer
   Protected sampleButton As GridCellButton
   Public Sub New(ByVal grid As GridControlBase, ByVal cellModel As GridCellModelBase)
    MyBase.New(grid, cellModel)
   AddButton(Me.sampleButton = New GridCellButton(Me))
   Me.ForceRefreshOnActivateCell = True
   End Sub
   Protected Sub New(ByVal grid As GridControlBase, ByVal cellModel As GridCellModelBase, ByVal button As GridCellButton)
    MyBase.New(grid, cellModel)
    Me.sampleButton = button
   End Sub
   Protected Overrides Sub OnDraw(ByVal g As Graphics, ByVal clientRectangle As Rectangle, ByVal rowIndex As Integer, ByVal colIndex As Integer, ByVal style As GridStyleInfo)
    MyBase.OnDraw(g, clientRectangle, rowIndex, colIndex, style)
   End Sub
 
   Protected Overrides Function OnLayout(ByVal rowIndex As Integer, ByVal colIndex As Integer, ByVal style As GridStyleInfo, ByVal innerBounds As Rectangle, ByVal buttonsBounds() As Rectangle) As Rectangle
    TraceUtil.TraceCurrentMethodInfo(rowIndex, colIndex, style, innerBounds, buttonsBounds)
    Dim rect As Rectangle = GridUtil.CenterInRect(innerBounds, Me.Model.ButtonBarSize)
    Dim width As Integer = rect.Width \ 2
    buttonsBounds(0) = New Rectangle(rect.X + width \ 2, rect.Y, width, rect.Height)
    Return innerBounds
   End Function
End Class

 

Adding the custom cell model

C#

// form()
this.gridControl1.CellModels.Add("SampleButton", new SampleButtonCellModel(this.gridControl1.Model));
this.gridControl1[2, 2].CellValue = "";
this.gridControl1[2, 2].CellType = "SampleButton";

 

VB

' form()
Me.gridControl1.CellModels.Add("SampleButton", New SampleButtonCellModel(Me.gridControl1.Model))
Me.gridControl1(2, 2).CellValue = ""
Me.gridControl1(2, 2).CellType = "SampleButton"

 

Screenshot

Showing button aligned in center of the cell in Grid

Sample links:

C# ButtonAlignment_CS

VB ButtonAlignment_VB

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied