image blocks client postback

[Jon]

When the following is set for a grid:

<ClientSettings EnablePostBackOnRowClick="true">

       <Selecting AllowRowSelect="true" />

</ClientSettings>

and an image is in a grid cell, clicking on the image does nothing.  Clicking in the grid cell outside of the image causes the row selection and postback as desired.

The image is not a button, it is just an image that represents a visual cue about the row of data for the user, in this case a picture of a lock.

The workaround we found in IE was to set the onclick of the image to onclick='this.parentElement.click();'

This causes the desired postback and row selection.

The problem?  We noticed that in Chrome this approach doesn't work.  I simply need  a way of causing the built in row selection and postback just as if the user clicked in the surrounding td of the image.

I can get the desired behavior in Chrome by setting  the image css pointer-events property to none.
Unfortunately, this disables all pointer behavior including tooltip popups.

[Richard]

Jon:

Your exact issue is covered in depth in the following forum thread:

GridBinaryImageColumn not working with OnRowClick client event 

It provides some viable solutions that should offer the cross-browser support you seek.

Cheers!

[Jon]

It's a similar issue but not exact.  I am not interested in a client side OnRowClick event.  I want the row that contains the image cell to be selected and cause a postback to the server, just like any other cell in the row does when the following is set:

<ClientSettings EnablePostBackOnRowClick="true">

       <Selecting AllowRowSelect="true" />

</ClientSettings>

I stepped through the client javascript given at the end of the thread mentioned.

 var args = new Telerik.Web.UI.GridDataItemEventArgs(row, e);               
 if(typeof(grid["raise_rowClick"]) == "function")
       grid["raise_rowClick"](args);

It is successfully executing but nothing happens.  I tried using
grid["raise_rowSelected"](args);
since the auto row select and postback is the behavior I need but this also was called but did not cause the row change and postback.

My workaround for now is to add style="pointer-events:none" to the img tag and to set the surrounding td element's tooltip to the required img tooltip.

I'm assuming all I need is the magic event sequences to raise on the grid to get the desired behavior of a full row select and autopostback.

Thanks for the help.

[Pavlina]

Hello Jon,

Please excuse us for the late replay.

In order to achieve your goal you could set the image as a background to DIV element to allow the user to select the row through it. Another possible approach is to use server-side ImageButton with CommandName="Select" although this will cause postback.

You could also select a row by adding an onclick event handler and make an Ajax Request to the server.

Please give these suggestions a try and let me know if one of them is applicable for you.

Kind regards,
Pavlina
the Telerik team

[Jon]

Sometimes the solution is so obvious it isn't seen.  Changing the img to a div with an image background will work and is a better solution than depending on the browser dependent pointer-events css property even though it's a table-by-table change.

I will add my vote to including img items in the RowClick event as discussed in the previously linked GridBinaryImageColumn issue.

[Pavlina]

Hello Jon,

We appreciate your opinion as a customer. I want to assure you that I passed your feature request to our developers for future consideration.

I will gladly assist you if other problems arise.

Regards,
Pavlina
the Telerik team