RadAjaxLoadingPanel center viewport

[John]

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?

[Maria Ilieva]

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

[Asutosh]

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

[Princy]

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.

[Asutosh]

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>

[Asutosh]

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?

[Princy]

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.

[Asutosh]

hi thanks for your reply
but still same problem arise

[Princy]

Hi Asutosh,

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

Thanks,
Princy.

[Princy]

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.