I'm trying to achieve the same effect while loading a grid as the demos (e.g. http://demos.telerik.com/aspnet-ajax/ajax/examples/manager/partialajaxification/defaultcs.aspx). But when my grid is updating, the RadAjaxPanel is set to display:hidden while the RadAjaxLoadingPanel is displayed. I want the semi-transparent contents of the loading panel to be displayed on top of the grid, like the demo. How can I make the ajax panel contents remain visible?
3 Answers, 1 is accepted
0
Hi Jesse,
Generally, this is the default and expected behavior:
http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/transparency/defaultcs.aspx
Can you please double check whether you have any setting or CSS rule interfering with the loading panel transparency?
Regards,
Eyup
Telerik
Generally, this is the default and expected behavior:
http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/transparency/defaultcs.aspx
Can you please double check whether you have any setting or CSS rule interfering with the loading panel transparency?
Regards,
Eyup
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.
0
Jesse
Top achievements
Rank 1
Veteran
answered on 03 Sep 2013, 04:43 PM
Thanks Eyup. The transparency is working correctly. I realized I was misunderstanding the RadAjaxManager and was using both
it and the RadUpdatePanel so I've since abandoned the panel, but the
problem still occurs. The the problem is something hides the Grid when a postback is triggered. The grid markup gets changed from:
to:
and then back to visibility:visible once the update completes. Maybe I have something else configured incorrectly. Here is my code:
And CSS:
<
div
class
=
"RadGrid RadGrid_Default"
id
=
"PaymentHistory1_RadGrid1"
tabindex
=
"0"
>
to:
<
div
class
=
"RadGrid RadGrid_Default"
id
=
"PaymentHistory1_RadGrid1"
style
=
"visibility: hidden;"
tabindex
=
"0"
>
and then back to visibility:visible once the update completes. Maybe I have something else configured incorrectly. Here is my code:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PaymentHistory.ascx.cs"
Inherits="PRGWebAccounts.UserControls.PaymentHistory" %>
<
telerik:RadAjaxManagerProxy
ID
=
"testAjaxManagerProxy"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"btnLoadHistory"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadGrid1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManagerProxy
>
<
div
style
=
"font: 9pt arial, tahoma"
>
<
span
>From </
span
>
<
telerik:RadDatePicker
ID
=
"dpStartDate"
runat
=
"server"
>
</
telerik:RadDatePicker
>
<
span
>To </
span
>
<
telerik:RadDatePicker
ID
=
"dpEndDate"
runat
=
"server"
>
</
telerik:RadDatePicker
>
<
asp:Button
ID
=
"btnLoadHistory"
runat
=
"server"
Text
=
"Go"
CausesValidation
=
"False"
Style
=
"vertical-align: bottom"
/>
<
asp:CompareValidator
ID
=
"CompareValidator1"
runat
=
"server"
ErrorMessage
=
"Invalid Date Range"
ControlToCompare
=
"dpEndDate"
ControlToValidate
=
"dpStartDate"
Operator
=
"LessThanEqual"
Type
=
"Date"
></
asp:CompareValidator
>
</
div
>
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
AllowSorting
=
"True"
AutoGenerateColumns
=
"False"
CellSpacing
=
"0"
GridLines
=
"None"
DataSourceID
=
"PaymentsDataSource"
>
<
ClientSettings
>
<
Scrolling
AllowScroll
=
"True"
UseStaticHeaders
=
"True"
/>
</
ClientSettings
>
<
MasterTableView
DataSourceID
=
"PaymentsDataSource"
DataKeyNames
=
"OMSID"
HierarchyLoadMode
=
"Client"
>
<
DetailTables
>
<
telerik:GridTableView
runat
=
"server"
DataSourceID
=
"ObjectDataSource2"
HierarchyLoadMode
=
"ServerBind"
>
<
ParentTableRelation
>
<
telerik:GridRelationFields
DetailKeyField
=
"FamilyPaymentID"
MasterKeyField
=
"OMSID"
/>
</
ParentTableRelation
>
<
CommandItemSettings
ExportToPdfText
=
"Export to PDF"
/>
<
RowIndicatorColumn
FilterControlAltText
=
"Filter RowIndicator column"
Visible
=
"True"
>
<
HeaderStyle
Width
=
"20px"
/>
</
RowIndicatorColumn
>
<
ExpandCollapseColumn
FilterControlAltText
=
"Filter ExpandColumn column"
Visible
=
"True"
>
<
HeaderStyle
Width
=
"20px"
/>
</
ExpandCollapseColumn
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"TransactionDescription"
FilterControlAltText
=
"Filter Description column"
HeaderText
=
"Description"
UniqueName
=
"Description"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"PaymentAmount"
FilterControlAltText
=
"Filter Amount column"
HeaderText
=
"Amount"
UniqueName
=
"Amount"
DataFormatString
=
"{0:c}"
>
</
telerik:GridBoundColumn
>
</
Columns
>
<
EditFormSettings
>
<
EditColumn
FilterControlAltText
=
"Filter EditCommandColumn column"
>
</
EditColumn
>
</
EditFormSettings
>
</
telerik:GridTableView
>
</
DetailTables
>
<
CommandItemSettings
ExportToPdfText
=
"Export to PDF"
></
CommandItemSettings
>
<
RowIndicatorColumn
Visible
=
"True"
FilterControlAltText
=
"Filter RowIndicator column"
>
<
HeaderStyle
Width
=
"20px"
></
HeaderStyle
>
</
RowIndicatorColumn
>
<
ExpandCollapseColumn
Visible
=
"True"
FilterControlAltText
=
"Filter ExpandColumn column"
>
<
HeaderStyle
Width
=
"20px"
></
HeaderStyle
>
</
ExpandCollapseColumn
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"PaymentDate"
DataType
=
"System.DateTime"
FilterControlAltText
=
"Filter PaymentDate column"
HeaderText
=
"Date"
UniqueName
=
"PaymentDate"
DataFormatString
=
"{0:d}"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"PaymentTypeName"
FilterControlAltText
=
"Filter PaymentTypeName column"
HeaderText
=
"PaymentTypeName"
SortExpression
=
"PaymentTypeName"
UniqueName
=
"PaymentTypeName"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"PaymentAmount"
DataType
=
"System.Decimal"
FilterControlAltText
=
"Filter PaymentAmount column"
HeaderText
=
"Amount"
SortExpression
=
"PaymentAmount"
UniqueName
=
"PaymentAmount"
DataFormatString
=
"{0:c}"
>
</
telerik:GridBoundColumn
>
</
Columns
>
<
EditFormSettings
>
<
EditColumn
FilterControlAltText
=
"Filter EditCommandColumn column"
>
</
EditColumn
>
</
EditFormSettings
>
<
PagerStyle
PageButtonCount
=
"5"
Mode
=
"Advanced"
ShowPagerText
=
"False"
/>
</
MasterTableView
>
<
FilterMenu
EnableImageSprites
=
"False"
>
</
FilterMenu
>
</
telerik:RadGrid
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanel1"
runat
=
"server"
InitialDelayTime
=
"250"
MinDisplayTime
=
"500"
>
<
div
class
=
"loadingDivImage"
>
</
div
>
<
div
class
=
"loadingDivBackground"
>
</
div
>
</
telerik:RadAjaxLoadingPanel
>
<
asp:ObjectDataSource
ID
=
"PaymentsDataSource"
runat
=
"server"
SelectMethod
=
"GetFamilyPayments"
TypeName
=
"PRGWebAccounts.ObjectDataSources.PaymentHistoryDataSource"
>
<
SelectParameters
>
<
asp:Parameter
DbType
=
"Guid"
Name
=
"userID"
/>
<
asp:Parameter
DbType
=
"Guid"
Name
=
"facilityID"
/>
<
asp:Parameter
DbType
=
"Guid"
Name
=
"familyID"
DefaultValue
=
"B49D49BA-7A20-4735-9A27-591E9D46DF34"
/>
<
asp:ControlParameter
ControlID
=
"dpStartDate"
DefaultValue
=
""
Name
=
"startDate"
PropertyName
=
"SelectedDate"
Type
=
"DateTime"
/>
<
asp:ControlParameter
ControlID
=
"dpEndDate"
Name
=
"endDate"
PropertyName
=
"SelectedDate"
Type
=
"DateTime"
/>
</
SelectParameters
>
</
asp:ObjectDataSource
>
<
asp:ObjectDataSource
ID
=
"ObjectDataSource2"
runat
=
"server"
SelectMethod
=
"GetFamilyPaymentTransactions"
TypeName
=
"PRGWebAccounts.ObjectDataSources.PaymentHistoryDataSource"
>
<
SelectParameters
>
<
asp:Parameter
DbType
=
"Guid"
Name
=
"familyPaymentID"
/>
</
SelectParameters
>
</
asp:ObjectDataSource
>
And CSS:
.loadingDivImage
{
background-image
:
url
(
'/<%=WebResource("PRGWebAccounts.Resources.Images.loading.gif")%>'
);
background-color
: rgba(
0
,
0
,
0
,
0
);
background-position
:
center
center
;
background-repeat
:
no-repeat
;
position
:
relative
;
z-index
:
2
;
height
:
100%
;
margin
:
0
;
padding
:
0
;
width
:
100%
;
}
.loadingDivBackground
{
opacity:
0.6
;
background-color
:
#E6E6E6
;
color
:
#3B3B3B
;
background-image
:
none
;
left
:
0
;
position
:
absolute
;
top
:
0
;
z-index
:
1
;
height
:
100%
;
margin
:
0
;
padding
:
0
;
width
:
100%
;
}
0
Hello Jesse,
Please remove the InitialDelayTime from your LoadingPanel and add the grid to the AJAX settings as an initiator:
This should resolve the issue. Please give it a try and let me know about the result.
Regards,
Eyup
Telerik
Please remove the InitialDelayTime from your LoadingPanel and add the grid to the AJAX settings as an initiator:
<
telerik:AjaxSetting
AjaxControlID
=
"RadGrid1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadGrid1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
This should resolve the issue. Please give it a try and let me know about the result.
Regards,
Eyup
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.