In Kendo grid need to display 3 icons visible on mouse hover

[Sampathkumar]

Hi All,

I want to display an icon in the kendo grid at the last with click event functionality ,Kindly provide me a sample .Please find the attached screen shot how it should be.

In the grid display my code is displayed below

  columns.Bound(p => p.CampaignName).Title("Campaign Name").Width(120).HtmlAttributes(new { @class= "text-left" });
  columns.Bound(p => p.CampaignType).Title("Channel Type").Width(100).HtmlAttributes(new { @class = "text-left" });
  columns.Bound(p => p.LeadType).Title("Lead Type").Width(60).HtmlAttributes(new { @class = "text-left" });

  ///Here display images/icons code///

Kindly help me to achieve the above scenario

Thanks & Regards,

Sampath

[Preslav]

Hello Sampath,

To achieve the desired behavior, I would suggest adding custom commands to the Grid. For example, check this demo:

• https://demos.telerik.com/aspnet-mvc/grid/custom-command

To add icons to the commands, follow this approach:

• https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-add-kendo-ui-icons-to-custom-command-buttons

Finally, to display these icons only on hover, implement the required CSS. For example, it could look like:

<style>
    tr > td.k-command-cell > a.k-button{
        display: none;
    }

    tr:hover > td.k-command-cell > a.k-button {
        display: inline-flex;
    }
</style>

For your convenience, I am attaching a sample MVC project that demonstrates the above.

I hope this helps.


Regards,
Preslav
Progress Telerik