Give buttons an active state when selecting a row in a datagrid

In order to increase the user experience I'd like to highlight buttons that are only clickable when a row in a datagrid is selected. e.g.: The color of the edit button should change once a user select a row in the datagrid.
3 answers

An option could be to use the 'datatables' widget from the appstore. The widget contains this functionality. 


In case this is a viable option for you:

You can use a listening DataView and put your buttons in that DataView. If nothing is selected the buttons should be disabled.


Hi Daan,

If you are just interested in look and feel and not neccesarily in functionality you can do this with some custom css.

To do this I used the fact that  in data grids when a row is selected the entire row element <tr .. /> gets the "selected" class.

You can put this in a css  selector to apply style to only the rows that are selected

Just a quick example, assuming that your grid id is #myDataGrid

#myDataGrid tr.selected button {
   opacity: 0.3;


I hope this helps,