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

[Solved] Getting reference to combobox from client

2 Answers 145 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Steve LaForge
Top achievements
Rank 1
Steve LaForge asked on 06 May 2009, 04:07 PM
I have a page with the code shown below.  I've tried using both var cmbo = $find("<%= cmboUsers.ClientID %>"); and var cmbo = Telerik.Web.UI.RadComboBox.ComboBoxes[0]; code.  The first returns null, while the second returns undefined.  It is only the code in the setInitialUser function that fails.  The javascript in function userChanged, which is called from the OnClientSelectedIndexChanged setting works fine.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="login.aspx.vb" Inherits="login" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
 
<!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>Sodexo</title> 
        <link href="CTM.css" rel="stylesheet" type="text/css" /> 
        <link href="Telerik/web/UI/Skins/Optional/ComboBox.Optional.css" rel="stylesheet" type="text/css" /> 
        <link href="Telerik/web/UI/Skins/Required/ComboBox.Required.css" rel="stylesheet" type="text/css" /> 
        <link rel="SHORTCUT ICON" href="Images/PatMedSmall.ico" /> 
        <script language="javascript" type="text/javascript">  
            function fnMaxWindow() {  
                window.moveTo(0, 0);  
                window.resizeTo(screen.width, screen.height);  
            }  
 
            function userChanged(combo, eventArgs) {  
                var item = eventArgs.get_item();  
                var allowBlankPswd = item.get_attributes().getAttribute("AllowBlankPswd");  
                // alert("allowBlankPswd = " + allowBlankPswd);  
                  
                if (allowBlankPswd == 0) {  
                    document.form1.txtPswd.value = "";  
                    document.form1.txtPswd.value = "";  
                    document.form1.txtPswd.readOnly = false;  
                    document.form1.txtPswd.focus();  
                    document.form1.txtPswd.style.background = "#fbf5bb";  
                    setTimeout(function() { document.form1.txtPswd.focus(); }, 100);  
                }  
                else {  
                    // alert("Blank password is allowed!"); // use for debugging only  
                    document.form1.txtPswd.value = "********";  
                    document.form1.txtPswd.readOnly = true;  
                    document.form1.btnSubmit.focus();  
                    document.form1.txtPswd.style.background = "#C0C0C0";  
                    setTimeout(function() { document.form1.btnSubmit.focus(); }, 100);  
                }  
            }  
 
            function fnSaveScreenDimensions() {  
                // save the user's screen dimensions to use throughout the application  
                document.form1.hdnScreenHeight.value = screen.height;  
                document.form1.hdnScreenWidth.value = screen.width;  
            }  
        </script> 
          
</head> 
<body onload="fnMaxWindow(); fnSaveScreenDimensions(); setInitialUser();">  
  <form id="form1" runat="server">  
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
            <script language="javascript" type="text/javascript">  
                function setInitialUser() {  
                    // var cmbo = $find("<%=cmboUsers.ClientID %>");  
                    var cmbo = Telerik.Web.UI.RadComboBox.ComboBoxes[0];  
                    alert("cmbo = " + cmbo);  
                    var item = cmbo.get_selectedItem();  
                    var allowBlankPswd = item.get_attributes().getAttribute("AllowBlankPswd");  
                    alert("allowBlankPswd = " + allowBlankPswd);  
                    if (allowBlankPswd == 0) {  
                        document.form1.txtPswd.value = "";  
                        document.form1.txtPswd.value = "";  
                        document.form1.txtPswd.readOnly = false;  
                        document.form1.txtPswd.focus();  
                        document.form1.txtPswd.style.background = "#fbf5bb";  
                        setTimeout(function() { document.form1.txtPswd.focus(); }, 100);  
                    }  
                    else {  
                        // alert("Blank password is allowed!"); // use for debugging only  
                        document.form1.txtPswd.value = "********";  
                        document.form1.txtPswd.readOnly = true;  
                        document.form1.btnSubmit.focus();  
                        document.form1.txtPswd.style.background = "#C0C0C0";  
                        setTimeout(function() { document.form1.btnSubmit.focus(); }, 100);  
                    }  
                }  
            </script>         
        </telerik:RadCodeBlock> 
        <telerik:RadSplitter ID="spltPage" runat="server" BorderSize="0" VisibleDuringInit="false"   
            BorderStyle="None" Skin="Default" Height="100%" Width="100%">  
            <telerik:RadPane ID="paneImages" runat="server" BorderStyle="None" Scrolling="None"   
                Width="15%" Height="100%" BackColor="#986633">  
                <img src="Images/bw_photo.jpg" id="Img1" alt="Welcome!" height="80%" width="100%" /> 
                <table cellpadding="0" cellspacing="0" border="0" class="Wide">  
                    <tr> 
                        <td align="center" valign="middle">  
                            <img src="Images/sodexo_black_trans_small.png" id="Img2" alt="Sodexo" style="margin-top: 15px;" /> 
                        </td> 
                    </tr> 
                </table> 
            </telerik:RadPane> 
            <telerik:RadPane ID="paneBody" runat="server" BorderStyle="None" Scrolling="None" BackColor="#9CAC57">  
                <telerik:RadSplitter ID="spltBody" runat="server" BorderSize="0" Orientation="Horizontal"   
                    BorderStyle="None" Skin="Default" Height="100%" HeightOffset="50" Width="100%" > 
                    <telerik:RadPane ID="paneMain" runat="server" BorderStyle="None" Scrolling="None"   
                        Width="100%">  
                        <telerik:RadSplitter ID="spltMain" runat="server" BorderSize="0" Orientation="Vertical" 
                            BorderStyle="None" Skin="Default" Width="100%" Height="100%">  
                            <telerik:RadPane ID="paneMiddle" runat="server" BorderStyle="None" Scrolling="None" BackColor="#9CAC57">  
                                <table class="Wide" cellpadding="0" cellspacing="0" border="0" style="height: 100%;">  
                                    <tr> 
                                        <td style="height: 50%;" valign="bottom" align="right">  
                                            <asp:Image ID="imgApp" runat="server" style="margin-right: 0px;" /> 
                                        </td> 
                                        <td style="width: 30%;" rowspan="2">&nbsp;</td> 
                                    </tr> 
                                    <tr> 
                                        <td style="height: 30%;" valign="top" align="right">  
                                            <div style="margin-right: 25px;">  
                                                <asp:Label ID="lblUsers" runat="server" AssociatedControlID="cmboUsers"   
                                                    Text="Users: " /> 
                                                <telerik:RadComboBox ID="cmboUsers" runat="server" EnableEmbeddedSkins="false" 
                                                    Skin="Required" ToolTip="Please select your user ID" Width="300px"    
                                                    OnClientSelectedIndexChanged="userChanged" MarkFirstMatch="true" /> 
                                                <br /><br /> 
                                                <asp:Label ID="lblPswd" runat="server" AssociatedControlID="txtPswd" Text="Password: " /> 
                                                <asp:TextBox ID="txtPswd" runat="server" MaxLength="20" CssClass="Required"   
                                                    TextMode="Password" ToolTip="Please enter your password" Width="295px" /> 
                                                <br /><br /> 
                                                <asp:Button ID="btnSubmit" runat="server" CssClass="stdbutton" Text="Sign On" /> 
                                                <br /> 
                                                <asp:Label ID="lblMsg" runat="server" Width="300px" >Please select your user ID and enter your password</asp:Label> 
                                                <asp:ValidationSummary ID="valSummary" runat="server" CssClass="ErrMsg" DisplayMode="List" Width="300px"  /> 
                                                <asp:RequiredFieldValidator ID="valrUser" runat="server" ControlToValidate="cmboUsers"   
                                                    Display="None" ErrorMessage="You must select a user" SetFocusOnError="true" /> 
                                                <asp:RequiredFieldValidator ID="valrPswd" runat="server" ControlToValidate="txtPswd"   
                                                    Display="None" ErrorMessage="You must enter a password" SetFocusOnError="true" /> 
                                                <asp:CustomValidator ID="valxUsers" runat="server" ControlToValidate="cmboUsers"   
                                                    Display="None" ErrorMessage="Invalid User / Password combination" SetFocusOnError="true" /> 
                                            </div> 
                                        </td> 
                                    </tr> 
                                    <tr> 
                                        <td valign="bottom" colspan="2">  
                                            <hr style="width: 90%;" /> 
                                            <table class="Wide" cellpadding="0" cellspacing="0" border="0">  
                                                <tr> 
                                                    <td class="LoginNote">  
                                                        <img src="images/triangle.jpg" alt="Note" /> 
                                                    </td> 
                                                    <td> 
                                                        <asp:Literal ID="litContact" runat="server" Text="Welcome!" /> 
                                                    </td> 
                                                </tr> 
                                            </table> 
                                        </td> 
                                    </tr> 
                                </table> 
                            </telerik:RadPane> 
                            <telerik:RadPane ID="paneRight" runat="server" BorderStyle="None" Scrolling="None" BackColor="#9CAC57" Width="150px">  
                                <telerik:RadMenu ID="menuTutorials" runat="server" Skin="Default" dir="rtl">  
                                </telerik:RadMenu> 
                            </telerik:RadPane> 
                        </telerik:RadSplitter> 
                    </telerik:RadPane> 
                    <telerik:RadPane ID="paneBottom" runat="server" BorderStyle="None" Scrolling="None" 
                        Width="100%" Height="50px">  
                        <span style="float: right;">  
                            <img src="images/patients.jpg" alt="Patients are where the heart is" /> 
                        </span> 
                    </telerik:RadPane>   
                </telerik:RadSplitter> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
    <asp:HiddenField ID="hdnApp" runat="server" /> 
    <asp:HiddenField ID="hdnScreenHeight" runat="server" /> 
    <asp:HiddenField ID="hdnScreenWidth" runat="server" /> 
  </form> 
</body> 
</html> 
 


How can I get a reference to the combobox to get the selected item?

2 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 2
answered on 07 May 2009, 04:37 AM
Hi Steve,

In ASP.NET AJAX environment, the ASP.NET AJAX controls (including RadControls for ASP.NET AJAX) are created after the page has been loaded. I assume that the problem here is that when you initially try to get a reference to the RadComboBox before the control is not fully rendered on the page and that is why getting null/undefined. Try the pageLoad() function to call the setInitializeUser() function instead of attaching with onload of page body.

[JavaScript]
 
<script language="javascript" type="text/javascript">  
function pageLoad() 
    setInitialUser(); 
</script> 

Thanks,
Shinu.
0
Steve LaForge
Top achievements
Rank 1
answered on 07 May 2009, 01:30 PM
Perfect!  Many thanks!!!
Tags
ComboBox
Asked by
Steve LaForge
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Steve LaForge
Top achievements
Rank 1
Share this question
or