RadAjaxLoadingPanel center viewport

10 posts, 0 answers
  1. John
    John avatar
    22 posts
    Member since:
    Apr 2012

    Posted 24 Jan 2014 Link to this post


    I have a RadAjaxLoadingPanel specified as follows in my master page:
    <telerik:RadAjaxLoadingPanel id="RadAjaxLoadingPanel1" Runat="server" IsSticky="true" skin="Silk" InitialDelayTime="250" Style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;">             
         </telerik:RadAjaxLoadingPanel>

    my understanding is that this code will center the panel on the screen. However, it appears it instead centers it in the context of the entire document. That is, if the page is two screens long, the panel will appear cut in half at the bottom of the screen. Is there a solution to make this work as expected?

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 24 Jan 2014 Link to this post

    Hello John,

    I would suggest you to test the Code Library below and verify if it covers your requirements:

    http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-center-image-in-a-radajaxloadingpanel.aspx

    Regards,
    Maria Ilieva
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Asutosh
    Asutosh avatar
    130 posts
    Member since:
    Sep 2013

    Posted 25 Jul 2014 in reply to Maria Ilieva Link to this post

    hi 
    i am using radajaxloading panel in my page outside radgrid
    when grid has no scroll its wrks fine but when it has vertical and horizontal scroll radajaxloading size get increase ans also it make scroll in my page also
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Jul 2014 in reply to Asutosh Link to this post

    Hi Asutosh,

    Please take a look into the sample code snippet to achieve your scenario.

    ASPX:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadButton1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadButton ID="RadButton1" runat="server" Text="Ajaxify Grid" OnClick="RadButton1_Click">
    </telerik:RadButton>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Silk">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" GridLines="None" AllowSorting="True" AllowPaging="True" PageSize="50" Width="900px" OnColumnCreated="RadGrid1_ColumnCreated">
        <ClientSettings>
            <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" FrozenColumnsCount="2">
            </Scrolling>
        </ClientSettings>
        <HeaderStyle Width="225px"></HeaderStyle>
        <PagerStyle PageSizeControlType="RadDropDownList" Mode="NextPrevAndNumeric"></PagerStyle>
    </telerik:RadGrid>

    C#:
    protected void RadGrid1_ColumnCreated(object sender, Telerik.Web.UI.GridColumnCreatedEventArgs e)
    {
        switch (e.Column.UniqueName)
        {
            case "Bool":
                e.Column.HeaderText = "Manager";
                break;
            case "Region":
                e.Column.Visible = false;
                break;
        }
    }
    protected void RadButton1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(1000);
    }

    Please provide your code if it doesn't help.
    Thanks,
    Princy.
  6. Asutosh
    Asutosh avatar
    130 posts
    Member since:
    Sep 2013

    Posted 02 Aug 2014 in reply to Princy Link to this post

    hi princy
    thanks for  your reply
    at my end its not working
    i have code as below
    i have put radgrid in radajaxloadingpanel
    how to achieve that?



     <telerik:RadAjaxPanel ID="RadAjaxPanel8" runat="server" LoadingPanelID="RadAjaxLoadingPanel8" Skin="Vista">
     <div id="Div_firstchart_Data_Aco" runat="server" visible="true" style="margin-top:5px">
                                                                    <telerik:RadGrid ID="RadGrid_chronical_dieses_acoParticipantGroup_Grid_Aco" runat="server" Width="99.5%" ShowStatusBar="true" AutoGenerateColumns="false"
                                                                        AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="true" PageSize="10" Skin="Silk" OnNeedDataSource="RadGrid_chronical_dieses_acoParticipantGroup_Grid_Aco_NeedDataSource"
                                                                        OnDetailTableDataBind="RadGrid_chronical_dieses_acoParticipantGroup_Grid_Aco_DetailTableDataBind">
                                                                        <PagerStyle Mode="Slider"></PagerStyle>
                                                                        <GroupingSettings CaseSensitive="false" />
                                                                        <MasterTableView Width="100%" DataKeyNames="acoid" AllowMultiColumnSorting="True" PageSize="10">
                                                                            <DetailTables>
                                                                                <telerik:GridTableView Name="" Width="100%" AllowFilteringByColumn="true" PageSize="10" AllowPaging="true">
                                                                                    <Columns>

                                                                                        <telerik:GridBoundColumn SortExpression="Benehicno" HeaderText="Hic No." HeaderButtonType="TextButton"  EmptyDataText="Not Available" 
                                                                                            DataField="Benehicno">
                                                                                        </telerik:GridBoundColumn>
                                                                                        <telerik:GridBoundColumn SortExpression="BeneName" HeaderText="Patient Name" HeaderButtonType="TextButton"  EmptyDataText="Not Available"
                                                                                            DataField="BeneName">
                                                                                        </telerik:GridBoundColumn>
                                                                                        <telerik:GridBoundColumn SortExpression="State" HeaderText="State" HeaderButtonType="TextButton"  EmptyDataText="Not Available"
                                                                                            DataField="State">
                                                                                        </telerik:GridBoundColumn>
                                                                                        <telerik:GridBoundColumn SortExpression="County" HeaderText="County" HeaderButtonType="TextButton"  EmptyDataText="Not Available"
                                                                                            DataField="County">
                                                                                        </telerik:GridBoundColumn>
                                                                                         <telerik:GridBoundColumn SortExpression="AvgRiskScore" HeaderText="Risk Score" HeaderButtonType="TextButton"  EmptyDataText="Not Available" 
                                                                                            DataField="AvgRiskScore">
                                                                                        </telerik:GridBoundColumn>
                                                                                    </Columns>
                                                                                </telerik:GridTableView>
                                                                            </DetailTables>
                                                                            <Columns>
                                                                                <telerik:GridBoundColumn SortExpression="acoid" HeaderText="acoid" HeaderButtonType="TextButton"  EmptyDataText="Not Available"
                                                                                    DataField="acoid">
                                                                                </telerik:GridBoundColumn>
                                                                                <telerik:GridBoundColumn SortExpression="AvgRiskScore" HeaderText="Avg Risk Score" HeaderButtonType="TextButton"  EmptyDataText="Not Available" DataFormatString="{0:N2}"
                                                                                    DataField="AvgRiskScore">
                                                                                </telerik:GridBoundColumn>


                                                                            </Columns>
                                                                        </MasterTableView>
                                                                    </telerik:RadGrid>
                                                                </div>

    </telerik:RadAjaxPanel>
  7. Asutosh
    Asutosh avatar
    130 posts
    Member since:
    Sep 2013

    Posted 02 Aug 2014 in reply to Princy Link to this post

    and also i want loading panel on grid pagging and searchig also
    loading panel is showing but its size get increase
    how to solve that?
  8. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 03 Aug 2014 in reply to Asutosh Link to this post

    Hi Asutosh,

    Try to do the following modification in your code snippet and remove the LoadingPanelID from the RadAjaxLoadingPanel.

    ASPX:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    Thanks,
    Princy.
  9. Asutosh
    Asutosh avatar
    130 posts
    Member since:
    Sep 2013

    Posted 04 Aug 2014 in reply to Princy Link to this post

    hi thanks for your reply
    but still same problem arise
  10. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Aug 2014 in reply to Asutosh Link to this post

    Hi Asutosh,

    Unfortunately I couldn't replicate the issue at my end.

    Thanks,
    Princy.
  11. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Aug 2014 in reply to Asutosh Link to this post

    Hi Asutosh,

    Please make the following correction in the above post. Try to remove the LoadingPanelID from the RadAjaxPanel and try to mention the RadAjaxManager as posted above. The better approach is only specify the RadAjaxManager for RadGrid. 

    Thanks,
    Princy.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017