Hi,
Using a radgrid inside a tab container, the grid only gets loaded when the tab panel is selected, so to display the loading message using AJAXLoadingTemplate I load the datasource with an empty set, then populate with the expected data when the tab is focused.
Everything is working as fine, the only problem is the loading.gif message is being chopped off because there are no rows being shown the first time the data is being loaded into the grid.
Any ideas as to how I could solve this?
Thanks.
Using a radgrid inside a tab container, the grid only gets loaded when the tab panel is selected, so to display the loading message using AJAXLoadingTemplate I load the datasource with an empty set, then populate with the expected data when the tab is focused.
Everything is working as fine, the only problem is the loading.gif message is being chopped off because there are no rows being shown the first time the data is being loaded into the grid.
Any ideas as to how I could solve this?
Thanks.
5 Answers, 1 is accepted
0
Hello,
Normally, the height of the loading panel is the same as the height of the control, which is being updated. This does not apply if the loading panel has its IsSticky property set to "true".
In your case you can set a min-height CSS style for the loading panel like this:
ASPX
CSS
Best wishes,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Normally, the height of the loading panel is the same as the height of the control, which is being updated. This does not apply if the loading panel has its IsSticky property set to "true".
In your case you can set a min-height CSS style for the loading panel like this:
ASPX
| <telerik:RadAjaxLoadingPanel CssClass="MyMinHeight" /> |
CSS
| .MyMinHeight |
| { |
| min-height:200px; |
| } |
Best wishes,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
si
Top achievements
Rank 1
Rank 1
answered on 11 Jan 2009, 11:20 PM
Thanks for the prompt reply, unfortunately it doesn't solve the problem, please let me show the issue with a picture
As you can see, after adding the min-height css property, the height is fine, it's just the row space is too small to fit loading.gif until at least 1 row (with data) exists.
As you can see, after adding the min-height css property, the height is fine, it's just the row space is too small to fit loading.gif until at least 1 row (with data) exists.
0
Hello,
I am not sure how you achieve the appearance demonstrated on the screenshot, however, here is a simple page, which works. Note that the min-height CSS property is not supported by IE6, so height must be used.
Kind regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
I am not sure how you achieve the appearance demonstrated on the screenshot, however, here is a simple page, which works. Note that the min-height CSS property is not supported by IE6, so height must be used.
| <%@ Page Language="C#" %> |
| <%@ Import Namespace="System.Data" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <script runat="server"> |
| protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) |
| { |
| (sender as RadGrid).DataSource = new DataTable(); |
| } |
| </script> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| <title>RadControls for ASP.NET AJAX</title> |
| <style type="text/css"> |
| .MyMinHeight |
| { |
| min-height:600px; |
| } |
| * html .MyMinHeight |
| { |
| height:600px !important; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadAjaxLoadingPanel |
| ID="RadAjaxLoadingPanel1" |
| runat="server" |
| CssClass="MyMinHeight" |
| BackColor="#ffffcc" |
| Transparency="50" /> |
| <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"> |
| <AjaxSettings> |
| <telerik:AjaxSetting AjaxControlID="RadGrid1"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| </AjaxSettings> |
| </telerik:RadAjaxManager> |
| <telerik:RadGrid |
| ID="RadGrid1" |
| runat="server" |
| Width="800px" |
| AutoGenerateColumns="false" |
| OnNeedDataSource="RadGrid_NeedDataSource"> |
| <MasterTableView ShowHeadersWhenNoRecords="true" CommandItemDisplay="Top"> |
| <Columns> |
| <telerik:GridBoundColumn DataField="Column1" HeaderText="Column1" /> |
| <telerik:GridBoundColumn DataField="Column2" HeaderText="Column2" /> |
| <telerik:GridBoundColumn DataField="Column3" HeaderText="Column3" /> |
| <telerik:GridBoundColumn DataField="Column4" HeaderText="Column4" /> |
| </Columns> |
| </MasterTableView> |
| </telerik:RadGrid> |
| </form> |
| </body> |
| </html> |
Kind regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
si
Top achievements
Rank 1
Rank 1
answered on 27 Jan 2009, 05:11 AM
Hi again,
To get that appearance, I loaded the grid with no data (via OnNeedsDataSource) when page first loads, and then when tab becomes focused I load the grid using AjaxRequest (fired from TabPanel.OnClientClick). It wasn't the grid height that seems to be the problem, it's the (empty?) row height.
Unfortunately, we have come across a more important problem - there is a javascript error (only) in IE
"Sys.InvalidOperationException: A control is already associated with the element"
We have a ScriptManager running from master page, and from reading other Telerik threads with this error, it seems that RadAjaxManager is conflicting with it.
No errors occur if I disable ajax on the radgrid and load the grid data when the page loads, but this isn't the solution we require - we need dynamic reload of data whenever the tab is focused rather than just when the page is loaded.
0
Hello si,
Please send us a sample web page, which reproduces the problems. Thanks.
Regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Please send us a sample web page, which reproduces the problems. Thanks.
Regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.