Display Icon with click event in the grid

[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.

Thanks & Regards,

Sampath

[Georgi]

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

[Lakshman]

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.

[Georgi]

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