[Solved] GridBinaryImageColumn not working with OnRowClick client event

[Jon]

Hi,

I've got a grid with a GridBinaryImageColumn in it, in the ClientEvents flag is an OnRowClick event to fire some javascript.

The grid works, shows the images and also normally fires the JS function when a row is clicked.  However for some reason the event doesn't get fired when the user clicks on the image in the BinaryImageColumn.  If you click in the whitespace within that column that is around the image the event gets fired but not when clicking on the image itself.

Is this a bug, feature or what?

For the time being I can hookup some event to fire when the user clicks on the image however that stikes me as silly as it will slow the processing of the page down and will probably add extra HTML to the output.

Any suggestions?

Regards,

Jon

[Nikolay Rusev]

Hello Jon,

RowClick client event escapes elements like links,images,buttons. This is by design of RadGrid and it is expected behavior.

All the best,
Nikolay
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jon]

Hi Nikolay,

Is there a way to override that and allow images to be included (similar to the way that you turn the various fields on/off in the formdecorator)?

If not please could you add this as a feature request?  I agree that buttons and links are a good idea to exclude from the RowClick but image exclusion isn't a good idea.

Regards,

Jon

[Sebastian]

Hello Jon,

Thank you for the suggestion - I will forward it to our developers to be considered further. However, note that the exclusion of the images from firing the OnRowClick client event was based on the customers' feedback when porting the code from the ASP.NET to the ASP.NET AJAX version of the control.

Note that you can intercept the onclick client event of the image (which is part of built-in GridBinaryImageColumn) by following these steps:

• Wire the ItemCreated event of the control and add conditional check for whether e.Item is GridDataItem inside the handler
• Locate the image inside the column cell using column unique names. The image will be the first control in the Controls collection of the cell, namely:
  (e.Item as GridDataItem) ["<MyColUniqueNameHere"].Controls[0]
• attach the onclick event of the image using its Attributes collection.

I hope this approach is applicable for your case.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jon]

Thanks for that Sebastian,

Having it as an option would be very useful as the amount of extra code being inserted simply as a workaround is quite tedious when you scale up to having maybe a row with two or three image columns (picture, and a couple of status flags), having images on many pages means a lot of extra code simply to implement something that should really be in the grid component as an option (even if turned off by default).

Thanks as well for the guidelines. 

Regards,

Jon

[Nick]

Hi Nikolay and Jon,

I succeeded in wiring up the image e.g.:

 

GridItem item = e.Item;
Image image = (Image)item.Cells[1].FindControl("image");
image.Attributes.Add("onclick", "return alert('this is working fine');");

 

 

 

 

 

 

 

 

Except that the function I need to call is the function that was defined in the clientsettings:

 

 

Grid.ClientSettings.ClientEvents.OnRowClick = "OpenWindow";
this (javascript) function will render as follows: OpenWindow(sender, params) as I need the params.getDataKeyValue("PrimaryKey");

How can I call this function with the same parameters or raise the rowclick event from the image onclick?
Do you have an example or a possible hack?

Ps. I agree with Jon that exclusion of images is a flaw in the design since there is a difference between an imagebutton, which should be excluded, and an image which should be included in the rowclick.

Greetz

 

 

 

 

 

[Jon]

Hi Nick,

You could wire up a second js function to do the work, when the user clicks on the image call the second function with the ID and then the rowclick function called from the grid would call the actual function.  That way you don't need the sender and params arguments in the actual function.

ie JS is something like this

                function RowClick(sender, eventArgs) {
                    loadDocument(eventArgs.getDataKeyValue("DocumentID"));
                }
                function loadDocument(documentID) {
                    window.frames['uxDocumentIFrame'].location = "/_DOC/Document.aspx?DocumentID=" + documentID
                }

 code behind something like this

        Protected Sub uxRadGrid_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles uxRadGrid.ItemDataBound
            If TypeOf e.Item Is GridDataItem Then
                Dim gridDataItem As GridDataItem = CType(e.Item, GridDataItem)
                Dim documentID As String = gridDataItem("uxDocumentID").Text.ToString()
                If documentID = " " Then documentID = ""
                Dim img As RadBinaryImage = CType(gridDataItem("uxThumbnailFile").Controls(0), RadBinaryImage)
                img.Attributes.Add("onClick", "loadDocument('" & documentID & "');")
            End If
        End Sub

and that should sort you out... remember to leave the OnRowClick in as that's needed for the row side of it.

Hope that helps,

Cheers,

Jon

[Nick]

Hi Jon,
Thanks for your reply, I knew this was fixable by creating a second function, problem was that the function is dynamically rendered so that each grid I put on a page registers it's own OpenWindow script with unique url and parameters. It would have been nice to fire the rowclick event from the image to use this function as is.

According to your suggestion I now created an "overload" e.g. OpenWindow(sender,params, id) and check wether id != null otherwise use datakeyvalue which works quite nice and leaves all other grids without images working with just (sender,params) arguments.

It would be nice though if telerik could fix this, since I can not think of any justified cause to have a regular image excluded from the rowclick delegate.

Again thanks for the help,
Greetz

[Nikolay Rusev]

Hello Nick,

Another option is to enabled RowClick to be triggered on images completely on client is  use the following code:

01.<script type="text/javascript">
02.        function clicked(gridElement,e)
03.        {
04.            var grid = gridElement.control;
05.            e = window.event || e;
06.
07.            var target = Telerik.Web.UI.Grid.GetCurrentElement(e);
08.            if (target.nodeName.toLowerCase() != "img")
09.                return;
10.
11.            var row = Telerik.Web.UI.Grid.GetFirstParentByTagName(target, "tr")
12.            if (row && row.id != "" && row.id.split("__").length == 2)
13.            {
14.                var args = new Telerik.Web.UI.GridDataItemEventArgs(row, e);
15.                if(typeof(grid["raise_rowClick"]) == "function")
16.                    grid["raise_rowClick"](args);
17.            }
18.        }
19.    </script>

and attach handler on onclick of the RadGrid itself. For more details please refer to the project attached to this thread.

All the best,
Nikolay
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.