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

1
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.
asked
3 answers
1

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

answered
1

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.

answered
1

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,

Andrej

answered