This is a migrated thread and some comments may be shown as answers.

GridImageColumn OnClick Event

1 Answer 208 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Allan
Top achievements
Rank 2
Allan asked on 23 Oct 2010, 05:18 PM
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.

1 Answer, 1 is accepted

Sort by
0
Accepted
Marin
Telerik team
answered on 27 Oct 2010, 02:39 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Allan
Top achievements
Rank 2
Answers by
Marin
Telerik team
Share this question
or