show loading image at selected index of combo box

[Sunny]

Hello,

I am currently using Radcombobox in my project now at selected index changed i am displaying Two text boxes and RadGrid so the problem is when i Select any company from combobox than Textboxes and radgrid dispalying after some seconds so at that time i want to show an any loading image or any Waiting Text so please tell me how can i do this asap. I m attaching some sceren shot

1) screenhot radcombox1 intially open
2) screenhot radcombox2 when i will select any company from my list
3) screenhot radcombox3 after selecting textbox and rad grid will display

i hope you understand my problem.

thanx in advance

[Nencho]

Hello Sunny,

I would suggest you to us a RadAjaxLoadingPanel and place the controls inside a RadAjaxPanel. I have prepared a sample page for you, implementing the above suggestion. In addition, here is a video demonstrating the behavior at my end.

Please find the sample page attached.

Kind regards,
Nencho
the Telerik team

[Sunny]

Hello Nencho,

I also have taken and follow your setting but i am still not getting any image or text. so Here is my code. And in my below code i had taken rad ajax panel both inside and outside the div but not getting and before your code i was using below code using ajax manager

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
<telerik:AjaxSetting EventName="OnSelectedIndexChanged" AjaxControlID="RadComboBox_Materialreceived">
                <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="material_grid" />
                </UpdatedControls>
            </telerik:AjaxSetting>
</telerik:RadAjaxManager>

BELOW IS MY CODE:
 
<div id="MaterialReceived" class="popup_block" style="position: absolute !important;">
        <center>
            <div class="popup-heading">
                <h2>
                    Add Receipt</h2>
            </div>
            <div class="clearfix">
            </div>
            <div class="error-msg">
             
            </div>
            <center>
                <div class="outer-form">
                    <div class="left-label">
                        <span style="line-height:34px!important;">Company:</span>
                    </div>
                    <div class="right-combo">
                        <telerik:RadComboBox ID="RadComboBox_Materialreceived" MarkFirstMatch="true" AutoPostBack="true"
                            EnableTextSelection="true" Width="325px" Height="100px" runat="server" Style="z-index: 9999999;
                            margin-top: 6px;" OnSelectedIndexChanged="RadComboBox_Materialreceived_SelectedIndexChanged">
                        </telerik:RadComboBox>
                    </div>
                    <div class="clearfix">
                    </div>
                    <div id="material_grid" visible="false" runat="server">
                    <div class="left-label">
                        <span>Invoice #:</span>
                    </div>
                    <div class="right-textboxx">
                        <asp:TextBox ID="TextBoxInvoice" runat="server"></asp:TextBox>
                    </div>
                    <div class="left-labelll">
                        <span>Date:</span>
                    </div>
                    <div class="right-textboxx">
                        <asp:TextBox ID="TextBoxdate" runat="server" ValidationGroup="Material-received"></asp:TextBox>
                        <asp:CalendarExtender ID="CalendarExtender6" runat="server" TargetControlID="TextBoxdate">
                        </asp:CalendarExtender>
                         <label style="color: red; line-height:20px!important;" >
                            *</label>
                        <asp:RequiredFieldValidator ID="Required_Material_date" runat="server" CssClass="validation-error"
                            ValidationGroup="Material-received" style="line-height: 40px"  ControlToValidate="TextBoxdate"
                            ErrorMessage="Date Required" ForeColor="Red" />
                    </div>
                    <div class="clearfix">
                    </div>
                   <telerik:RadGrid ID="RadGrid_POPUP_MaterialReceived" runat="server" AutoGenerateColumns="False"
                        AllowSorting="True" CellSpacing="0" GridLines="None">
                        <ClientSettings>
                            <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="175px" />
                        </ClientSettings>
                        <MasterTableView AutoGenerateColumns="false" DataKeyNames="ID">
                            <CommandItemSettings ExportToPdfText="Export to PDF" />
                            <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">
                            </RowIndicatorColumn>
                            <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">
                            </ExpandCollapseColumn>
                            <Columns>
                                <telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"
                                    HeaderText="Company" UniqueName="TemplateColumn1" HeaderStyle-HorizontalAlign="Center"
                                    HeaderStyle-VerticalAlign="Middle">
                                    <ItemTemplate>
                                        <%# Eval("CompanyName")%>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"
                                    HeaderText="Component" UniqueName="TemplateColumn2" HeaderStyle-HorizontalAlign="Center"
                                    HeaderStyle-VerticalAlign="Middle">
                                     <HeaderStyle Width="100px" />
                                    <ItemTemplate>
                                        <%# Eval("LineDesc")%>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"
                                    HeaderText="Size" UniqueName="TemplateColumn3" HeaderStyle-HorizontalAlign="Center"
                                    HeaderStyle-VerticalAlign="Middle">
                                   
                                    <ItemTemplate>
                                        <%# Eval("LineSize")%>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"
                                    HeaderText="Ordered" UniqueName="TemplateColumn4" HeaderStyle-HorizontalAlign="Center"
                                    HeaderStyle-VerticalAlign="Middle">
                                      <HeaderStyle Width="75px" />
                                    <ItemTemplate>
                                        <%# String.Format("{0:n0}", Eval("LineQty"))%>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"
                                    HeaderText="Received TD" UniqueName="TemplateColumn5" HeaderStyle-HorizontalAlign="Center"
                                    HeaderStyle-VerticalAlign="Middle">
                                    <HeaderStyle Width="75px" />
                                    <ItemTemplate>
                                     
                                        <%# Eval("Quantity_received")%>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"
                                    HeaderText="Received Qty" UniqueName="TemplateColumn6" HeaderStyle-HorizontalAlign="Center"
                                    HeaderStyle-VerticalAlign="Middle">
                                    
                                    <ItemTemplate>
                                        <asp:TextBox ID="txt_receivedqty" onblur="return CheckWhole(this.id);"  runat="server"></asp:TextBox>
                                           <asp:Label ID="lblerror" runat="server" Style="font-size: 14px; color: Red;" CssClass="validation-error" />
                                         <asp:FilteredTextBoxExtender ID="FilteredTextBoxExtender_receivedqty" runat="server"
                Enabled="True" TargetControlID="txt_receivedqty" ValidChars="1234567890" FilterType="Custom">
            </asp:FilteredTextBoxExtender>
                                      <%--  <asp:RequiredFieldValidator ID="Req_txt_receivedqty" runat="server" ErrorMessage="Please enter positive whole numbers only."
                                            ControlToValidate="txt_receivedqty" ForeColor="Red" Style="margin: 5px"></asp:RequiredFieldValidator>--%>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                            </Columns>
                            <EditFormSettings>
                                <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                                </EditColumn>
                            </EditFormSettings>
                        </MasterTableView>
                        <FilterMenu EnableImageSprites="False">
                        </FilterMenu>
                    </telerik:RadGrid>
                    </div>
                    <div class="form_button">
                        <div class="clearfix" style="margin-bottom: 10px;">
                        </div>
                        <input id="btn_SubmitMaterialReceived" value="Submit" type="submit" style="width: 66px;"
                            tabindex="4" runat="server" class="login-btn2" validationgroup="Material-received"
                            onserverclick="SubmitMaterialReceived" onclick="return Materialreceived_ClientClick1();" />
                        <asp:Button ID="Button2" Style="width: 66px;" TabIndex="5" runat="server" CausesValidation="false"
                            class="login-btn2" OnClientClick="return Hide_Popup_Material_received();" Text="Cancel" />
                    </div>
                </div>
            </center>
            <br />
            <div class="error-msg">
                <asp:Label ID="lblgrid" runat="server" Style="font-size: 14px; color: Red;" CssClass="validation-error" />
            </div>
        </center>
    </div>


i hope this code can helps you to understand my requirement so tell me asap.

Thanks in advance.

[Nencho]

Hello Sunny,

Would you specify what issues are you currently facing? In addition, were you able to test the provided sample at your side and if so, were you able to observe the behavior, demonstrated in the provided video?

Regards,
Nencho
the Telerik team

[Sunny]

Hello Nencho,

As you can see my above code i have a controls in popup and all controls in different-2 div's. and i have use your code and place all my controls inside the rad ajax panel with rad ajax loading panel but its not displaying any loading image as showing in your code.

[Nencho]

Hello Sunny,

I had inspected the provided code snippet, but I was unable to locate the RadAjaxLoadingPanel. I have added one and it seems that the behavior is correct. Here is a video, demonstrating the behavior at my end. In addition, I am sending you the slightly modified sample page, in order to observe the implementation at your end.

Regards,
Nencho
the Telerik team