Library WinForms NextSuite .NET Controls NextGrid .NET Articles and tutorials Custom drawing

Custom drawing

If you need to draw cell within grid in more specific style you may use custom drawing capabilities of NextGrid.

By default, each Cell within Column is drawn in same way, and by walking trough same steps. This may be changed and controlled by developer to create stunning user interfaces.

In order to master custom drawing in NextGrid cells you need to know a little bit behind the scene about how cell is drawn.

1. Cell drawing steps

Drawing steps

  1. First, Cell's background is painted. Background is usually painted in solid Color. If Cell is not selected, it is painted using Color from BackColor property of Cell. If cell is selected, it is painted in Color specified by SelectionColor property of NextGrid. Background painting is same for all column types.
  1. After Cell's background is painted user may implement optional DrawCellBackground event to provide own drawing for background (for example, gradient or pattern may be drawn instead default solid background).


  1. Then, Padding property of Column is applied and content of Cell is drawn. Every column is responsible for drawing Cell in own style (Text, Check-box, Progress Bar etc.).
  1. Finally if developer want to alter (or completely replace default Column's drawing), he need to implement DrawCellContent event of NextGrid class.

2. Enabling/disabling Layers

Developer may decide which steps to include while painting cells within Column, and which not. This is controlled by DrawingOptions property of Column.

As shown in diagram above, every step may be imagined as layer, similar to layer used in Photoshop (or other graphic software). Developer is able to enable or disable specific layers in order to finely tune drawing of cell. How to decide which layer to enable and which not?

If you want to completely draw Cell's background from scratch, then you don't need default Background layer. In this case you may set Background flag to False. Leaving background layer enabled will only cause unnecessary flickering since background is completely painted twice.

But, if you want to alter existing background you will need to leave default background layer enabled.

Content layer is usually always enabled and eventually altered with custom drawing code (e.g. some indicator like square, triangle, or bitmap is added). But sometime, you will need to completely custom draw your content. In this case is best to use most basic nxTextColumn and do your drawing.

3. Custom drawing events

By setting Custom flag in DrawingOptions property to true (default false), custom drawing is enabled and DrawCellBackground and DrawCellContent event are called while Cell's painting. This events are place where you place your custom drawing code.

Both events include exact same parameters. This parameters will tell you location of Cell being drawn, Cell's current state (selected, focused etc.), Rectangle where you are allowed to draw and provide you access to Graphics object (which you use for calling methods such as FillRectangle, DrawLine...).

private void nextGrid1_DrawCellContent(object sender, PaintEventArgs e, nxCellPaintEventArgs ce)
    if (nextGrid1.CellExist(ce.X, ce.Y))

Sign in