Use both Telerik RadGrid's OnRowClick as well as custom User Control Event Handler

Question

I have a Telerik RadGrid populated in a Web User Control in C#, and it has a client OnRowClick event that occurs in Javascript on the client side of my User Control. This works nicely.

I also have an event called ControlClick that is associated with the User Control that I want to fire on the Web Form. ControlClick is bound in the CodeBehind of my UserControl to OnControlClick, and then bound to the User Control in my Web Form.

The OnRowClick event fires no problem, but the ControlClick event never triggers, so I never step into my Web Form function that handles the behavior when something in my RadGrid is clicked.

I'm not sure if I'm implementing my Event incorrectly or if it has to do with the fact that I'm already binding the click behavior to something with the RadControl. Anyone have any ideas?

Cheers!

Code Segments

RadGrid stuff:

<rad:RadGrid ID="gridRequests" EnableViewState="true" runat="server"  OnNeedDataSource="gridRequests_NeedDataSource" OnItemDataBound="gridRequests_DataBound">
    <MasterTableView>
        <Columns>
            <!-- The Column Stuff -->
        </Columns>
    </MasterTableView>
    <ClientSettings EnableRowHoverStyle="true">
        <ClientEvents OnRowClick="RowClickEvent" />
    </ClientSettings>
</rad:RadGrid>

In the CodeBehind of my UserControl:

public event EventHandler ControlClick;
protected void OnControlClick(object sender, EventArgs e){
    ControlClick(sender, e);
    FilterId = Utils.NullSafeInt32(hdnFilterId.Value);
}

In my Main Page Markup

 <ft:UserControl ID="ftUserControlInstance" runat="server" SharePoint="false" Visible="true" OnControlClick="ControlClick"/>

In my Main Page CodeBehind:

public void DRFGetQueryStrings(object sender, EventArgs e)
{
    Mobile_WebControls_UserControlInstance getControl = (Mobile_WebControls_UserControlInstance)ftUserControlInstance;

    _filterId = getControl.FilterId;

    ScriptManager.RegisterStartupScript(this, this.GetType(), "script", "requestFulfillment()", true);
}

EDIT: This is my RowClickEvent:

function RowClickEvent(sender, eventArgs) {
        var filterId = eventArgs.getDataKeyValue('FilterID');
        document.getElementById("<%=hdnFilterId.ClientID %>").value = filterId;
}

Answer 1

Your RowClickEvent is taking the event, and its not bubbling to the postback

The first step is to just return true from your function.

function RowClickEvent(sender, eventArgs) {
        var filterId = eventArgs.getDataKeyValue('FilterID');
        document.getElementById("<%=hdnFilterId.ClientID %>").value = filterId;
        return true;
}

This should ensure that the events continue and both are run.

If you still have problems however, you can call postback from within your javascript.

function RowClickEvent(sender, eventArgs) {
        var filterId = eventArgs.getDataKeyValue('FilterID');
        document.getElementById("<%=hdnFilterId.ClientID %>").value = filterId;
         __doPostBack('__Page', 'MyCustomArgument');
}

_{The MyCustomArgument can be an empty string.}

To do this the Telerik way, you would use the set_cancel method:

function RowClickEvent(sender, eventArgs) {
        var filterId = eventArgs.getDataKeyValue('FilterID');
        document.getElementById("<%=hdnFilterId.ClientID %>").value = filterId;
        eventArgs.set_cancel(false);
}