[Solved] Where is my User Control

[ahmad moghadaskhoo]

Hi
 Here is my problem's description :

I have a user control with two ajax panels :

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="wuc_Transmotion.ascx.cs"
    Inherits="wuc_Transmotion" %>
<%@ Register Namespace="bigsea" TagPrefix="custom" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

    <script type="text/javascript">

        function TransmotionCreated(sender, eventArgs)
        {
            var grid = $find("<%=BusinessGrid.ClientID %>");
        }

        function TransmotionGetFirstDataItemKeyValues()
        {
            var firstDataItem = $find("<%= BusinessGrid.MasterTableView.ClientID %>").get_dataItems()[0];
            return firstDataItem.getDataKeyValue("ID");
        }

        function InitiateAsyncRequest(argument)
        {
            var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
            ajaxManager.ajaxRequest(argument);
        }

        function TransmotionRowSelected(sender, eventArgs)
        {
            var ajaxPanel_Detail = $find("<%= AjaxPanel_Details.ClientID %>");
            alert("Transmotion:ShowDetail:" + eventArgs.getDataKeyValue("ID"));
            ajaxPanel_Detail.ajaxRequest("Transmotion:ShowDetail:" + eventArgs.getDataKeyValue("ID"));
            return false;
        }

        function Download(link)
        {
            window.open(link);
        }
    </script>

</telerik:RadScriptBlock>
<style type="text/css">
    .style1
    {
        width: 900px;
        height: 250px;
    }
    .style8
    {
        height: 13px;
        background-color: #3a6ea5;
    }
    .style9
    {
        height: 404px;
        background-color: #3a6ea5;
    }
    .style10
    {
        width: 133px;
        text-align: left;
        height: 100px;
        margin: 0px;
        background-color: #3a6ea5;
    }
    .style11
    {
        text-align: left;
        background-color: #3a6ea5;
    }
    .style12
    {
        height: 404px;
        width: 449px;
        background-color: #3a6ea5;
    }
</style>
<telerik:RadDockLayout ID="DockingManager_Transmotion" runat="server" />
<div style="background-color: #3a6ea5;">
    <table class="style1">
        <tr>
            <td class="style8" colspan="3">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="style11" valign="top">
                <telerik:RadDockZone ID="DockZone_Top" runat="server" Height="230px" Width="200px"
                    Skin="WebBlue" UniqueName="DockZone_Top" BackColor="#3a6ea5" BorderStyle="None">
                    <telerik:RadDock ID="Dock_Top" runat="server" Width="230px" Height="220px" Skin="WebBlue"
                        UniqueName="Dock_Top" DefaultCommands="None" BackColor="#3a6ea5" DockMode="Docked"
                        Pinned="True" BorderStyle="None" Title="Multi-Purpose Chair">
                        <ContentTemplate>
                            <br />
                            <div style="text-align: center">
                                <img src="Transmotion/Picture3.jpg" alt="Picture1" style="width: 140px; height: 160px" />
                            </div>
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </td>
            <td valign="top" style="text-align: left" class="style12" rowspan="2">
                <telerik:RadDockZone ID="DockZone_BusinessGrid" runat="server" Height="470px" Width="500px"
                    Skin="WebBlue" UniqueName="DockZone_BusinessGrid" BackColor="#3a6ea5" BorderStyle="None">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="500px" Height="235px" Skin="WebBlue"
                        UniqueName="Dock_BusinessGrid" DefaultCommands="None" BackColor="#3a6ea5" DockMode="Docked"
                        Pinned="True" BorderStyle="None">
                        <ContentTemplate>
                            <div style="text-align: center">
                                <img src="Transmotion/Picture1.jpg" alt="Picture2" style="width: 300px; height: 200px" />
                            </div>
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="Dock_BusinessGrid" runat="server" Width="500px" Height="235px"
                        Skin="WebBlue" UniqueName="Dock_BusinessGrid" DefaultCommands="None" BackColor="#3a6ea5"
                        DockMode="Docked" Pinned="True" BorderStyle="None">
                        <ContentTemplate>
                            <telerik:RadAjaxPanel ID="AjaxPanel_BusinessGrid" runat="server" Height="200px" Width="300px"
                                LoadingPanelID="LoadingPanel_Transmotion">
                                <telerik:RadGrid ID="BusinessGrid" Skin="Web20" runat="server" Height="200px" AllowMultiRowSelection="true"
                                    AutoGenerateColumns="false" PageSize="4" AllowPaging="True" GridLines="None"
                                    OnNeedDataSource="BusinessGrid_NeedDataSource" EnableAJAX="True" Width="500px">
                                    <PagerStyle Mode="NextPrevAndNumeric" />
                                    <MasterTableView ClientDataKeyNames="ID" TableLayout="Fixed">
                                        <EditFormSettings>
                                            <PopUpSettings ScrollBars="None"></PopUpSettings>
                                        </EditFormSettings>
                                        <RowIndicatorColumn Visible="False">
                                            <HeaderStyle Width="20px"></HeaderStyle>
                                        </RowIndicatorColumn>
                                        <ExpandCollapseColumn Visible="False" Resizable="False">
                                            <HeaderStyle Width="20px"></HeaderStyle>
                                        </ExpandCollapseColumn>
                                        <Columns>
                                            <telerik:GridBoundColumn DataField="ID" HeaderText="Product Code" SortExpression="ID"
                                                UniqueName="ID">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="Name" HeaderText="Product Name" SortExpression="Name"
                                                UniqueName="Name" HeaderStyle-Width="150px" Visible="False">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="Model" HeaderText="Product Name" SortExpression="Model"
                                                UniqueName="Model" HeaderStyle-Width="250px">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="Company" HeaderText="Manufacturer" SortExpression="Company"
                                                UniqueName="Company" Visible="False">
                                            </telerik:GridBoundColumn>
                                            <%--<telerik:GridBoundColumn DataField="Status" HeaderText="Condition" SortExpression="Status"
                                        UniqueName="Status">
                                    </telerik:GridBoundColumn>--%>
                                            <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" />
                                        </Columns>
                                    </MasterTableView>
                                    <ClientSettings EnableRowHoverStyle="true">
                                        <ClientEvents OnRowSelected="TransmotionRowSelected"></ClientEvents>
                                        <Selecting AllowRowSelect="True"></Selecting>
                                    </ClientSettings>
                                </telerik:RadGrid>
                            </telerik:RadAjaxPanel>
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </td>
            <td valign="top" style="text-align: left" class="style9" rowspan="2">
                <telerik:RadDockZone ID="DockZone_DetailsGrid" runat="server" Height="470px" Width="245px"
                    Skin="WebBlue" UniqueName="DockZone_DetailsGrid" BackColor="#3a6ea5" BorderStyle="None">
                    <telerik:RadDock ID="Dock_DetailsGrid" runat="server" Width="245px" Height="470px"
                        Skin="WebBlue" UniqueName="Dock_DetailsGrid" DefaultCommands="None" BackColor="#3a6ea5"
                        DockMode="Docked" Pinned="True" BorderStyle="None" Title="Product Details">
                        <ContentTemplate>
                            <telerik:RadAjaxPanel ID="AjaxPanel_Details" runat="server" Height="200px" Width="300px"
                                OnAjaxRequest="AjaxPanel_Details_AjaxRequest" LoadingPanelID="LoadingPanel_Transmotion">
                                <telerik:RadGrid ID="DetailsGrid" runat="server" AutoGenerateColumns="False" GridLines="None"
                                    EnableAJAX="True" EnableAJAXLoadingTemplate="True" LoadingTemplateTransparency="55"
                                    ShowHeader="False" Skin="Web20" Width="245px" Style="overflow: hidden; direction: ltr;"
                                    Height="440px" OnItemCreated="DetailsGrid_ItemCreated">
                                    <MasterTableView ClientDataKeyNames="ID" ShowHeader="true" Width="250px" TableLayout="Fixed">
                                        <RowIndicatorColumn Visible="False">
                                            <HeaderStyle Width="20px"></HeaderStyle>
                                        </RowIndicatorColumn>
                                        <ExpandCollapseColumn Visible="False" Resizable="False">
                                            <HeaderStyle Width="20px"></HeaderStyle>
                                        </ExpandCollapseColumn>
                                        <Columns>
                                            <telerik:GridTemplateColumn HeaderText="Specification" UniqueName="SpecColumn" HeaderStyle-Width="3px">
                                                <ItemTemplate>
                                                    <div style="text-align: center">
                                                        <asp:Image ID="ProductImage" runat="server" Width="190px" ImageUrl='<%# (Eval("picUrl") is System.DBNull)? "~/Img/ImageNotAvailable.gif" : "~/Transmotion/" + Eval("picUrl") %>'
                                                            AlternateText="No preview available" Height="160px" BorderStyle="Solid" Visible="True" />
                                                    </div>
                                                    <br />
                                                    <asp:Literal ID="ltrlSpec" runat="server" Text='<%# Eval("Spec") + "<br/>" %>' />
                                                    <br />
                                                    <asp:HyperLink ID="HyperLink_Pdf" runat="server" Text="Download Specification Sheet"
                                                        NavigateUrl='<%# Eval("pdfUrl")  %>' />
                                                    <br />
                                                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://www.Transmotion.com">WebSite</asp:HyperLink>
                                                    <br />
                                                    <asp:LinkButton ID="LinkButton_Login" runat="server">Login</asp:LinkButton>
                                                    ,
                                                    <asp:LinkButton ID="LinkButton_Register" runat="server">Register</asp:LinkButton>
                                                </ItemTemplate>
                                                <HeaderStyle Width="20"></HeaderStyle>
                                            </telerik:GridTemplateColumn>
                                        </Columns>
                                        <EditFormSettings>
                                            <PopUpSettings ScrollBars="None"></PopUpSettings>
                                        </EditFormSettings>
                                    </MasterTableView>
                                </telerik:RadGrid>
                            </telerik:RadAjaxPanel>
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </td>
        </tr>
        <tr>
            <td class="style10" valign="top">
                <telerik:RadDockZone ID="DockZone_Bottom" runat="server" Height="230px" Width="200px"
                    Skin="WebBlue" UniqueName="DockZone_Bottom" BackColor="#3a6ea5" BorderStyle="None">
                    <telerik:RadDock ID="Dock_Bottom" runat="server" Width="230px" Height="220px" Skin="WebBlue"
                        UniqueName="Dock_Bottom" DefaultCommands="None" BackColor="#3a6ea5" DockMode="Docked"
                        Pinned="True" BorderStyle="None" Title="Surgie-chair series">
                        <ContentTemplate>
                            <br />
                            <div style="text-align: center">
                                <img src="Transmotion/Picture2.jpg" alt="Picture1" style="width: 190px; height: 160px" />
                            </div>
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </td>
        </tr>
    </table>
    <asp:TextBox ID="TextBox_Manufacturer" runat="server" Visible="False"></asp:TextBox>
</div>
<telerik:RadAjaxLoadingPanel ID="LoadingPanel_Transmotion" runat="server" Height="75px"
    Width="75px">
    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
        style="border: 0px;" />
</telerik:RadAjaxLoadingPanel>

 and

public void AjaxPanel_Details_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        string[] args = e.Argument.Split(':');

        if (args[0] == "Transmotion")
        {
            if (args[1] == "ShowDetail")
            {
                ShowDetail(Convert.ToInt32(args[2]));
            }
        }
    }

I have a AjaxManager on my main page and with an AjaxRequest Method i Create my user control Dyanamically :

public void AjaxManager_Main_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {

        string[] args = e.Argument.Split(':');

        if (args[0] == "Show_Transmotion")
        {
            LoadUserControl("wuc_Transmotion.ascx");
        }
}

It Shows But when i want to use this control after 2 click It Hides

What can i do ?

Regards ahmad

[Vlad]

Hi ahmad,

You can check this example for more info:
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Ajax/Examples/Common/LoadingUserControls/DefaultCS.aspx

Sincerely yours,
Vlad
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[ahmad moghadaskhoo]

Thanks but i have another question :

public void AjaxManager_Main_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {

        string[] args = e.Argument.Split(':');

        if (args[0] == "Show_Transmotion")
        {

            LoadUserControl("wuc_Transmotion.ascx");
        }

        if (args[0] == "Transmotion")
        {
            if (args[1] == "ShowDetail")
            {
                UserControl Transmotion = (UserControl)Page.FindControl(LatestLoadedControlName);

                ((wuc_Transmotion)Transmotion).ShowDetail(Convert.ToInt32(args[2]));
            }
        }
}

Transmotion variable is null.

any help?
regards
ahmad