$find and getElementById don't work

1 Answer 91 Views
Grid Splitter
ghini
Top achievements
Rank 2
ghini asked on 28 Aug 2023, 06:53 AM

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

Sort by
0
Rumen
Telerik team
answered on 28 Aug 2023, 10:10 AM

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:

 

Regards,
Rumen
Progress Telerik

Heads up! Telerik UI for ASP.NET AJAX versions for .NET 3.5 and 4.0 are retired. Progress will continue shipping assemblies compatible with .NET 4.5 and later. See whether this affects your apps in this article.
Tags
Grid Splitter
Asked by
ghini
Top achievements
Rank 2
Answers by
Rumen
Telerik team
Share this question
or