Set RadAjaxLoadingPanel Image OnAjaxRequest

[Muhammad]

Hi,

I am using RadAjaxPanel and inside that panel I have one radcombobox in which I am displaying All Countries. I want to ask that is it possible to show a flag of a country as a loading panel image when user selects a country from radcombobox ? and I would like to set that image URL from server-side.

<telerik:RadCodeBlock ID="radcodeblock" runat="server">
    <script language="javascript" type="text/javascript">
        function OnClientSelectedIndexChanged(sender, eventArgs) {
            var ajaxManager = $find("<%= rapPSMain.ClientID %>");
            var item = eventArgs.get_item();
            ajaxManager.ajaxRequest(item.get_text());
        }
    </script>
</telerik:RadCodeBlock>
<telerik:RadAjaxLoadingPanel ID="alpProductionSechduleMain" runat="server" Height="75px"
    MinDisplayTime="5" Width="75px">
    <asp:Image ID="imgAjaxImage" runat="server" AlternateText="Loading..." />
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="rapPSMain" RequestQueueSize="5" runat="server" Width="100%"
    OnAjaxRequest="rapPSMain_AjaxRequest" EnableOutsideScripts="True" HorizontalAlign="NotSet"
    ScrollBars="None" LoadingPanelID="alpProductionSechduleMain">
    <b>Order Destination :</b>
    <telerik:RadComboBox ID="rcbCountry" runat="server" Skin="Vista" Height="100px" Width="200px"
        DataTextField="CountryName" DataValueField="CountryKey" AllowCustomText="true"
        AutoPostBack="true" MarkFirstMatch="True" HighlightTemplatedItems="True" DropDownWidth="200px"
        OnClientSelectedIndexChanged="OnClientSelectedIndexChanged" EmptyMessage="- Select Country -">
    </telerik:RadComboBox>
</telerik:RadAjaxPanel>

[Iana Tsolova]

Hello Muhammad,

You can handle the RadAjaxPanel OnRequestStart client-side event. There find the Image in the RadAjaxLoadingPanel declaration and set its styles so it shows the desired image.

Greetings,
Iana
the Telerik team

[Muhammad]

Hi,

Thanks for your help ... I am trying to find my image control but I am getting null.

<script language="javascript" type="text/javascript">
        function AjaxRequestStart(sender, args) {

            var image = $find('<%= alpProductionSechduleMain.FindControl("imgAjaxImage").ClientID %>')





        }


    </script>

[Iana Tsolova]

Hi Muhammad,

Use $get() instead of $find().

http://msdn.microsoft.com/en-us/library/bb397441%28v=VS.90%29.aspx
http://msdn.microsoft.com/en-us/library/bb397717.aspx

Regards,
Iana
the Telerik team

[Muhammad]

Hi,

Can you please explain me what's the difference between $find and $get. I have already tried both of them but still I am getting null.

<telerik:RadCodeBlock ID="radcodeblock" runat="server">
    <script language="javascript" type="text/javascript">
        function AjaxRequestStart(sender, args) {

            var image = $get('<%= alpProductionSechduleMain.FindControl("imgAjaxImage").ClientID %>')

            alert(image);



        }


    </script>
</telerik:RadCodeBlock>
<telerik:RadAjaxLoadingPanel ID="alpProductionSechduleMain" runat="server" Height="75px"
    MinDisplayTime="5" Width="75px">
    <asp:Image ID="imgAjaxImage" runat="server" AlternateText="Loading..." Visible="false"
        ImageUrl="~/Portals/0/Images/CircleAjaxLoading.gif" />
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="rapPSMain" RequestQueueSize="5" runat="server" Width="100%" ClientEvents-OnRequestStart="AjaxRequestStart"
    OnAjaxRequest="rapPSMain_AjaxRequest" EnableOutsideScripts="True" HorizontalAlign="NotSet"
    ScrollBars="None" LoadingPanelID="alpProductionSechduleMain">
    <b>Order Destination :</b>
    <telerik:RadComboBox ID="rcbCountry" runat="server" Skin="Vista" Height="100px" Width="200px"
        DataTextField="CountryName" DataValueField="CountryKey" AllowCustomText="true"
        AutoPostBack="true" MarkFirstMatch="True" HighlightTemplatedItems="True" DropDownWidth="200px"
         EmptyMessage="- Select Country -">
    </telerik:RadComboBox>
</telerik:RadAjaxPanel>

[Iana Tsolova]

Hello Muhammad,

$get() works for me. Check the attached sample.
For more information on the mentioned methods, refer to the articles provided in my previous post.

Greetings,
Iana
the Telerik team

[Muhammad]

Hi,

Thanks for your quick response. But my scenario has changed and now I can't set the image on client-side because I have to make a database call to set an image for my loading panel. Is it possible that when user selects a country from a radcombobox I make a database call and sets an image according to the selected country. Because when I make a query to the database only then I will know which image to set for that Loading Panel.

Because I am still confused that if I use a RequestStart client-side event how it gonna help me make a query and then set the image for that loading panel. Please help me !!!

<telerik:RadAjaxPanel ID="rapPSMain" RequestQueueSize="5" runat="server" Width="100%" ClientEvents-OnRequestStart="RequestStart" 

       EnableOutsideScripts="True" HorizontalAlign="NotSet" OnAjaxRequest="rapPSMain_AjaxRequest"

       ScrollBars="None" LoadingPanelID="alpProductionSechduleMain">

       <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">

           <asp:Image ID="Image1" runat="server" />

       </telerik:RadAjaxLoadingPanel>

       <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

           <script type="text/javascript">

 

 

               function OnClientSelectedIndexChanged(sender, eventArgs) {

 

                   var item = eventArgs.get_item();
 

                    $find('<%= rapPSMain.ClientID%>').ajaxRequest(item.Value);                    

                    

 

 

               }

           </script>

       </telerik:RadCodeBlock>

       <asp:Panel ID="Panel1" runat="server" Width="200px" Height="200px">

           <telerik:RadComboBox ID="rcbCountry" runat="server" Skin="Default" Height="100px" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"

               Width="200px" DataTextField="CountryName" DataValueField="CountryKey" AllowCustomText="true"

               MarkFirstMatch="True" HighlightTemplatedItems="True" DropDownWidth="200px"

               EmptyMessage="- Select Country -">

           </telerik:RadComboBox>

       </asp:Panel>

   </telerik:RadAjaxPanel>

[Iana Tsolova]

Hi Muhammad,

For the proper image to be displayed in the loading panel, you should have it set not later than the OnRequestStart event. Because the loading panel is displayed just after that, and you cannot change the loading image during the postback. What you can do in your case, is to implement a WebService, or PageMethod, which will return the proper image. Call it on the client, in the OnRequestStart event and see if this works for you.

Best wishes,
Iana
the Telerik team

[Muhammad]

Thank you so much ... I have implemented a web-service ...