Identifying the appropriate user control on pop up closeIdentifying the appropriate user control on pop up close

[Arpit]

I have to reuse the user controls I'm creating multiple times on a single page. This user control has a listbox and a button. On clicking the button, a radwindow opens and will send some value back to the caller on close. I have to identify the appropriate user control when the pop-up closes and populate the listbox with the value returned.I'm running into two issues here. One is the question posted, how do I identify calling user control from the pop-up. Second, is something wrong on my ajaxrequest code? Even if I hardcode values, the listbox does not get populated.

Parent.aspx

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager" runat="server">
</telerik:RadAjaxManager>

<telerik:radwindowmanager id="RadWindowManager1" reloadonshow="true" showcontentduringload="false" runat="server" behavior="Default" initialbehavior="None" ></telerik:radwindowmanager>

<div>
<uc:Control ID="Ctrl1" runat="server"></uc:Control >
<uc:Control ID="Ctrl2" runat="server"></uc:Control >
<uc:Control ID="Ctrl3" runat="server"></uc:Control >
</div>

UserControl.ascx

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
<script type="text/javascript">
function foo() {
var oWnd = radOpen('PopUp.aspx', "Title");
oWnd.add_close(OnClientClose);
return false;
}

function OnClientClose(oWnd) {
var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");

ajaxManager.ajaxRequest('Processed return value');
return false;
}
</script>
</telerik:RadCodeBlock>

<telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ListBox">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ListBox" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>

<table>
<tr>
<td>
<asp:ListBox ID="ListBox" Width="100px" runat="server" />
</td>
<td>
<asp:Button ID="AddButton" runat="server" OnClientClick="return foo(); return false;" Text="Add" />
</td>
</tr>
</table>

UserControl.ascx.cs

protected void Page_Load(object sender, EventArgs e)
{
var manager = RadAjaxManager.GetCurrent(Page);

manager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(RadAjaxManager1_AjaxRequest);
}

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
if (!string.IsNullOrEmpty(e.Argument))
{
ListBox.Items.Add(new RadListBoxItem(e.Argument));
//This code runs without error but does not populate the list box. I even tried to harcode the control ID against which this code should run. The code ran only for the required control but listbox was not populated.
}
}

Also, all the 3 user controls get executed on the postback. Is there a way to prevent it? It's been a while since I have dealt with user controls and telerik, so if I missed out on any crucial detail in the sample above, please let me know.I do have to use telerik but not necessarily ajaxrequest. I tried some javascript code from telerik demos to populate the listbox but that didn't work either.Any help/clues/directions appreciated

[Marin Bratanov]

Hi Arpit,

You can discern the user controls by passing arguments to the foo() function and storing them in a field in the RadWindow client-side object, for example:

<script>
    function foo(ucId) {
        var oWnd = radOpen('PopUp.aspx', "Title");
        //consider using null as a second parameter, or the ID of an existing instance
        //as shown here: http://www.telerik.com/help/aspnet-ajax/window-programming-opening.html
        oWnd.__callerUc = ucId;
        oWnd.add_close(OnClientClose);
        return false;
    }
    function OnClientClose(oWnd) {
        alert(oWnd.__callerUc);
        oWnd.remove_close(OnClientClose);//to prevent the handler from being called many times
        var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
        ajaxManager.ajaxRequest('Processed return value');
        return false;
    }
</script>
<asp:Button ID="AddButton" runat="server" OnClientClick="return foo(1); return false;" Text="Add" />

On the AJAX setup - since you invoke an AJAX request from the RadAjaxManager, you need to have an AJAX setting where the RadAjaxManager updates the desired user controls. For example:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Ctrl1" />
                <telerik:AjaxUpdatedControl ControlID="Ctrl2" />
                <telerik:AjaxUpdatedControl ControlID="Ctrl3" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Also note how the ID of the control is different from its class, as this can cause general issues in ASP.

As for the three user controls going through their server lifecycle - this is expected. All controls in ASP go through their full server lifecycle, even during AJAX request. This is how their state is maintained. The difference between AJAX requests and full postbacks is that only parts of the page are rendered and returned to the browser, but the entire server lifecycle executes.

Regards,

Marin Bratanov
Telerik

 

 

[Arpit]

Hi Marin,
Thanks for the suggestion on AjaxSetup. If I hardcode the values, appropriate controls get updated.

For identifying the triggering control however, I'm not sure I understood your logic. You are passing a hardcoded value 1 to the foo function which will be the same for all 3 controls.

I did try to use hiddenvalue settings in the control but that always ended up picking the ID of the first control.
I even tried to register the script on page load of the control with the controlid baked in. But only the first control was available on the page (checked the page source after render).

[Marin Bratanov]

Hello,

I hardcoded a value, but you can change it dynamically based on your logic. For example, a server-side flag or condition can let you generate the desired OnClientClick string for the button so it will pass the needed arguments. You can then append them to the ajaxRequest() argument. Here is a basic example:

in the UC:

protected void Page_Load(object sender, EventArgs e)
{
    AddButton.OnClientClick = string.Format("foo('{0}'); return false;", this.ID);
}

in the OnClientClose JS:

function OnClientClose(oWnd) {
    alert(oWnd.__callerUc);
    oWnd.remove_close(OnClientClose);//to prevent the handler from being called many times
    var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
    ajaxManager.ajaxRequest('Processed return value|' + oWnd.__callerUc);
    return false;
}

a basic example of getting multuple strings from such an argument in the AjaxUpdate handler on the main page server code:

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    if (!string.IsNullOrEmpty(e.Argument))
    {
        //try to avoid IDs that match the class name
        ListBox1.Items.Add(new RadListBoxItem(e.Argument.Split('|')[1]));
    }
}

You can, of course, extend those to fit your exact case.

Regards,

Marin Bratanov
Telerik

 

 

[Arpit]

Thanks Marin!
The code works but unfortunately only the first control ever gets updated. Is there anyway I can PM you the direct code? Maybe it's some setting I'm not adding/updating.

[Marin Bratanov]

Hi Arpit,

If only  one of the expected controls updates, I advise the following:

1. Ensure the server code updates all controls as expected. Step through it to make sure this is the case.
2. Examine the network response to see whether all needed controls are sent from the server to the client. If not, review your AJAX settings so that the current AJAX initiator updates all the items it has to.
   To easily test this, you can add easily findable strings in your markup (e.g., "aaaaaaaaaaaaa" or something similar).

As for sending code - you can use the Format code block tool to add snippets to your forum posts. I am attaching here a short video that shows the approach.

In case you have more complex/long code, you can send us a sample in a support ticket. I would ask that you keep it as simple as possible, and runnable, so we can actually debug the problem. This blog post could help you in creating one: http://blogs.telerik.com/aspnet-ajax/posts/10-09-29/isolating-a-problem-in-a-sample-project.aspx.

Regards,

Marin Bratanov
Telerik

 

 

[Arpit]

Hi Marin,
I have attached the sample code here. Please let me know if you need to me submit this as a support ticket.

Thanks,
Arpit

[Marin Bratanov]

Hi Arpit,

It seems the attachment did not make it through. Note that forums only allow images and if you want to send us code (e.g., zip, aspx, whatever), you would need to open a support ticket.

Regards,

Marin Bratanov
Telerik