ui-grid implement show div on-mousehover on the row

Question

I have just seen this new thing in GMAIL, where few buttons appear on row mouseover. Here's the image of the same.

I am using angularjs with ui-grid plugin for grid purposes. Is there a way I can implement the same in my project. Please, if possible, guide me and show me the direction to achieve that.

Answer 1

You need to implement custom row template which contains handlers for ng-mouseenter and ng-mouseleave, like this:

<div data-row="row" ng-mouseenter="isOver = true" ng-mouseleave="isOver = false">

    <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
         class="ui-grid-cell"
         ui-grid-cell
         ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'">
    </div>

    <div id="myButtons" ng-show="isOver">
        <!-- your buttons here -->
    </div>

</div

Then content of myButtons div is shown on hover, you just need to style it.