This is a migrated thread and some comments may be shown as answers.

Problem with OnRowClick and Images

9 Answers 130 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Caesar asked on 06 Sep 2010, 12:57 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

9 Answers, 1 is accepted

answered on 10 Sep 2010, 01:51 PM

clickthroughimage.zip

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Problem with OnRowClick and Images

9 Answers, 1 is accepted