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;
}

I added the RowClickEvent to the bottom of the listing. Thanks! — paged.csci, Jul 14 '14 at 23:35

crthompson · Accepted Answer · 2014-07-14T23:51:52.267

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);
}

Thanks, this worked. I ended up using the doPostBack method. I was hoping to avoid having to reload the page, but it doesn't look like that is avoidable. — paged.csci, Jul 16 '14 at 16:32

score 1 · Answer 2 · answered Jul 22 '14 at 09:34

Since you want a server event in the UC/Page, you need to POST the page in order to get them. The client-side RowClick event of the grid will not fire a custom server event by itself. You can also consider using the server SelectedIndexChanged event of the grid to fire your custom event instead of raising a postback with some custom arguments. You can also use AJAX to avoid disposing the entire page.

Here is a very simple example (note that adding the RadAjaxManager to a user control is not a good idea, but you can create the AJAX setup programmatically or in some other fashion):

            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadGrid ID="RadGrid1" runat="server" OnSelectedIndexChanged="RadGrid1_SelectedIndexChanged" OnNeedDataSource="RadGrid1_OnNeedDataSource">
            <ClientSettings Selecting-AllowRowSelect="true" EnablePostBackOnRowClick="true">
                <ClientEvents OnRowClick="doSomeClientWork" />
            </ClientSettings>
        </telerik:RadGrid>
        <script type="text/javascript">
            function doSomeClientWork(sender, eventArgs) {
                var filterId = eventArgs.getDataKeyValue('FilterID');
                alert(filterId);
            }
        </script>



    protected void RadGrid1_SelectedIndexChanged(object sender, EventArgs e)
{
    GridDataItem item = (GridDataItem)RadGrid1.SelectedItems[0];//get selected row
    //make sure you pass the apporpriate arguments, sender is the grid already
    ControlClick(sender, e);
}

protected void RadGrid1_OnNeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    RadGrid1.DataSource = "asdfg";
}

Thanks, I'll play around with this a bit today and tomorrow. I appreciate the response! — paged.csci, Jul 23 '14 at 17:39
can you help me with this quesion:http://stackoverflow.com/questions/35356677/handle-multiple-delete-events-from-grid-with-single-events-handlers-asp-net — I Love Stackoverflow, Feb 12 '16 at 09:36

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

Code Segments

2 Answers2