adding click event to GridBinaryImageColumn

[ToltingColtAcres]

Given the following definition in a Radgrid column:

 

<telerik:GridBinaryImageColumn DataField="ReceiptThumb" HeaderText="Receipt Image" UniqueName="ReceiptThumb" ResizeMode="Fit" ImageWidth="100" ImageHeight="100"  />

 

What would be the best way to add a click event which would either 1) open a new window in a _blank target frame, or 2) open a radwindow on the same page -- to allow a full-size image of the thumbnail displayed in the grid to display?

... while not disturbing the in-place edit form insert/edit functionality?

[Attila Antal]

Hi,

Which is best, is relative to the environment, rules, habits, etc. You can add the click event to the cell either on the server or client side, you choose.

Client-Side

If the click needs to be added at loading time, Page load might be too early, sometimes the grid isn't ready yet. Best is to use the GridCreated client-side event of RadGrid. This event fires when rendering the grid is over.

There are two approaches you can try, one of which is using jQuery to find the cells then add the click event, or using the RadGrid's client-side APIs to loop through the items and find the cell.
RadGrid client-side API.

<script type="text/javascript">
    function OnGridCreated(sender, args) {
        var dataItems = sender.MasterTableView.get_dataItems(); // collection of Grid row objects

        for (var i = 0; i < dataItems.length; i++) {
            $(dataItems[i].get_cell("ReceiptThumb")).on('click', cellClick);
        }
    }
</script>

Using JQuery within the GridCreated event handler. To have proper selectors, add a CSS class name to the GridBinaryImageColumn using the ItemStyle-CssClass property.

<telerik:GridBinaryImageColumn DataField="ReceiptThumb" HeaderText="Receipt Image" UniqueName="ReceiptThumb" ResizeMode="Fit" ImageWidth="100" ImageHeight="100" ItemStyle-CssClass="ImageCell" />

JavaScript

<script type="text/javascript">
    function OnGridCreated(sender, args) {
        $('.RadGrid .rgMasterTable .ImageCell').on('click', cellClick);
    }
</script>

Server-Side using the ItemCreated event of RadGrid. (For more information, please check out the Accessing Cells and Rows article)

C#

protected void RadGrid_Receipts_ItemCreated(object sender, GridItemEventArgs e)
{
    if(e.Item is GridDataItem)
    {
        GridDataItem dataItem = (GridDataItem)e.Item;
        dataItem["ReceiptThumb"].Attributes.Add("onclick", "cellClick(event);");
    }
}

VB

Protected Sub RadGrid_Receipts_ItemCreated(ByVal sender As Object, ByVal e As GridItemEventArgs)
    If TypeOf e.Item Is GridDataItem Then
        Dim dataItem As GridDataItem = CType(e.Item, GridDataItem)
        dataItem("ReceiptThumb").Attributes.Add("onclick", "cellClick(event);")
    End If
End Sub

Finally, the cellClick event handler.

<script type="text/javascript">
    function cellClick(e) {
        console.log("Cell clicked");
    }
</script>

I hope this will help.

Kind regards,
Attila Antal
Progress Telerik

[ToltingColtAcres]

thanks. I took a slightly different approach. Bit of a hack, but, it worked

protected void RadGrid_ItemDataBound(object sender, GridItemEventArgs e)
{
        switch (e.Item.ToString())
        {
            case "Telerik.Web.UI.GridDataItem":
                GridDataItem item = (GridDataItem)e.Item;
                if (!item.IsInEditMode)
                {
                    RadBinaryImage img = (RadBinaryImage)item.Cells[4].Controls[0];
                    HyperLink h = new HyperLink();
                    h.NavigateUrl = "/ViewImage.aspx?ID=" + item.GetDataKeyValue("GUID").ToString();
                    h.Target = "_blank";
                    h.Controls.Add(img);
                    item.Cells[4].Controls.Clear();
                    item.Cells[4].Controls.Add(h);
                }
                break;
        }
    }
}

[Attila Antal]

Hi,

That is another way to go. Although it is not a good practice clearing controls as it may cause unexpected behavior at some point.

Also, accessing the row cells by index could cause problems if the column structure is changing. The index would no longer be valid and results in errors. Try accessing the cell by using the Column unique name.

Since there is no hyperlink, you can use the onclick attribute to assign a javascript function which will navigate to the desired url.

protected void RadGrid_ItemDataBound(object sender, GridItemEventArgs e)
{
    if(e.Item is GridDataItem && !e.Item.IsInEditMode)
    {
        GridDataItem item = (GridDataItem)e.Item;
        RadBinaryImage img = (RadBinaryImage)item["ColumnUniqueName"].Controls[0];
        img.Attributes.Add("onclick", "alert('Image was clicked!');");
    }
}

Kind regards,
Attila Antal
Progress Telerik