[Solved] Load User Control in PanelBarItem on SelectedIndexChanged

[Ebony Gainey]

On my aspx page I have 2 rad combo boxes and a rad panel bar.  When the user selects values from both combo boxes, I want the user control to load.  I have looked at several forums on here and even tried to google it, but nothing works.  Please help me figure out what is going on. 

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

<asp:Panel ID="pnlSelect" runat="server">
    <asp:HiddenField ID="hfPOId" runat="server" />
    <table>
        <tr>
            <td>
                <asp:Label ID="Label1" runat="server" Text="Purchase Order: " CssClass="lbl" />
                <telerik:RadComboBox ID="rcbPurchaseOrder" runat="server" Width="250px" Height="150px"
                    EmptyMessage="Select a Purchase Order" EnableLoadOnDemand="True" ShowMoreResultsBox="true"
                    EnableVirtualScrolling="true"
                    OnItemsRequested="rcbPurchaseOrder_ItemsRequested" AutoPostBack="True"
                    onselectedindexchanged="rcbPurchaseOrder_SelectedIndexChanged" />
            </td>
            <td>
                <asp:Label ID="Label2" runat="server" Text="Revision: " CssClass="lbl" />
                <telerik:RadComboBox ID="rcbPORevision" runat="server"
                    EmptyMessage="Select a Revision" AutoPostBack="False"
                    onselectedindexchanged="rcbPORevision_SelectedIndexChanged" Enabled="false" />
            </td>
        </tr>
    </table>
</asp:Panel>
<br />

<telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="100%" Visible="true">
            <Items>
                <telerik:RadPanelItem Text="Purchase Order Information" runat="server">
                    <Items>
                            <telerik:RadPanelItem runat="server">
                            <ItemTemplate>

                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Review">
                    <Items>
                        <telerik:RadPanelItem>
                            <ItemTemplate>

                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>

private void LoadControl()
{
     Control userControl1 = Page.LoadControl("~/UserControls/PurchaseOrder.ascx");
     userControl1.ID = "userControl1";
     RadPanelItem pItem = (RadPanelItem)RadPanelBar1.FindItemByText("Purchase Order Information");
     pItem.Items[0].Controls.Add(userControl1);
     pItem.Expanded = true;
}

protected void Page_Load(object sender, EventArgs e)
{
     if (rcbPORevision.SelectedValue != string.Empty && rcbPurchaseOrder.SelectedValue != string.Empty)
     {
          LoadControl();
     }
}

[Shinu]

Hi Ebony Gainey,

I have tried another approach to accomplish the same scenario, by invoking ajaxRequest in the event handler after checking if user changed the selection in combobox. Then in the ajaxRequest event add the user control to panelbar item.

aspx:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="pnlSelect">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlSelect" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

javascript:

<script type="text/javascript">
    var check1 = false;
    var check2 = false;
    function OnClientSelectedIndexChanged1(sender, args) {
        if (check2) {
            var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
            ajaxManager.ajaxRequest("");
        }
        check1 = true;
    }
    function OnClientSelectedIndexChanged2(sender, args) {
        if (check1) {
            var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
            ajaxManager.ajaxRequest("");
        }
        check2 = true;
    }
</script>

Attach OnClientSelectedIndexChanged1 to first RadComboBox and OnClientSelectedIndexChanged2 to second RadComboBox.

cs:

    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        LoadControl();
    }

-Shinu.