Change the sequence of OnRowClick and OnRowSelected client events in IE7 and IE8

Thread is closed for posting
1 posts, 1 answers
  1. Answer
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 11 May 2011 Link to this post

    Requirements

    RadControls for ASP .NET AJAX version 

    2011.1.315
    .NET version

    3.5 and later
    Visual Studio version 2010 and later
    programming language

    C#, JavaScript
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    This project shows how to change the sequence in which OnRowClick and OnRowSelected client events are fired in IE7 and IE8. Currently in all browsers except IE7 and IE8, when a row is clicked in the RadGrid control first the OnRowClick event is fired, then the row gets selected and OnRowSelected is fired in the end.
    In IE7 and IE8 the sequence by default is reversed: First row gets selected after that OnRowSelected is fired and in the end OnRowClick is fired.
    This happens because if two handlers are attached to one element, most of the browsers (Firefox, Chrome, Opera, Safari, IE9) will execute the two handlers in the same sequence as they are added. But IE7 and IE8 will execute them in reversed order.

    In the example below after the user clicks on the label two alerts will be shown. In IE9 f1 will be executed first and then f2. In IE8 f1 executes after f2.

    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <label id="Label1">
      Click here</label>
    <script type="text/javascript">
      $addHandler($get("Label1"), "click", f1);
      $addHandler($get("Label1"), "click", f2);
     
      function f1(eventElement) {
        alert("f1 is executed");
      }
      function f2(eventElement) {
        alert("f2 is executed");
      }
    </script>

    Clicking on element in RadGrid and selecting it are actually independent operations. Element could be selected without clicking and could be clicked without performing selection. It all depends on the grid's settings. To achieve this behavior, a class named GridSelection is used. RadGrid itself has an instance of the GridSelection class and they both register "click" handlers on the same DOM element. As mentioned above in IE7 and IE8 this causes GridSelection class to handle "click" event first, because it registers the "click" handler after the RadGrid does.
    And to change the event handling sequence we could override the initialize method of the GridSelection class. First remove the "click" event handler added by the RadGrid instance and then add it again afterwards.
    In the attached project this is the code that is used:
    $removeHandler(grid.get_element(), "click", handlers[0].handler);
    $addHandlers(grid.get_element(), { click: Function.createDelegate(this, this._click) });
    $addHandler(grid.get_element(), "click", originalHandler);
    The rest of the Telerik.Web.UI.GridSelection.prototype.initialize function is pretty much the same as its original version.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.