Each RadGrid has a property EnableAJAXLoadingTemplate. When this property is set to true, an animated image or other object/media will be shown when the grid is loading in AJAX mode. In order to enable the Telerik RadGrid AJAX mode, you should set EnableAjax property to true. By default Telerik RadGrid will use the loading.gif image of the selected skin.
| ASPX/ASCX |
 Copy Code |
|
<rad:radgrid id="RadGrid1" Width="100%" EnableAJAXLoadingTemplate="True" cssclass="RadGrid"
EnableAJAX="True" allowsorting="True"
pagesize="5" allowpaging="True" Height="200px" runat="server">
<headerstyle cssclass="GridHeader" Height="20px"/>
<pagerstyle mode="NumericPages" cssclass="GridPager" Height="20px" />
<itemstyle cssclass="GridRow" />
<alternatingitemstyle cssclass="GridRow" />
<MasterTableView CssClass="MasterTable" Height="100%" ></MasterTableView>
</rad:radgrid> |
You can also set own loading template declaratively in the ASPX file. The example below demonstrates the declarative definition of a custom loading template using Macromedia Flash object.
| ASPX/ASCX |
Copy Code |
<rad:radgrid id="RadGrid2" Width="100%" EnableAJAXLoadingTemplate="True" cssclass="RadGrid" EnableAJAX="True" allowsorting="True"
pagesize="5" allowpaging="True" Height="200px" runat="server">
<AJAXLoadingTemplate>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="148" height="94" id="loading" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="loading.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<embed src="loading.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="148" height="94" name="loading" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</AJAXLoadingTemplate>
<headerstyle cssclass="GridHeader" Height="20px" />
<pagerstyle mode="NumericPages" cssclass="GridPager" Height="20px"/>
<itemstyle cssclass="GridRow" />
<alternatingitemstyle cssclass="GridRow" />
<MasterTableView CssClass="MasterTable" Height="100%" ></MasterTableView>
</rad:radgrid> |
LoadingTemplate Transparency
The transparency of the LoadingTemplate can be controlled using the LoadingTemplateTransparency property of RadGrid. It accepts values between 0 and 100, where 100 is the fully transparent LoadingTemplate. By default LoadingTemplate has no transparency, i.e. LoadingTemplateTransparency is 0.
How to display the LoadingTemplate on initial load
To display the AJAX loading template of Telerik RadGrid on initial load, you should:
- Hook the GridCreated event
- Retrieve the client object of the grid loading template
- Switch the visibility of the grid and the loading template calling an anonymous javascript function (passing it as a parameter the window object setTimeout)
| ASPX/ASCX |
Copy Code |
|
<rad:radgrid id="RadGrid1" AllowSorting="True" AllowPaging="True" EnableAJAX="True" EnableAJAXLoadingTemplate="True"
runat="server">
<ClientSettings>
<ClientEvents OnGridCreated="GridCreated" OnRequestStart="RequestStart"></ClientEvents>
</ClientSettings>
</rad:radgrid>
<style type="text/css">
.MasterTableView
{
display : none;
}
</style>
<script type="text/javascript">
var shouldShowTemplate = true;
//hook the GridCreated event
function GridCreated()
{
if(shouldShowTemplate)
{
var template = document.getElementById(this.ClientID + "_LoadingTemplate");
if (template != null)
{
template.style.display = "";
template.align = "center";
var grid = this;
var hideTemplate = function()
{
grid.MasterTableView.Control.className = "";
template.style.display = "none";
};
window.setTimeout(hideTemplate, 2000);
}
}
}
//The above script will not be executed when a normal request is performed
function RequestStart()
{
shouldShowTemplate = false;
}
</script> |
And in the code-behind:
| C# |
Copy Code |
|
private void Page_Load(object sender, System.EventArgs e)
{
if(!Page.IsPostBack)
{
RadGrid1.MasterTableView.CssClass = "MasterTableView";
}
else
{
RadGrid1.MasterTableView.CssClass = "";
}
} |
| VB.NET |
Copy Code |
|
Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
If Not Page.IsPostBack Then
RadGrid1.MasterTableView.CssClass = "MasterTableView"
Else
RadGrid1.MasterTableView.CssClass = ""
End If
End Sub |
Display the loading template above the grid
Generally, when you enable the AJAX mechanism of the grid (EnableAJAX=true) and the AJAX loading template (EnableAJAXLoadingTemplate=true), the loading template will replace the grid instance on asynchronous request. If you want to keep the grid instance visible and display the loading template above the control, you can place hidden div tag (holding the loading image) over the grid with absolute positioning and z-index larger than that of your grid. Then, you can subscribe to the RequestStart/RequestEnd events to show/hide the initially hidden div:
| ASPX/ASCX |
Copy Code |
|
<head runat="server">
<title>Loading template above grid</title>
<script type="text/javascript">
var loadingDiv;
function RequestStart()
{
loadingDiv = document.getElementById("LoadingDiv");
loadingDiv.style.display= "block";
}
function RequestEnd()
{
loadingDiv.style.display = "none";
}
</script>
</head>
<body>
<form runat="server">
<div>
<rad:RadGrid ID="RadGrid1" DataSourceID="AccessDataSource1" EnableAJAX="True"
AllowPaging= "True" AllowSorting="True" runat="server">
<ClientSettings>
<ClientEvents OnRequestStart="RequestStart" OnRequestEnd="RequestEnd" />
</ClientSettings>
</rad:RadGrid>
<div style="height: 100px; width: 100%; display: none; position:absolute; z-index: 200px; top: 100px; left: 550px;" id="LoadingDiv" >
<img src="RadControls/Grid/Skins/Default/Loading.gif" alt="" />
</div>
<asp:AccessDataSource ID="AccessDataSource1" DataFile="~/Nwind.mdb" SelectCommand="SELECT * FROM Customers"
runat= "server"></asp:AccessDataSource>
</div>
</form>
</body> |
Display the loading template in a new window
Basically, the approach is quite similar to the previous one. However, this time you will have to call the
window.open() method in the
RequestStart handler (to open the page where the loading image resides) and the
window.close() method in the
RequestEnd handler to close the window when the async request finishes execution:
| ASPX/ASCX |
Copy Code |
|
<head runat="server">
<title>Loading template in a new window</title>
<script type="text/javascript">
var loadingWindow;
function RequestStart()
{
loadingWindow = window.open("Loading.aspx",null,"height=150,width=150,status=no,toolbar=no,menubar=no,location=no");
}
function RequestEnd()
{
loadingWindow. close();
}
</script>
</head>
<body>
<form runat="server">
<div>
<rad:RadGrid ID="RadGrid1" DataSourceID="AccessDataSource1" EnableAJAX="True"
AllowPaging= "True" AllowSorting="True" runat="server">
<ClientSettings>
<ClientEvents OnRequestStart="RequestStart" OnRequestEnd="RequestEnd" />
</ClientSettings>
</rad:RadGrid>
<asp:AccessDataSource ID="AccessDataSource1" DataFile="~/Nwind.mdb" SelectCommand="SELECT * FROM Customers"
runat= "server"></asp:AccessDataSource>
</div>
</form>
</body> |
Loading.aspx
| ASPX/ASCX |
Copy Code |
|
<body>
<form id="form1" runat="server">
<div>
<img src="RadControls/Grid/Skins/Default/Loading.gif" />
</div>
</form>
</body> |
Define loading template programmatically
You need to design your custom class (holding the image for the AJAXLoadingTemplate) which implements the ITemplate interface. Then you can assign an instance of this class to the AJAXLoadingTemplate of the RadGrid instance.
The example below shows how to embed custom image (named MyLoadingImage.gif) in the AJAXLoadingTemplate at runtime:
| VB.NET |
Copy Code |
|
Imports Telerik.WebControls
Protected WithEvent RadGrid1 as RadGrid
Private Class MyAJAXLoadingTemplate
Implements ITemplate
Protected loadingImage As System.Web.UI.HtmlControls.HtmlImage
Public Sub New()
MyBase. New()
End Sub
Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) Implements System.Web.UI.ITemplate.InstantiateIn
loadingImage = New HtmlImage
loadingImage.Src = "Img/MyLoadingImage.gif"
loadingImage.Alt = "no loading image available"
container.Controls.Add(loadingImage)
End Sub
End Class
Protected Overrides Sub OnInit(ByVal e As EventArgs)
InitializeComponent
DefineGridStructure()
MyBase.OnInit(e)
End Sub
Private Sub DefineGridStructure()
Me.RadGrid1 = New RadGrid
Me.RadGrid1.AutoGenerateColumns = false
Me.RadGrid1.EnableAJAX = True
Me.RadGrid1.EnableAJAXLoadingTemplate = True
AddHandler RadGrid1.NeedDataSource, AddressOf Me.RadGrid1_NeedDataSource
RadGrid1.MasterTableView.AJAXLoadingTemplate = New MyAJAXLoadingTemplate()
End Sub |
| C# |
Copy Code |
|
using Telerik.WebControls;
protected RadGrid RadGrid1;
private class MyAJAXLoadingTemplate : ITemplate
{
protected System.Web.UI.HtmlControls.HtmlImage loadingImage;
public MyAJAXLoadingTemplate()
{
}
public void InstantiateIn(System.Web.UI.Control container)
{
loadingImage = new HtmlImage();
loadingImage.Src = "Img/MyLoadingImage.gif";
loadingImage.Alt = "no loading image available";
container.Controls.Add(loadingImage);
}
}
protected override void OnInit(EventArgs e)
{
InitializeComponent;
DefineGridStructure();
base.OnInit(e);
}
private void DefineGridStructure()
{
this.RadGrid1 = new RadGrid();
this.RadGrid1.AutoGenerateColumns = false;
this.RadGrid1.EnableAJAX = true;
this.RadGrid1.EnableAJAXLoadingTemplate = true;
RadGrid1.NeedDataSource += new System.EventHandler(this.RadGrid1_NeedDataSource);
RadGrid1.MasterTableView.AJAXLoadingTemplate = new MyAJAXLoadingTemplate();
// runtime column definitions ----------------------------
} |
Detailed information about how to create templates programmatically you can find in the MSDN:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dv_vstechart/html/vbtchcreatingwebservercontroltemplatesprogrammatically.asp