Can I draw a Circle in a DataGridViewCell

0
0

Hi,

I have a DataGridView which I am populating from a BindingList<MyCustomClass> which implements INotifyPropertyChanged to keep everything up to date.

Inside my custom Class I have a Background Color and I attach to the DataBindingComplete event and set the BackGround Color Of a Specific Cell.

foreach (var row in MyGrid.Rows) {

   var rowTag = row.DataBoundItem as MyCustomClass;

   row.Cells[dgvcStatusCell].Style.BackColor = rowTag.BackGroundColor;

}

This all works perfectly.

If possible, I would like to extend this further and rather than color the entire cell, I would like to draw a circle in that cell and fill the circle with the specified color.  the circle color will change (as it represents a status) so I would like to bind it to the BackGround Color of the BindingList as this will automatically get updated via a custom WebSocket message.

In another custom UserControl I have, I was able to create a circle cheaply by setting a label and inside the Labels CSS-Style set border-radius: 12px; which works well and serves my purpose.

I’m not exactly sure where I should begin with creating the circle in the cell and any pointers or samples would be appreciated.

Thanks,

Brayden.

 

 

 

  • Brayden McLachlan
    One other thing I forgot to mention is the User has the ability to set the height of the DataGridView Row via a user profile setting (this works perfectly) so I would like it to be not just a fixed size, but grow and shink if the User changes the Row height Value. In a perfect world like a Padding of 5 pixels so it is slightly off the top and bottom of the cell border.
  • You must to post comments
0
0

When you set the RowHeight that’s the height, you’d have to add the padding. Otherwise you can add internal padding in the theme or a theme mixin.

You can draw in any cell using the CellPaint event. It fires for cells that have the UserPaint property set to true.

  • You must to post comments
0
0

See attached modified sample. You can simply use an HTML string. I added a StatusColorString property to the data source and set AllowHtml = true to the column that should show the circle. There is no flickering and you can display anything you can render with HTML.

 

 public string StatusColorString
 {
   get
   {
     return $"<div style='width:24px;height:24px;border-radius:100%;background-color:{ColorTranslator.ToHtml(this.StatusColor)}'></div>";
   }
 }
Attachment
  • You must to post comments
0
0

Sample App

Attachment
  • You must to post comments
0
0

Forgot, you can also set custom CSS for any cell or row by assigning the CssClass or CssStyle properties of a DataGridViewCellStyle associated with the cell or row or grid.

  • Brayden McLachlan
    Thanks Luca. Technically that works perfectly however I have a timer which updates the time for how long the event has been active for so it is counting up every second. There is another column which shows this time. So the cell paint event is firing every second and whilst working. i get alot of flickering (probably to be expected) as the circle is being continually redrawn. Would there be any other approaches such as a custom control which i can databind to the List? Whilst the time will always be updating every second for the other column, the circle color may only change Once or Twice during its lifecycle before the row is removed. Let me know if you would like a small sample app Thanks, Brayden.
  • You must to post comments
Showing 4 results
Your Answer

Please first to submit.