show loading image at selected index of combo box

6 posts, 0 answers
  1. Sunny
    Sunny avatar
    26 posts
    Member since:
    Feb 2013

    Posted 10 Apr 2013 Link to this post

    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
  2. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 12 Apr 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sunny
    Sunny avatar
    26 posts
    Member since:
    Feb 2013

    Posted 14 Apr 2013 Link to this post

    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.

  5. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 17 Apr 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Sunny
    Sunny avatar
    26 posts
    Member since:
    Feb 2013

    Posted 19 Apr 2013 Link to this post

    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.
  7. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 24 Apr 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017