Alan Thomas Alan Thomas - 4 months ago 19
ASP.NET (C#) Question

How can I make Telerik GridImageColumn follow a link on click?

I have a Telerik

with several columns, where one of them in an image using the
tag. The image
is assigned a link pointing to a CDN location and is scaled down to fit in the
. When the image is clicked, I want it to open the full-size image in a new tab/window. How can I do this?

On a related note: how can I target (with jQuery or otherwise) the
element generated by the
? If I can just get a handle on that tag, I can add whatever handlers I need to it.


I've found the solution after much searching and a little experimentation.

Add the following setting to the RadGrid element:

  <ClientEvents OnRowCreated="rowCreated"></ClientEvents>

This will call the rowCreated client function each time a row is created in the RadGrid.

Also, add the following client scripts:

function rowCreated(sender, args){
    var img = args.get_item().get_cell('Image').firstChild.onclick = imgClick;

function imgClick(e){, "name", 'width=e.srcElement.naturalWidth,height=e.srcElement.naturalHeight,resizable=1');

The parameter being passed into get_cell() is the value of the UniqueName attribute of the telerik:GridImageColumn that should be targeted. Using the firstChild of that element will target the img tag. Attach the appropriate onClick handler and open a new window with the handler.