Alan Thomas Alan Thomas - 2 months ago 11
ASP.NET (C#) Question

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

I have a Telerik

RadGrid
with several columns, where one of them in an image using the
GridImageColumn
tag. The image
src
is assigned a link pointing to a CDN location and is scaled down to fit in the
RadGrid
. 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
img
element generated by the
GridImageColumn
? If I can just get a handle on that tag, I can add whatever handlers I need to it.

Answer

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

Add the following setting to the RadGrid element:

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

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){
    window.open(e.srcElement.currentSrc, "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.