This is a migrated thread and some comments may be shown as answers.
adding click event to GridBinaryImageColumn
3 Answers 38 Views
This is a migrated thread and some comments may be shown as answers.
ToltingColtAcres
Top achievements
Rank 2
Iron
ToltingColtAcres asked on 17 Sep 2018, 02:05 AM

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?

3 Answers, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 21 Sep 2018, 08:55 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
ToltingColtAcres
Top achievements
Rank 2
Iron
answered on 21 Sep 2018, 03:45 PM
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;
        }
    }
}
0
Attila Antal
Telerik team
answered on 26 Sep 2018, 01:50 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
ToltingColtAcres
Top achievements
Rank 2
Iron
Answers by
Attila Antal
Telerik team
ToltingColtAcres
Top achievements
Rank 2
Iron
Share this question
or