Row hover action bar

[Carl]

Hi, 

I'm looking to implement an "action bar" when a user mouse hover a row. Just like in gmail or outlook365 when a user mouse is hover a message, icons appear to delete, mark as read, ...

 

All I found as of now, is to reserve a column and with jquery/css show/hide the icons. I don't want to reserve a specific column for that. I want it to be on either at the beginning (left) or at the end (right) of a row and on top of the row. I attached an image to demonstrate what I want to do.

 

An ideas ?

 

Thanks

[Alex Hajigeorgieva]

Hi, Carl,

You can achieve the desired outcome with a template for the column which includes the icons and some CSS rules:

https://dojo.telerik.com/@bubblemaster/IcIzamUW

<style>
    .icons {
      display:none;
    }
    tr td:hover .icons {
      display:inline;
    }
  </style>

// grid columns
columns: [{
 field: "name" ,
 template: "#=name# <span class='icons' style='float:right'><span class='k-icon k-i-trash'></span> <span class='k-icon k-i-email'></span> <span class='k-icon k-i-warning'></span></span>"
}]

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Carl]

Wonderful !

 

Thanks a lot

[Stephane]

I share another solution I found for this problem. I use a tooltip to show the action bar: https://dojo.telerik.com/@kakone/oBusocud

 

[Alex Hajigeorgieva]

Hi, Stephane,

Thank you very much for sharing your solution with the Kendo UI community. 

It looks great!

Regards,
Alex Hajigeorgieva
Progress Telerik