Add buttons to collumn header

[Daniel Dusek]

Hi,
I want to add a new button to a grid header, but I can't find the way how:
- resize the button
- to place the button in a certain position within the collumn-header

Please help :-)
Dan

--
(I am using syncfusion components of version 4.102.0.50)

code18.zip

[Administrator]

Hi Dan,

Thank you for being patience.

Issue 1:
Resize the button

Solution:
You can resize the button by override the OnLayout method of the renderer class. In the method, the required position and size can be specified to draw the button in the required size inside the cell. Please refer to the code snippet below for more details.

Issue 2:
To place the button in a certain position within the collumn-header

Solution:
Please refer to the following code snippet demonstrates the grid being drawn in the required position inside the cell by override the OnLayout method of the renderer class.

>>>>>>>>>>Code Snippet<<<<<<<<<<<<
public class HeaderCellButtonRenderer : GridStaticCellRenderer
{
HeaderCellButton m_headerButton;

public HeaderCellButtonRenderer(GridControlBase grid, GridCellModelBase cellModel)
: base(grid, cellModel)
{
m_headerButton = new HeaderCellButton(this);
AddButton(m_headerButton);
m_headerButton.Interior = new BrushInfo(System.Drawing.SystemColors.ButtonFace);
m_headerButton.Bounds = new Rectangle(new Point(0, 0),
new Size(cellModel.GetCellSize(0, 1).Width / 2,
cellModel.GetCellSize(0, 1).Height));
m_headerButton.Graphics = grid.CreateGraphics();
m_headerButton.ButtonState = ButtonState.Normal;
m_headerButton.GridStyleInfo = new GridStyleInfo();
m_headerButton.Draw(1, 1);
}

protected override Rectangle OnLayout(int rowIndex, int colIndex, GridStyleInfo style, Rectangle innerBounds, Rectangle[] buttonsBounds)
{
TraceUtil.TraceCurrentMethodInfo(rowIndex, colIndex, style, innerBounds, buttonsBounds);

// Here you specify where the button should be drawn within the cell.
Rectangle rightArea = Rectangle.FromLTRB(innerBounds.Right - 50, innerBounds.Top, innerBounds.Right, innerBounds.Bottom);
buttonsBounds[0] = GridUtil.CenterInRect(rightArea, new Size(30, 20));

// Here you return the area where the text should be drawn/edited.
innerBounds.Width -= 20;
return innerBounds;
}
}
>>>>>>>>>>Code Snippet<<<<<<<<<<<<

Kindly let us know if you need any further assistance.
Have a nice day.

Best regards,
Madhan

[Daniel Dusek]

Hi,
thank you for the code. It helped, but it did not solved my problem completly. What I need is the first collumn header devided into two equally looking parts. The parts look like buttons, the first part is the newly add button, the second part is the rest of the collumn header. What I have reached so far is not what I want. The first, newly added button is not raised everytime, and it does not look to be equally high like the rest of the collumn header.

So how to devide the collumn header into two equally looking parts?

Thank you! Regads Dan

--

>Hi Dan,

Thank you for being patience.

Issue 1:
Resize the button

Solution:
You can resize the button by override the OnLayout method of the renderer class. In the method, the required position and size can be specified to draw the button in the required size inside the cell. Please refer to the code snippet below for more details.

Issue 2:
To place the button in a certain position within the collumn-header

Solution:
Please refer to the following code snippet demonstrates the grid being drawn in the required position inside the cell by override the OnLayout method of the renderer class.

>>>>>>>>>>Code Snippet<<<<<<<<<<<<
public class HeaderCellButtonRenderer : GridStaticCellRenderer
{
HeaderCellButton m_headerButton;

public HeaderCellButtonRenderer(GridControlBase grid, GridCellModelBase cellModel)
: base(grid, cellModel)
{
m_headerButton = new HeaderCellButton(this);
AddButton(m_headerButton);
m_headerButton.Interior = new BrushInfo(System.Drawing.SystemColors.ButtonFace);
m_headerButton.Bounds = new Rectangle(new Point(0, 0),
new Size(cellModel.GetCellSize(0, 1).Width / 2,
cellModel.GetCellSize(0, 1).Height));
m_headerButton.Graphics = grid.CreateGraphics();
m_headerButton.ButtonState = ButtonState.Normal;
m_headerButton.GridStyleInfo = new GridStyleInfo();
m_headerButton.Draw(1, 1);
}

protected override Rectangle OnLayout(int rowIndex, int colIndex, GridStyleInfo style, Rectangle innerBounds, Rectangle[] buttonsBounds)
{
TraceUtil.TraceCurrentMethodInfo(rowIndex, colIndex, style, innerBounds, buttonsBounds);

// Here you specify where the button should be drawn within the cell.
Rectangle rightArea = Rectangle.FromLTRB(innerBounds.Right - 50, innerBounds.Top, innerBounds.Right, innerBounds.Bottom);
buttonsBounds[0] = GridUtil.CenterInRect(rightArea, new Size(30, 20));

// Here you return the area where the text should be drawn/edited.
innerBounds.Width -= 20;
return innerBounds;
}
}
>>>>>>>>>>Code Snippet<<<<<<<<<<<<

Kindly let us know if you need any further assistance.
Have a nice day.

Best regards,
Madhan


code19.zip

[Daniel Dusek]

Hi,
thank you for the code. It helped, but it did not solved my problem completly. What I need is the first collumn header devided into two equally looking parts. The parts look like buttons, the first part is the newly add button, the second part is the rest of the collumn header. What I have reached so far is not what I want. The first, newly added button is not raised everytime, and it does not look to be equally high like the rest of the collumn header.

So how to devide the collumn header into two equally looking parts?

Thank you! Regads Dan

--

>Hi Dan,

Thank you for being patience.

Issue 1:
Resize the button

Solution:
You can resize the button by override the OnLayout method of the renderer class. In the method, the required position and size can be specified to draw the button in the required size inside the cell. Please refer to the code snippet below for more details.

Issue 2:
To place the button in a certain position within the collumn-header

Solution:
Please refer to the following code snippet demonstrates the grid being drawn in the required position inside the cell by override the OnLayout method of the renderer class.

>>>>>>>>>>Code Snippet<<<<<<<<<<<<
public class HeaderCellButtonRenderer : GridStaticCellRenderer
{
HeaderCellButton m_headerButton;

public HeaderCellButtonRenderer(GridControlBase grid, GridCellModelBase cellModel)
: base(grid, cellModel)
{
m_headerButton = new HeaderCellButton(this);
AddButton(m_headerButton);
m_headerButton.Interior = new BrushInfo(System.Drawing.SystemColors.ButtonFace);
m_headerButton.Bounds = new Rectangle(new Point(0, 0),
new Size(cellModel.GetCellSize(0, 1).Width / 2,
cellModel.GetCellSize(0, 1).Height));
m_headerButton.Graphics = grid.CreateGraphics();
m_headerButton.ButtonState = ButtonState.Normal;
m_headerButton.GridStyleInfo = new GridStyleInfo();
m_headerButton.Draw(1, 1);
}

protected override Rectangle OnLayout(int rowIndex, int colIndex, GridStyleInfo style, Rectangle innerBounds, Rectangle[] buttonsBounds)
{
TraceUtil.TraceCurrentMethodInfo(rowIndex, colIndex, style, innerBounds, buttonsBounds);

// Here you specify where the button should be drawn within the cell.
Rectangle rightArea = Rectangle.FromLTRB(innerBounds.Right - 50, innerBounds.Top, innerBounds.Right, innerBounds.Bottom);
buttonsBounds[0] = GridUtil.CenterInRect(rightArea, new Size(30, 20));

// Here you return the area where the text should be drawn/edited.
innerBounds.Width -= 20;
return innerBounds;
}
}
>>>>>>>>>>Code Snippet<<<<<<<<<<<<

Kindly let us know if you need any further assistance.
Have a nice day.

Best regards,
Madhan


code20.zip

[Administrator]

Hi Dan,

Here is a minimal sample that tells you "How to split the ColumnHeader into tow equal part and add a button to the toppart of the column header?". Please try this sample and let me know if this helps.

Best regards,
Haneef

[Daniel Dusek]

Hi Haneef,
thank you for the code sample. It is not what I want :-). I send a jpeg where you can see what I need to do. Regards Dan

ColHeaderSecondButton.zip

[Administrator]

Hi Dan,

The DrawCell event is generally used to add some ornament to a standard cell, or to allow you to draw every thing. Please try this sample and let me know if this helps

private void gridDataBoundGrid1_DrawCell(object sender, GridDrawCellEventArgs e)
{
if( e.Style.CellType =="ColumnHeaderCell")
{e.Cancel = true;

Rectangle LRect = new Rectangle( e.Bounds.X,e.Bounds.Y,e.Bounds.Width / 2,e.Bounds.Height);
string HeaderText = e.Style.Text;
e.Style.Text =String.Empty ;
e.Renderer.Draw(e.Graphics,LRect,e.RowIndex,e.ColIndex,e.Style );

e.Style.Text = HeaderText;
Rectangle RRect = new Rectangle( e.Bounds.X + e.Bounds.Width / 2,e.Bounds.Y,e.Bounds.Width / 2 -1,e.Bounds.Height);
e.Renderer.Draw(e.Graphics,RRect,e.RowIndex,e.ColIndex,e.Style);
}
}

Best regards,
Haneef

[Daniel Dusek]

Hi Haneef,
yes this looks quite OK, but now I have another question : how can I catch the click-event on both buttons in one collumn header? The first part must show a menu, the second part must behave like a normal collumn header. Regards Dan.

[Administrator]

Hi Dan,

Here is a code snippet that show you "How to get the first part of column header click in a grid" .Please try the code snippet and let me know if this helps.

private void gridDataBoundGrid1_CellClick(object sender, GridCellClickEventArgs e)
{
if( e.RowIndex == 0 )
{
GridCellRendererBase crBase = (sender as GridDataBoundGrid ).GetCellRenderer(e.RowIndex,e.ColIndex);

Rectangle cellRectangle = crBase.GetCellBoundsCore(e.RowIndex,e.ColIndex);
Rectangle LRect = new Rectangle( cellRectangle.X,cellRectangle.Y,cellRectangle.Width / 2,cellRectangle.Height);
Rectangle PRect = new Rectangle(e.MouseEventArgs.X,e.MouseEventArgs.Y,1,1);

if( LRect.IntersectsWith( PRect ) )
MessageBox.Show("ColumnHeader PushButton Clicked!!!");
}
}

Best regards,
Haneef

[Daniel Dusek]

Hi Haneef,
yes this helped me! I made some changes, but the principle is OK and it works now. Thank you very much :-). Regards Dan