Problem with OnRowClick and Images

10 posts, 0 answers
  1. Caesar
    Caesar avatar
    59 posts
    Member since:
    Aug 2008

    Posted 06 Sep 2010 Link to this post

    Hello!

    In the RadGrid, I use image columns a lot, but there seems to be a problem when combining with OnRowClick.
    When clicking on the image, no row click happens!

    Simplified sample:
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication4.WebForm1" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <script runat="server">
            Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
                Dim dt As New System.Data.DataTable()
                dt.Columns.Add("Col1", GetType(String))
                dt.Rows.Add({"Row1"})
                aaa.DataSource = dt
                aaa.DataBind()
            End Sub
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ccc" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadGrid ID="aaa" runat="server">
                <ClientSettings>
                    <ClientEvents OnRowClick="function(){alert('Clicked');}" />
                </ClientSettings>
                <MasterTableView>
                    <Columns>
                        <telerik:GridImageColumn ImageUrl="go.gif">
                        </telerik:GridImageColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </div>
        </form>
    </body>
    </html>


    Regards
    Rikard
  2. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 09 Sep 2010 Link to this post

    Hi Caesar,

    The onclick DOM event is not propagated to the grid rows through images in the table cells. To enable this scenario, you need to show the images using CSS as the background-image of some HTML element in the cell:

    <div style='background-image:url(go.gif);width:40px;height:40px;'>
    </div>

    Veli
    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
  4. Caesar
    Caesar avatar
    59 posts
    Member since:
    Aug 2008

    Posted 09 Sep 2010 Link to this post

    Hello!

    So, you are saying that we can't use the built-in GridImageColumn?
    I assume that this is a bug that will be fixed?

    Regards
    Rikard
  5. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 09 Sep 2010 Link to this post

    Hello Caesar,

    An <img> tag in a table cell can represent an image button in RadGrid, therefore clicks on <img> tags are not propagated. This is by design.

    Greetings,
    Veli
    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
  6. Caesar
    Caesar avatar
    59 posts
    Member since:
    Aug 2008

    Posted 09 Sep 2010 Link to this post

    Hello!

    So, you are not recommending using the GridImageColumn at all then?
    We are using that column type in about 100 places in our product, and you are saying that we should replace all this with TemplateColumns that are generating div:s with background-images instead?
    In this case we need to know the sizes of all images also!

    My opinion is that if it is NOT an image button, I think that it should propagate the event.
    Can't you check this in the RadGrid script?

    Regards
    Rikard

  7. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 10 Sep 2010 Link to this post

    Hello Caesar,

    If you need to enable mouse events from images to propagate up the container, you can add the following CSS on your page after the RadGrid definition:

    Telerik.Web.UI.RadGrid.prototype._canRiseRowEvent = function (e)
    {
        var el = Telerik.Web.UI.Grid.GetCurrentElement(e);
        var exclude = "input,select,option,button,a,textarea";
     
        if (!(el && el.tagName && exclude.indexOf(el.tagName.toLowerCase()) < 0))
        {
            return false;
        }
     
        if (this.get_masterTableView() && !Telerik.Web.UI.Grid.IsChildOf(el, this.get_masterTableView().get_element()))
            return false;
     
        return true;
    }
     
    Telerik.Web.UI.GridSelection.prototype._shouldRaiseRowEvent = function (el)
    {
        var isClientSelectCheckBox = (el.tagName.toLowerCase() == "input" &&
                                        el.type.toLowerCase() == "checkbox" &&
                                        el.id && el.id.indexOf("SelectCheckBox") != -1);
     
        var exclude = "input,select,option,button,a,textarea";
     
        return !isClientSelectCheckBox && exclude.indexOf(el.tagName.toLowerCase()) < 0;
    }

    Attaching a test page to demonstrate this script enables row selection through images in the grid.

    Greetings,
    Veli
    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
  8. Caesar
    Caesar avatar
    59 posts
    Member since:
    Aug 2008

    Posted 13 Sep 2010 Link to this post

    Hello!

    Well, this works for now, but replacing your internal javascript-functions doesn't feel like a good solution...
    If you release a new version with other changes/bug-fixes to these functions, we wont get that changes/bug-fixes without manually correcting this again!
    Do you have any plans for solving this correctly in a future version?

    Regards
    Rikard
  9. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 13 Sep 2010 Link to this post

    Hello Caesar,

    As I stated previously, preventing clicks through images in grid rows is a design decision in RadGrid, and we do not currently have plans on changing this behavior. The approach I suggested, even though unsafely overwriting internal functions, is a choice that works around this limitation.

    Veli
    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
  10. Kellie
    Kellie avatar
    29 posts
    Member since:
    Feb 2009

    Posted 15 Mar 2011 Link to this post

    The following answer has resolved a challenge I had with not being able to select a row by clicking on an <Img> in the row:

    <div style='background-image:url(go.gif);width:40px;height:40px;'>
    </div>

    Thank you!
  11. Farooq
    Farooq avatar
    5 posts
    Member since:
    Nov 2012

    Posted 07 Nov 2012 Link to this post

    Thanks Veli, but the problem still remains that why not allow row selection on gridimagecolumn. I hope telerik design team reconsider their stance on this.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017