GridImageColumn OnClick Event

[Allan]

I have a GridImageColumn. The image that is displayed is a thumbnail. I would like the user to be able to click the thumbnail to see a larger image. I have the Java to open the image in a new modal window. I have set the clientevent onrowdblclick to open the image. However, if the actuall thumbnail is clicked, the event does not fire. How can I make the onclick event fire when the thumbnail is clicked?

Here is what I have attempted so far with no luck.

<telerik:GridImageColumn AlternateText="Thumbnail"
DataImageUrlFields="FilePath, ThumbnailName" DataImageUrlFormatString="{0}/{1}"
DataType="System.String" FooterText="ImageColumn footer" HeaderText=""
ImageAlign="Middle" UniqueName="vehicleimage">
<HeaderStyle Width="75px" />
</telerik:GridImageColumn>

Protected Sub rg_VehicleImages_ItemCreated(ByVal sender As Object, ByVal e As GridItemEventArgs) Handles rg_VehicleImages.ItemCreated
    If TypeOf e.Item Is GridDataItem Then
        Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)
        Dim deleteBtn As LinkButton = DirectCast(item.FindControl("AutoGeneratedDeleteButton"), LinkButton)
        deleteBtn.Attributes.Add("onclick", "return confirm('Are you sure you want to delete this image?')")
    End If
    If TypeOf e.Item Is GridDataItem Then
        Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)
        Dim cell As TableCell = item("vehicleimage")
        Dim img As Image = TryCast(cell.Controls(0), Image)
        img.Attributes.Add("onclick", "rowclick")
    End If
End Sub

Any help much appreciated.

[Marin]

Hi Allan,

You can attach a client script on the double click event for the image itself by handling the client-side rowcreated event in the following way:

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

and the javascript code:

function RowCreated(sender, args) {
            args.get_item().get_cell('imageColumnName').firstChild.ondblclick = imgDblclick;
        }
        function imgDblclick() {
            alert('Image double clicked!');
        }

Further information on the client side API of the grid can be found here.


Regards,
Marin
the Telerik team