This is a migrated thread and some comments may be shown as answers.

AJAXLoadingTemplate - chopping off loading.gif

5 Answers 114 Views
Grid
This is a migrated thread and some comments may be shown as answers.
si
Top achievements
Rank 1
si asked on 09 Jan 2009, 06:27 AM
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.

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 10 Jan 2009, 05:00 PM
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

<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
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.
0
Dimo
Telerik team
answered on 13 Jan 2009, 04:08 PM
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.

<%@ 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
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
Dimo
Telerik team
answered on 29 Jan 2009, 05:34 PM
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.
Tags
Grid
Asked by
si
Top achievements
Rank 1
Answers by
Dimo
Telerik team
si
Top achievements
Rank 1
Share this question
or