Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 02 Jan 2020 16:43 by ADMIN
David Hassan
Created on: 29 May 2019 08:17
Category: Grid
Type: Bug Report
0
Edit/Save/Cancel buttons fire RowClick event in FireFox

To replicate the problem:

  1. Create RadGrid and bind it a datasource
  2. Set ClientSettings - Selecting - AllowRowSelect to true
  3. Set ClientSettings - EnablePostBackOnRowClick to true
  4. Add a GridEditCommandColumn or a ButtonColumn with Edit/Save/Cancel CommandNames
  5. Enable AJAX for the Grid
  6. Run the application in FireFox

Clicking on the Edit button fires the RowClick event of the Grid instead of Edit/Save/Cancel.

1 comment
ADMIN
Attila Antal
Posted on: 29 May 2019 08:28
Thank you for taking the time to report this issue.

To work around this issue, place the following JavaScript code on the page where the grid is:

<script type="text/javascript">
    var old = Telerik.Web.UI.GridSelection.prototype._click
    Telerik.Web.UI.GridSelection.prototype._click = function(e)
    {
        var el = (e.target)? e.target : e.srcElement;
        if ($telerik.isTouchDevice && el.nodeType == 3)
        {
            el = el.parentNode;
        }
        if (!el.tagName) return;
 
        // If the span element clicked is a child element of a button, do not raise the row click event
        if (el.tagName.toLowerCase() == "span" && el.parentElement.tagName.toLowerCase() == "button") return;
 
        // call the original code
        old.call(this, e);
    }
</script>

Summary of the issue:

Our test results show that later versions of Firefox handle the event bubbling in a different way than expected, hence the clicking of an inner element does not bubble up properly. 

Here is an example of the rendered button in the Edit column:

<button type="button" name="RadGrid1$ctl00$ctl04$EditButton" value="Edit" onclick="javascript:__doPostBack('RadGrid1$ctl00$ctl04$EditButton','')" id="RadGrid1_ctl00_ctl04_EditButton" title="Edit" class="t-button rgActionButton rgEdit">
    <span class="t-font-icon rgIcon rgEditIcon"></span>
</button>

If the button element is clicked, the right command is fired, in this case the "Edit" command, while clicking on the inner HTML (SPAN / Icon) then the RowClick event fired.

The JavaScript code above is overriding the internal logic of the grid and will exclude SPAN elements from the logic if they are children of button elements.

Please accept our apology for any inconvenience this may have caused.
Create an account Log In
View
Type
Status
Category