[Solved] Row Doubleclick event looks at incorrect Javascript method

[Matt]

We have an assignment control that's reused throughout our project.  It contains two rad grids:  Available and Assigned.  When the user double clicks the row in one of the grids, the item is moved to the opposite grid.  This is defined as follows for the Available grid (the Assigned grid is pretty much the same, except Available is replaced with Assigned where :

 <telerik:RadGrid runat="server" ID="grdAvailableFields" SkinID="AssignmentGridWithoutPaging" OnItemDataBound="grdAvailableFields_OnItemDataBound"

Width="280px" OnNeedDataSource="grdAvailableFields_NeedDataSource" OnDataBound="grdAvailableFields_DataBound">

<MasterTableView Name="AvailableFields" DataKeyNames="Id">

<Columns>
...


</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowSelected="grdAvailableFields_OnRowSelected"
OnRowDblClick="AvailableFieldDblClick" />

</ClientSettings>
</telerik:RadGrid>

The corresponding javascript is defined as follows:

function AvailableFieldDblClick() {

    $get("<%= btnAssignField.ClientID %>").click();

}

 

function btnAssignField_ClientClick() {

    if (assignFieldEnabled) {

        ResetFieldsButtons();

        MakeFieldsDirty();

        return true;

    }

    return false;

}

This all works fine when we only have one instance of the control on the page.  However, in some cases, we have to have it twice (they're located on different tabs of a multipage control -- tab 2 and tab 5).  In these cases, when the user doubleclicks the row, the javascript that fires belongs to the last control that was created (e.g., on tab 5), even though the user was on the control that was first created.  (When the control is used multiple times on the page, there are duplicate javascript functions in the aspx code.)

For example, if Grid1 and Grid2 are on Tab1 and Grid3 and Grid4 are on Tab2, when I doubleclick G3 or G4, the item moves to the correct paired grid.  However, if I doubleclick G1 (or G2), the javascript that's fired refers to G3 (or G4) and therefore nothing happens.

Since the javascript functions are the same for each control, the browser is calling the incorrect method (e.g., the method associated with the last grid) when the user doubleclicks on the first grid.  Since this is the same control, I can't change the function name in design and expect it to make a difference in production.

How can I differentiate which function to call so that when the user doubleclicks any of the grids, the function that's executed is the one associated with the correct grid?

[Andrey]

Hello,

As you correctly noticed, the problem comes from the fact that you have multiple instances of one and the same control on the page. Each new instance adds a new JavaScript function with the same name. The default browser behavior when having multiple versions is to execute the last registered function on the page. That is why you always get executed the function for the last control.

In order to resolve this issue you need to differentiate somehow the functions from each other. The easiest way to do that is to modify the name of the function to include the ClientID of the user control.
You could achieve this by registering the client-side event on the server-side:

protected void Page_Load(object sender, EventArgs e)
{
    RadGrid1.ClientSettings.ClientEvents.OnRowClick = "DoubleClick_" + RadGrid1.ClientID;
}

and the JavaScript code:

<script>
    function DoubleClick_<%=RadGrid1.ClientID %>(sender, args) {
        alert("fired");
    }
</script>

Kind regards,
Andrey
the Telerik team