This is a migrated thread and some comments may be shown as answers.
Display Icon with click event in the grid
3 Answers 168 Views
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:07 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.

Thanks & Regards,

Sampath

3 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 28 Aug 2018, 11:59 AM
Hi Sampathkumar,

A possible solution is to add a template column which contains the icon and add a click handler to the element of the icon.

e.g.

// column
 
  columns.Template(@<text></text>).ClientTemplate(" <span class='k-icon k-i-information' onclick='myHandler()'></span>");
 
// handler
 
    function myHandler() {
        alert('icon pressed!')
    }

For your convenience I am attaching a small sample which demonstrates the above approach.


Regards,
Georgi
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.

0
Lakshman
Top achievements
Rank 1
answered on 17 May 2020, 06:13 PM

Hi Georgi,

Thanks for your solution,I need this kind of solution only, however I need row details as well in the same function to pass to pop screen when click on myHandler()

Could you please help out in this case

Kind Regards,

Lakshman.

0
Georgi
Telerik team
answered on 19 May 2020, 01:42 PM

Hello Lakshman,

You could get the underlying model of the current row using the grid.dataItem method.

e.g.

// column
 
  columns.Template(@<text></text>).ClientTemplate(" <span class='k-icon k-i-information' onclick='myHandler(event)'></span>");
 
// handler
 
    function myHandler(e) {
       var grid = $('#grid').data('kendoGrid');
       var dataItem = grid.dataItem($(e.target).parents('tr')); // underlying model
    }

Regards,
Georgi
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Sampathkumar
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Lakshman
Top achievements
Rank 1
Share this question
or