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

combobox value returns 'undefined' using javascript on the first load

5 Answers 511 Views

ComboBox

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

Kalyani Mantripragada asked on 12 Jan 2010, 05:40 PM

Hi, I placed a combobox as below , with auto complete feature and load on demand.

<

telerik:RadComboBox ID="radCboCity" runat="server" Width="175px" Height="150px" AllowCustomText=true EnableLoadOnDemand="True" ShowMoreResultsBox="true" EnableVirtualScrolling="true" OnItemsRequested="radCboCity_ItemsRequested"></telerik:RadComboBox>

I redirect to this form with querystring parameters which should populate the criteria on this form. I am setting the combobox value from server side something like : radCboCity.value= sCity;

well, I have some clientside validations and ajax postbacks on load of this form and the combo value returns 'undefined'. I am accessing the combo value from an external javascript file using the standard document object : document.getElementById("radCboCity").value

If I repost this form it returns a valid value.

Why is this behaviour? Am I missing mosthing?

thanks

5 Answers, 1 is accepted

answered on 13 Jan 2010, 07:21 AM

Hi Kalyani,

Try using $find() method for getting RadCombobBox client object instead of using document.getElementById(). And if you want to access the combo on loading the page, then you can try the code in pageLoad event as shown below.

JavaScript:

    
                function pageLoad() { 
        
                    var combo = $find('<%=radCboCity.ClientID%>'); 
        
                    var value = combo.get_text(); 
        
                }

Have a look at the documentation for more information about this:
Client-Side Basics
RadComboBox object

-Shinu.

answered on 13 Jan 2010, 01:10 PM

I really have no idea why the following code wouldn't work. It looks like the object is not being initialized by the page load. This is the exact scenario I have in my application.

If you see below, I have a simple combobox and a button control on the form. I am trying to get the object value on load (using js function 'test1()'. I also hooked up this function on the server side btn control at code behind as : btnCity.Attributes.Add("onClick", "test1();");

Now, the object returns a "'null' is null or not an object" error on load event, but works fine on buttonclick event. What do you think the reason is and how to resolve this? Am I missing any other directives or libraries?
thanks in advance.

@ Page Language="C#" AutoEventWireup="true" CodeFile="test2.aspx.cs" Inherits="test2" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

head runat="server">

<title>Untitled Page</title>

head>

body onload="test1();" >

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

telerik:RadComboBox

ID="radCboCity" runat="server"

Width="590px" Height="140px"

EmptyMessage="Type an E-mail"

</telerik:RadComboBox>

asp:Button ID="btnCity" runat="server" Text="Combo Value" />

</div>

function test1() {

var combo = $find("<%= radCboCity.ClientID %>");

var text = combo.get_text();

alert(text);

}

</script>

form>

body>

html>

answered on 13 Jan 2010, 08:55 PM

The reason you are receiving a null is because you are attempting to find the control way before it is actually available on the page. The body onload event is fired too early in the page's life cycle for you to access any controls (would be the same for default ASP.NET controls). The best thing to do would be to access the RadComboBox's OnClientLoad event and handle your javascript through there:

    
            <head runat="server"> 
        
            <meta http-equiv="Accept-Encoding" content="gzip, deflate" /> 
        
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        
            <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
                    </asp:ScriptManager> 
        
                    <div> 
        
                        <telerik:RadComboBox ID="radCboCity" runat="server" Width="590px" Height="140px" 
        
                            EmptyMessage="Type an E-mail" OnClientLoad="test1"> 
        
                        </telerik:RadComboBox> 
        
                        <asp:Button ID="btnCity" runat="server" Text="Combo Value" /> 
        
                    </div> 
        
                    <script type="text/javascript"> 
        
                        function test1() { 
        
                            var combo = $find("<%= radCboCity.ClientID %>"); 
        
                            var text = combo.get_text(); 
        
                            alert(text); 
        
                        } 
        
                    </script> 
        
                </form> 
        
            </body> 
        
            </html>

This example is the equivalent of what you were trying to achieve :)

answered on 14 Jan 2010, 09:59 AM

Hi Kalyani Mantripragada,

It is correct that you can't access the client object of an AJAX control at body onload eventhandler, because it is not created yet. The previous post example is one approach to overcome this problem, another way is to use pageLoad function - more details about AJAX client events you can find here.

CopyCode

<head runat="server">

<title></title>

</head>

<script language="javascript" type="text/javascript">

function pageLoad() {

var status = Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack();

if (!status) {

var combo = $find("<%= radCboCity.ClientID %>");

var text = combo.get_text();

alert(text);

}

function showText() {

var combo = $find("<%= radCboCity.ClientID %>");

var text = combo.get_text();

alert(text);

}

</script>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<asp:UpdatePanel ID="Panel1"

UpdateMode="Conditional" runat="server">

<ContentTemplate>

<telerik:RadComboBox ID="radCboCity" runat="server"

EmptyMessage="select city" Width="590px"

Height="140px" OnItemsRequested="Categories_ItemsRequested"

EnableLoadOnDemand="true">

</telerik:RadComboBox>

<asp:Button ID="btnCity" runat="server" Text="Combo Value"

OnClientClick="showText();" />

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

More details about PageRequestManager class you can find here.

Greetings,
Kalina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.