Loading panel shows a blank screen.

2 posts, 0 answers
  1. Shannon
    Shannon avatar
    6 posts
    Member since:
    Sep 2013

    Posted 14 Jul 2015 Link to this post

    I am trying to use  a loading panel on a RadGrid but when the loading panel fires it just turns the grid into a white blank screen.  Can you tell me why this is happening
    <%@ Page Title="" Language="C#" MasterPageFile="~/ARF.Master" AutoEventWireup="true" CodeBehind="EmployeeInfo.aspx.cs" Inherits="ARF.EmployeeInfo" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function openConfirmationWindow(ID) {
                    radWindow1.set_title(ID);
                    radWindow1.show();
                }
                function bookNowCloseClicking(sender, args) {
                    radWindow1.close();
                    togglePanels();               
                    args.set_cancel(true);
                }
                function bookNowClicking(sender, args) {
                    togglePanels();
                    args.set_cancel(true);
                }
                function cancelClicking(sender, args) {
                    radWindow1.close();
                    args.set_cancel(true);
                }
                function togglePanels() {
                    var step1Visible = panelStep1.style.display != "none";
                    panelStep1.style.display = step1Visible ? "none" : "";
                    panelStep2.style.display = step1Visible ? "" : "none";
            </script>
        </telerik:RadCodeBlock>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="cphNameDivision" runat="server">
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <div class="well-large whitebg featurett one-edge-shadow minheight">
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadPersistenceManager ID="RadPersistenceManager1" runat="server" StorageProviderKey="OverviewDemoStorage">
                <PersistenceSettings>
                    <telerik:PersistenceSetting ControlID="RadGrid1" />
                </PersistenceSettings>
            </telerik:RadPersistenceManager>              
            <div>           
                <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="True"
                    OnNeedDataSource="RadGrid1_NeedDataSource"
                    OnItemCommand="RadGrid1_ItemCommand" CellSpacing="0" GridLines="None">
                    <GroupingSettings CaseSensitive="false" />
                    <MasterTableView AutoGenerateColumns="false" TableLayout="Fixed">                  
                        <HeaderStyle Width="102px" />
                        <Columns>
                            <telerik:GridBoundColumn DataField="FirstLastName" HeaderText="Name" UniqueName="FirstLastName">
                                <HeaderStyle Width="110px" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Department" HeaderText="Department" UniqueName="Department">
                                <HeaderStyle Width="200px" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="EmploymentType" HeaderText="Employment Type" UniqueName="EmploymentType">
                                <HeaderStyle Width="110px" />
                            </telerik:GridBoundColumn>
                        </Columns>
                        <NestedViewTemplate>                       
                            <div class="carBackground">                           
                                <div style="float: right; width: 85%">
                                    <strong>
                                    <div class="EmployeeName">
                                        <%# Eval("FirstName") %>
                                        <%# Eval("MI") %>
                                        <%# Eval("LastName") %>
                                    </div>
                                    </strong>
                                    <hr class="lineSeparator" />
                                    <table width="50%" class="EmployeeInfo">                                   
                                        <tr>
                                            <td style="text-align: right;">
                                                <strong>Division:</strong>
                                            </td>
                                            <td>
                                                <telerik:RadDropDownList ID="ddlDivision" runat="server" DropDownHeight="200px" Width="200px"
                                                    DefaultMessage="Select a Division" DropDownWidth="200px"
                                                    DataValueField="ID" DataTextField="Name"  DataSourceID="sdsDivisions" SelectedValue='<%# Bind("DivisionID") %>'>
                                                </telerik:RadDropDownList>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;">
                                                <strong>Turnpike:</strong>
                                            </td>
                                            <td>
                                                <telerik:RadDropDownList ID="ddlDivisions" runat="server" DropDownHeight="200px" Width="200px"
                                                    DefaultMessage="Select a Division" DropDownWidth="200px"
                                                    DataValueField="ID" DataTextField="Name"  DataSourceID="sdsTurnpikes" SelectedValue='<%# Bind("TurnpikeID") %>'>
                                                </telerik:RadDropDownList>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;">
                                                <strong>Location:</strong>
                                            </td>
                                            <td>
                                                <telerik:RadDropDownList ID="ddlLocations" runat="server" DropDownHeight="200px" Width="200px"
                                                    DefaultMessage="Select a Location" DropDownWidth="200px"
                                                    DataValueField="ID" DataTextField="CodeDescription"  DataSourceID="sdsLocations" SelectedValue='<%# Bind("LocationID") %>'>
                                                </telerik:RadDropDownList>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;">
                                                <strong>Supervisor:</strong>
                                            </td>
                                            <td>
                                                <telerik:RadDropDownList ID="ddlSupervisors" runat="server" DropDownHeight="200px" Width="200px"
                                                    DefaultMessage="Select a Supervisor" DropDownWidth="200px"
                                                    DataValueField="ID" DataTextField="Name"  DataSourceID="sdsSupervisors" SelectedValue='<%# Bind("SupervisorID") %>'>
                                                </telerik:RadDropDownList>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;">
                                                <strong>Employment Type:</strong>
                                            </td>
                                            <td>
                                                <telerik:RadTextBox ID="txtEmploymentType" runat="server" Text='<%# Bind("EmploymentType") %>'>
                                                </telerik:RadTextBox>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;">
                                                <strong>Job Title:</strong>
                                            </td>
                                            <td>
                                                <telerik:RadDropDownList ID="ddlJobTitles" runat="server" DropDownHeight="200px" Width="275px"
                                                    DefaultMessage="Select a Job Title" DropDownWidth="275px"
                                                    DataValueField="ID" DataTextField="Name"  DataSourceID="sdsJobTitles" SelectedValue='<%# Bind("JobTitleID") %>'>
                                                </telerik:RadDropDownList>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;">
                                                <strong>Approves Leave:</strong>
                                            </td>
                                            <td>
                                                <asp:CheckBox ID="chkApprovesLeave" runat="server"  Checked='<%# Bind("ApprovesLeave") %>'/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;">
                                                <strong>Comp Time at 1.5:</strong>
                                            </td>
                                            <td>
                                                <asp:CheckBox ID="chkTimeAndHalf" runat="server"  Checked='<%# Bind("CompTimeAndAHalf") %>'/>                                           
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;">
                                                <strong>Hire Date:</strong>
                                            </td>
                                            <td>
                                                <asp:TextBox ID="txtHireDate" runat="server" Text='<%# Eval("HireDate") %>'></asp:TextBox>
                                                <asp:ImageButton ID="imgPopup" ImageUrl="~/img/calendar.png" ImageAlign="Bottom"
                                                    runat="server" />
                                                <cc1:CalendarExtender ID="Calendar1" PopupButtonID="imgPopup" runat="server" TargetControlID="txtHireDate"
                                                    Format="dd/MM/yyyy">
                                                </cc1:CalendarExtender>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;">
                                                <strong>Termination Date:</strong>
                                            </td>
                                            <td>
                                                <asp:TextBox ID="txtTerminationDate" runat="server" Text='<%# Eval("ExpireDate") %>'></asp:TextBox>
                                                <asp:ImageButton ID="ImageButton1" ImageUrl="~/img/calendar.png" ImageAlign="Bottom"
                                                    runat="server" />
                                                <cc1:CalendarExtender ID="Calendar2" PopupButtonID="ImageButton1" runat="server" TargetControlID="txtTerminationDate"
                                                    Format="dd/MM/yyyy">
                                                </cc1:CalendarExtender>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;">
                                                <strong>Termination Type:</strong>
                                            </td>
                                            <td>
                                                <telerik:RadDropDownList ID="ddlTerminationType" runat="server" DropDownHeight="200px" Width="275px"
                                                    DefaultMessage="Select a Termination Type" DropDownWidth="275px"
                                                    DataValueField="ID" DataTextField="Name"  DataSourceID="sdsTerminationTypes" SelectedValue='<%# Bind("TerminationTypeID") %>'>
                                                </telerik:RadDropDownList>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;">
                                                <strong>Termination Comments:</strong>
                                            </td>
                                            <td>
                                                <telerik:RadTextBox runat="server" ID="txtTerminationComments" Width="216px" EmptyMessage="Enter termination comments" TextMode="MultiLine" Height="100px" Resize="None"></telerik:RadTextBox>
                                                <%# Eval("TerminationComments") %>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>
                                                <telerik:RadButton ID="btnSubmit" runat="server" CommandName="SaveEmployee" CommandArgument='<%# Eval("EmployeeID") %>' Text="Save Employee">
                                                </telerik:RadButton>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div style="clear: both">
                                </div>
                            </div>
                        </NestedViewTemplate>
                        <PagerStyle PageSizes="5,10,20,50" PagerTextFormat="{4}<strong>{5}</strong> employees matching your search criteria"
                            PageSizeLabelText="Employees per page:" />
                    </MasterTableView>
                    <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true">
                        <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="" />
                    </ClientSettings>
                </telerik:RadGrid>
            </div>       
            <asp:SqlDataSource ID="sdsDivisions" runat="server" ConnectionString="<%$ ConnectionStrings:ARF %>"
                SelectCommand="usp_Get_All_Divisions" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
            <asp:SqlDataSource ID="sdsTurnpikes" runat="server" ConnectionString="<%$ ConnectionStrings:ARF %>"
                SelectCommand="usp_Get_All_Turnpikes" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
            <asp:SqlDataSource ID="sdsLocations" runat="server" ConnectionString="<%$ ConnectionStrings:ARF %>"
                SelectCommand="usp_Get_All_Locations" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
            <asp:SqlDataSource ID="sdsSupervisors" runat="server" ConnectionString="<%$ ConnectionStrings:ARF %>"
                SelectCommand="usp_Get_All_Supervisors" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
            <asp:SqlDataSource ID="sdsJobTitles" runat="server" ConnectionString="<%$ ConnectionStrings:ARF %>"
                SelectCommand="usp_Get_All_JobTitles" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
            <asp:SqlDataSource ID="sdsTerminationTypes" runat="server" ConnectionString="<%$ ConnectionStrings:ARF %>"
                SelectCommand="usp_Get_Termination_Types" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
        </div>
    </asp:Content>
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 14 Jul 2015 Link to this post

    Hi Shannon,

    You need to specify the Skin property of the RadAjaxLoadingPanel or use custom image for the control:
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top