WinForms Grid – How to Custom Paint Row Indicator Icons

The Indicator Row is a region displayed at the left edge of the grid view which indicates the state of the focused row.

The Row Indicator can display an icon when…

  • The Row has focus
  • The focused row is in edit mode
  • The row is modified
  • The row is the New Item or the Auto Filter Row
  • And when the focused or non-focused row contains errors.

Additionally, the indicator row can also display an icon to maximize and restore a detail view.

In this video, we’ll demonstrate how easy it is to custom paint the indicator row by drawing a string on it.

So let’s get started…

  1. Starting from a new WinForms application, I drop an XtraGrid control onto the form and dock it to its parent.
  2. I’ll bind the grid to a data source by invoking its smart tag and clicking the “Add Project Data Source” link.
  3. I’ll use an existing Connection String for the CarsDB database.
  4. I click “Next” and select the “Cars” Table that will supply data to the grid.
  5. Finally, I click finish to complete the wizard.
  6. I run the Grid’s designer and switch to the columns page to remove the unnecessary columns for this example.
  7. I also need to adjust the width of the indicator row so that our string fits inside it.
  8. To do this, I switch to the Feature Browser, expand the “Visual Elements” node and select the “Indicator” item.
  9. On the right, I set its Width property to 60.
  10. And I’m done.
  11. I close the designer.
  12. Now, I’m going to create a handler for the grid view’s CustomDrawRowIndicator event.
  13. This event is raised each time a row indicator cell needs to be repainted.
  14. In code view, I add a reference to the following namespace.
  15. Then I’ll create a Boolean field that will specify whether to draw the default indicator glyphs.
  16. Back inside the event handler, I add the following code.
  17. Here, I check to see whether the cell indicator belongs to a data row.
  18. For example, if the cell indicator is next to a group row, we will not custom paint it.
  19. And finally, for the purposes of this lesson, I want to display the text “Row” followed by the data row number.
  20. And I’m done!
  21. I run the application to see the results.
  22. And now, you’ll see that the indicator rows are displaying my custom text.
  23. Additionally, the glyphs are also drawn when I select each row. This is because we did not set the Handled property within the event handler; therefore our custom painting is being applied in addition to the default painting provided by the XtraGrid.
  24. I group by the “HP” column and you’ll notice that the row indicators belonging to the group rows are empty, while the data rows continue to display my string.

Thanks for watching and thank you for choosing DevExpress!