Changing the Icon and Tooltip in a DevExpress Grid

Using tools such as DevExpress can greatly speed up the process of developing a web application. An example of this is the DevExpress data grid. By simply adding an allowDeleting property, the grid will automatically add a Delete button that will make a DELETE http request to the resource that the data grid is displaying. A drawback, however, is if you want to customize this icon and the tooltip associated with it.

As a real world example, I am working on an application where the business rule has changed. Instead of deleting the record, we want to simply change a flag on the database table (called IsActive) from true to false. Now because of this, we want to change the default icon from the trashcan icon to something else, and change the tooltip on hover from saying "Delete" to "Mark as Inactive".

NOTE: The handling of changing the functionality from deleting the record to just changing the flag will be handled in the server-side code, and won't be discussed in this article.

This proved quite tricky, but I have a simple solution to both of these issues:

Change the Icon

Because the icon is added at runtime, the only way I found to change the icon is with a simple change in the CSS. If you check out the grid in your developer tools, you'll notice that the icon is generated by a CSS content property.

Trash can icon is generated by content "\f03e"

Trash can icon is generated by content "\f03e"

Check out the available icons from DevExpress, and modify the CSS for your component with an updated content. You will have to use your developer tools on their website in order to figure out the content code they use.

DevExpress Icons

Update the CSS

Update the Tooltip

This issue is less of a hack than the icon. This is actually documented, but the wording they chose makes it not seem like it is the right place to make the change. By setting the deleteRow property in the data grid's text element, you can specify the tooltip for the icon.

DevExpress Documentation on the deleteRow property


Update the Tooltip

By adding the deleteRow property, we can specify what the tooltip will be on the delete icon in the data grid. confirmDeleteMessage is also used here to change the confirmation message when the user clicks the button.