The Telerik R.A.D control set includes some rather outstanding RadWindow and RadAjax components.

Sometimes though, it's not always forthcoming in how to get these two items to work together.  This is especially true if you want to "Ajaxify" a standard ASP.Net control from an event fired from the RadWindow.

An example of this came up with one of my clients recently.  The basic jist of it is, they have a web form that has a standard DropDownList control on it.  They wanted the ability to edit the contents of this drop down list "on the fly" via popup window, and when they are done editing, to have their changes reflect in the DropDownList.

The first thing I did was to create a standard ASP.Net web page with the form to edit the data on the database that is to be displayed in the drop down list.

Once I had that page working just the way it should with the ability to read and write data back and forth to the database, it was time to move on to the next step of the request.  To add the ability to have this window pop up from the main form.

 

As you can see, I dropped a standard ASP.Net LinkButton on the form, along with the Window Manager, Ajax Manager, and some AjaxLoadingPanels (The loading panels provide a nice little feedback for the user that stuff is happening).

Once you have the UI laid out the way you want it, it's time to go into the source and code behind editors to do the "heavy lifting" part of this request.  The window manager has the ability to control multiple windows.. so we have to define the window we want our editing form to appear in:

<radW:RadWindowManager ID="RadWindowManager1" runat="server" Left="" Modal="True" 
    SkinsPath="~/RadControls/Window/Skins" Top="" ShowContentDuringLoad="True" >
    <Windows>
       <radW:RadWindow ID="wndCategoryFieldGroupManager" runat="server" Modal="True" 
            SkinsPath="~/RadControls/Window/Skins" Height="550px" Width="750px" 
            OnClientClose="refreshCategoryFieldGroupDDL();"/>
    </Windows>
</radW:RadWindowManager>

 

Now, Notice that I've defined a window, wndCategoryFieldGroupManager.. and in that window I've defined an OnClientClose method.  Basically, what I'm telling the Window Manager to do is to fire off a client side javascript method called refreshCategoryFieldGroupDDL().

That's all well and good, but how does the window open in the first place?  Well, here is the definition for my link button the "[+/-]" guy in the picture above:

<asp:LinkButton ID="lbtnDynamicFieldAddEditAddGroup" 
    runat="server" Text="[+/-]"></asp:LinkButton>

 

I've got a little helper method in the .cs CodeBehind that sets the OnClientClick of the link button to a javascript call..

private void SetManageFieldGroupOnClientClick(string categoryID)
{
    System.IO.StringWriter sw = new System.IO.StringWriter();
    sw.Write("return ShowEditForm({0});", categoryID);
    lbtnDynamicFieldAddEditAddGroup.OnClientClick = sw.ToString();
}

 

Back in the .aspx page, I've got the javascript methods that the control above make calls to..

<script type="text/javascript">
function ShowEditForm(id)
{
    window.radopen("FieldGroupManager.aspx?id=" + id, "wndCategoryFieldGroupManager");
    return false; 
}
function refreshCategoryFieldGroupDDL()
{
    window["<%= RadAjaxManager1.ClientID %>"].AjaxRequest('Rebind_CategoryFieldGroupDDL');
}
</script>

 

Now, the thing to remember, upon examining the above javascript is that I'm making a call to the RadAjaxManager when the refreshCategoryFieldGroupDDL is called, and not the dropdown list itself.  Back in the "old days", that is to say the previous versions of the Telerik controls, the only way to AJAX enable a standard ASP.Net control was to wrap that control in an RadAjaxUpdatePanel.  The AjaxManager makes life much more simple for us.

What we have to do, in the .cs code behind is to override the RaisePostBackEvent() method of our page:

protected override void RaisePostBackEvent(IPostBackEventHandler sourceControl, string eventArgument)
{
    base.RaisePostBackEvent(sourceControl, eventArgument);

    if (sourceControl is Telerik.WebControls.RadAjaxManager)
    {
        switch (eventArgument)
        {
            case "Rebind_CategoryFieldGroupDDL":
                BindDynamicFieldAddEditDataGroupDropDown();                    
                break;
        }
    }
}

 

Doing it this way gives us the ability to handle multiple requests and events from a central location.  Notice that the eventArgument that is being passed in was defined in the javascript in the .aspx page. The Bind...() method is what is responsible for binding the DropDownList control to it's data source.

The last thing to do is to use the built in AjaxManager configuration screen to wire up the events from the AjaxManager to the DropDownList:

Step1: Select the RadAjaxManager control
Step2: Select the control to wire as an AjaxEvent (in our case, the DropDownList)
Step3: Choose which Ajax Loading Panel to use.  For this since we're only loading a single line control, use the single line loading panel

I know that all of this sounds rather complicated, but the truth is once you wrap your mind around the fact that the loading of the popup window, and the refresh of the target control via the AjaxManager happens on the client side, then the rest is gravy.