adding click event to GridBinaryImageColumn

4 posts, 0 answers
  1. ToltingColtAcres
    ToltingColtAcres avatar
    92 posts
    Member since:
    Nov 2010

    Posted 16 Sep 2018 Link to this post

    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?

  2. Attila Antal
    Admin
    Attila Antal avatar
    246 posts

    Posted 21 Sep 2018 Link to this post

    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.
  3. ToltingColtAcres
    ToltingColtAcres avatar
    92 posts
    Member since:
    Nov 2010

    Posted 21 Sep 2018 in reply to Attila Antal Link to this post

    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;
            }
        }
    }
  4. Attila Antal
    Admin
    Attila Antal avatar
    246 posts

    Posted 26 Sep 2018 Link to this post

    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.
Back to Top