AjaxSetting not working with custom Event of UserControl

[Hugo Augusto]

Hello,

I have a usercontrol that provides an Event:

public event EventHandler<FilePickerSelectionEventArgs> FileSelectionChanged;

This event is raised by the control using:

protected void RaiseFilePickerSelectionChangedEvent(ArrayList selectedFiles)
        {
            // Copy handler to temp var to make operation thread safe:
            EventHandler<FilePickerSelectionEventArgs> handler = FileSelectionChanged;
            if (FileSelectionChanged!=null)
            {
                FilePickerSelectionEventArgs args = new FilePickerSelectionEventArgs();
                args.SelectedFiles = selectedFiles;
                handler(this, args);
            }
        }

This usercontrol is placed inside an aspx page without masterpage. I need to update other controls that exist on the page when the UC event is raised. So, in the page I placed the code:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
    <AjaxSettings> 
        <telerik:AjaxSetting AjaxControlID="filePicker" EventName="FileSelectionChanged"> 
            <UpdatedControls> 
                <telerik:AjaxUpdatedControl ControlID="labelStatus"  />                 
            </UpdatedControls> 
        </telerik:AjaxSetting>        
    </AjaxSettings> 
</telerik:RadAjaxManager>

<UC:FilePicker id="filePicker" runat="server" AllowedFileExtensions="jpg,jpeg,png"  OnFileSelectionChanged="filePicker_FileSelectionChanged"></UC:FilePicker>

The problem is that RadAjaxManager is not working with this event. I'm sure it's correct because if I change it to something that does not exist, an error is returned saying that no event with that name is found.

Tried doing AjaxSettings in my page code behind but that did not work as well.

Tried to use a simple UpdatePanel:

 <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
     <ContentTemplate>
         <asp:Label ID="labelStatus" runat="server"></asp:Label>                                                        
     </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="filePicker" EventName="FileSelectionChanged" />
    </Triggers>
 </asp:UpdatePanel>

And it worked. So, my question is, is this bug known? How can I solve this if I want to use RadAjaxManager?

[Attila Antal]

Hi Hugo,

My first assumption is that the FilePicker is not making any PostBacks. I am curious though, how does the FilePicker make a PostBack, what makes it trigger the "FileSelectionChanged" event?

Can you show us the code you have inside the FilePicker (ASCX and ASCX.CS) files?

[Hugo Augusto]

Hello,

The event is triggered when the user presses a button to submit the selected files. Inside the Click event of that button, the method RaiseFilePickerSelectionChangedEvent is called. Very simple.

I'm sure there's a postback because I also have an hidden input field that gets the ID of the selected files when that button is pressed. Also, the only difference in code are the lines for Radajax setting  or the code for UpdatePanel. When using yours it does not work, and when using UpdatePanel it works.

Found the following in the documentation:

https://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxpanel/troubleshooting/common-issues

Problem: Setting the EventName property in the AJAX settings for the AJAX initiator control does not work.Solution: The EventName property is obsolete for RadAjax . If your logic strongly relies on it, you should use an asp:UpdatePanel toAJAX-enable the controls instead of RadAjax . Another option is to wrap the updated control in a RadAjaxPanel instead of using the RadAjaxManager to AJAX-enable it. 

I don't quite understand what you mean with the eventName being obsolete because I don't know how it could be done differently.

[Attila Antal]

Hello Hugo,

The part saying that the EventName is obsolete means that the property will not have any effect if used, or the would fail.

Nevertheless, these not many are relying on the EventName property. To enable AJAX for a Control (UC or WebForms Component) by referencing it to AjaxManager's AjaxSettings.

The following will suffice:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
    <AjaxSettings> 
        <telerik:AjaxSetting AjaxControlID="filePicker"> 
            <UpdatedControls> 
                <telerik:AjaxUpdatedControl ControlID="labelStatus"  />                 
            </UpdatedControls> 
        </telerik:AjaxSetting>        
    </AjaxSettings> 
</telerik:RadAjaxManager>

 

Last, but not least, I have tested the following and it works even with the "EventName" specified which means, the app you are working on might have some other issues.

Default.aspx

<%@ Register Src="~/FilePicker.ascx" TagPrefix="UC" TagName="FilePicker" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="filePicker" EventName="FileSelectionChanged">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="labelStatus" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <UC:FilePicker ID="filePicker" runat="server" AllowedFileExtensions="jpg,jpeg,png" OnFileSelectionChanged="filePicker_FileSelectionChanged"></UC:FilePicker>
        <br />
        <br />
        <asp:Label ID="labelStatus" runat="server"></asp:Label>
    </form>
</body>
</html>

 

Default.aspx.cs

protected void filePicker_FileSelectionChanged(object sender, FilePickerSelectionEventArgs e)
{
    labelStatus.Text = DateTime.Now.TimeOfDay.ToString();
}

 

FilePicker.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="FilePicker.ascx.cs" Inherits="FilePicker" %>

<telerik:RadButton runat="server" ID="RadButton1" Text="Trigger Event" AutoPostBack="true" OnClick="RadButton1_Click" />

 

FilePicker.ascx.cs

public string AllowedFileExtensions { get; set; }

public event EventHandler<FilePickerSelectionEventArgs> FileSelectionChanged;

protected void RaiseFilePickerSelectionChangedEvent(ArrayList selectedFiles)
{
    // Copy handler to temp var to make operation thread safe:
    EventHandler<FilePickerSelectionEventArgs> handler = FileSelectionChanged;
    if (FileSelectionChanged != null)
    {
        FilePickerSelectionEventArgs args = new FilePickerSelectionEventArgs();
        args.SelectedFiles = selectedFiles;
        handler(this, args);
    }
}
protected void RadButton1_Click(object sender, EventArgs e)
{
    RaiseFilePickerSelectionChangedEvent(new ArrayList());
}
public class FilePickerSelectionEventArgs : EventArgs
{
    public ArrayList SelectedFiles { get; set; }
}

 

Regards,
Attila Antal
Progress Telerik