This is a migrated thread and some comments may be shown as answers.

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

1 Answer 441 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sampathkumar
Top achievements
Rank 1
Sampathkumar asked on 24 Aug 2018, 01:52 PM

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

1 Answer, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 28 Aug 2018, 11:48 AM
Hello Sampath,

To achieve the desired behavior, I would suggest adding custom commands to the Grid. For example, check this demo:
To add icons to the commands, follow this approach:
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Sampathkumar
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Share this question
or