GridImageColumn OnClick Event

2 posts, 1 answers
  1. Allan
    Allan avatar
    121 posts
    Member since:
    Jun 2008

    Posted 23 Oct 2010 Link to this post

    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.
  2. Answer
    Marin
    Admin
    Marin avatar
    1044 posts

    Posted 27 Oct 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top