Displaying a button in a DevExpress DataGrid cell

This post is a perfect example of the primary purpose of this blog: to document obscure and difficult-to-remember steps to accomplish tasks in SQL Server or other platforms that I use for my work. Since coming to Custom Data Systems, Inc I have become a VB.Net developer, and in that capacity I have used a third-party development toolkit called DevExpress. In general, this toolkit makes it easy to do complex development tasks in Windows forms and in self-service business intelligence using a VB.Net context. But there is one task I have had to do a couple of times that I have wasted at least a couple of hours each time trying to figure out how to do: add a button to a data grid column. So to make this easier on myself the next time I have to do this, here are the necessary changes to a column definition to make it into a button:

1. Run the Grid Designer tool for the data grid.
2. Make sure the selected view is the one that should have a button in a column.
3. Switch to the Columns page.
4. Click on the column you want to change into a button.
5. Click the drop-down option for the ColumnEdit property and choose New > ButtonEdit.
6. Drill down under the ColumnEdit property family under Buttons > 0 - Ellipsis.
7. Find the Image property and click the [...] button that appears when you give focus to the property.
8. Switch to the DX Image Gallery tab and find an icon suitable for the context. This is what the button will look like. Click the icon and then click OK.
9. Find the Kind property, which is set to Ellipsis by default, and change it to Glyph.
10. Scroll down to the bottom of the ColumnEdit family of properties and find the TextEditStyle and change it to DisableTextEditor.
11. Scroll down further in the main property list of the column. Find ShowButtonMode, and change it to ShowAlways.

That should do it. Seems simple, eh? But I forget every time to change the button "kind" to glyph, and without that one change, the button never shows up with the selected image. So hopefully the next time I have to put a button into a grid, I'll remember that I wrote this blog and will come here to remember all the steps. And if you work with DevExpress too, maybe it will help you. :-)

P.S. The column with the button must be editable (AllowEdit = True) in order for the user to be able to click on the button and trigger the repository item's "Click" event.  In a recent project I had turned the grid's master Editable property to False and was using the MouseDown event of the grid control instead of the  Click event of the repository item. But this caused the user to have to click twice on a tab control to move from one tab to the other whenever they had previously clicked on a button. So avoid MouseDown and use the Click event, making sure both the grid control as a whole and the individual column are both set to be editable.