Hi everyone,
I'm having problems with $find and getElementById. In my page $find doesn't find the objects while getElementById finds them but then the client-side API functions are not executed (error message: "splitter2.get_height is not a function").
$find always returns NULL, both on the RadSplitter and RadGrid.
To understand I also isolated the affected code in a new page, same problem. This is the code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<div>
<telerik:RadSplitter ID="RadSplitter1" runat="server" SplitBarsSize="2" Width="100%" >
<telerik:RadPane ID="LeftPane" runat="server" >
<telerik:RadGrid ID="RadGrid1" runat="server"></telerik:RadGrid>
</telerik:RadPane>
<telerik:RadPane ID="RightPane" runat="server" >
</telerik:RadPane>
</telerik:RadSplitter>
</div>
<script type="text/javascript">
var Alt = window.innerHeight;
var Larg = window.innerWidth;
var splitter = $find('<%= RadSplitter1.ClientID %>');
alert(splitter);
var grid = $find('<%= RadGrid1.ClientID %>');
alert(grid);
var splitter2 = document.getElementById('<%= RadSplitter1.ClientID %>');
alert(splitter2);
alert(splitter2.get_height());
splitter2.set_height(800);
</script>
</form>
</body>
</html>
Thanks for your help
1 Answer, 1 is accepted
Hi Fabrizio,
The Telerik UI for ASP.NET AJAX controls are created by implementing the IScriptControl interface and have the lifecycle of MS AJAX-based controls. Thus, they are initialized during the Sys.Application.init event and the instance of the control can be accessed during the Sys.Application.load (pageLoad) event at the earliest.
You are trying to get a reference to the RadSplitter and RadGrid earlier before the availability of the Sys.Application.load and for these reason the controls are still not available on the page.
To fix it update the code to be executed in the Sys.Application.add_load(function () { }); event:
<telerik:RadSplitter ID="RadSplitter1" runat="server" SplitBarsSize="2" Width="100%">
<telerik:RadPane ID="LeftPane" runat="server">
<telerik:RadGrid ID="RadGrid1" runat="server"></telerik:RadGrid>
</telerik:RadPane>
<telerik:RadPane ID="RightPane" runat="server">
</telerik:RadPane>
</telerik:RadSplitter>
<script type="text/javascript">
Sys.Application.add_load(function () {
var Alt = window.innerHeight;
var Larg = window.innerWidth;
var splitter = $find('<%= RadSplitter1.ClientID %>');
alert(splitter);
var grid = $find('<%= RadGrid1.ClientID %>');
alert(grid);
var splitter2 = document.getElementById('<%= RadSplitter1.ClientID %>');
alert(splitter2);
alert(splitter2.get_height());
splitter2.set_height(800);
});
</script>You can find more information in these articles:
- Access Telerik Controls on Client-Side
- Sys.Application.add_load() vs. $(document).ready() vs. pageLoad().
Regards,
Rumen
Progress Telerik