Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

$find fails for non-rad control

11 Answers 139 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 22 Dec 2008, 03:26 PM
I am trying to use $find to get the ID of a non-rad DropDownList.  The $find function returns null.

Is there something I am doing wrong?

Thanks for any help, the code follows. ~ Matt

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 
<%@ 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></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
    </telerik:RadScriptManager> 
    <div> 
 
        <script type="text/javascript"> 
            function RadComboBox1_OnClientSelectedIndexChanged(sender, args) { 
                //works: 
                var product = args.get_item(); 
                alert(product.get_text()); 
                //doesn't work: 
                var ddlControl = $find("<%= cboVA_IllustrationType.ClientID %>"); 
                var indexValue = ddlControl.selectedIndex; 
                var selectedValue = $find("<%= cboVA_IllustrationType.ClientID %>").options[indexValue].value; 
                alert(selectedValue); 
            } 
        </script> 
 
        <telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="Web20" OnClientSelectedIndexChanged="RadComboBox1_OnClientSelectedIndexChanged"> 
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
            <Items> 
                <telerik:RadComboBoxItem runat="server" Text="Fixed Annuity" /> 
                <telerik:RadComboBoxItem runat="server" Text="Fixed Index Annuity" /> 
                <telerik:RadComboBoxItem runat="server" Text="Variable Annuity" /> 
                <telerik:RadComboBoxItem runat="server" Text="Immediate Annuity" /> 
                <telerik:RadComboBoxItem runat="server" Text="Term" Selected="true" /> 
                <telerik:RadComboBoxItem runat="server" Text="Universal Life" /> 
                <telerik:RadComboBoxItem runat="server" Text="Variable Universal Life" /> 
            </Items> 
        </telerik:RadComboBox> 
        <p> 
            <asp:DropDownList ID="cboVA_IllustrationType" runat="server"> 
                <asp:ListItem>Hypothetical</asp:ListItem> 
                <asp:ListItem Selected="True">Historical</asp:ListItem> 
            </asp:DropDownList> 
        </p> 
    </div> 
    </form> 
</body> 
</html> 
 

11 Answers, 1 is accepted

Sort by
0
Accepted
Vlad
Telerik team
answered on 22 Dec 2008, 03:35 PM
Hi Matt,

DropDownList is not ASP.NET AJAX Component - you can use $get() instead.

Regards,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Mario
Top achievements
Rank 2
answered on 22 Dec 2008, 03:35 PM
Hi Matt,

The $find-method is used to get the client-object of an ajax-control.
Since the dropdown you use isn't "ajaxified", there's no client-object to find.

Try using the $get-method instead...

Best regards
0
Matt
Top achievements
Rank 1
answered on 22 Dec 2008, 03:52 PM
Thank you, that works.

However when I try to use this technique in my full page, I get the following compilation error:

"The name 'cboVA_IllustrationType' does not exist in the current context"

If I subsitute the actual Client ID, RadPanelBar1$i0$i0$cboVA_IllustrationType, it works fine.  Is there a problem mixing use of $find and $get in the same function?  Or does $get not work if the non-rad control is nested inside a rad control?

Thanks again for any help ~ Matt

The full javascript function follows:

//Display or hide panels based on selection 
            function rcbProductType_OnClientSelectedIndexChanged(sender, args) { 
                var product = args.get_item(); 
                var panelBar = $find("<%= RadPanelBar1.ClientID %>"); 
                var items = panelBar.get_items(); 
                //loop through 2 - 11 and hide them 
                for (var i = 2; i < 12; i++) { 
                    items.getItem(i).set_visible(false); 
                } 
                //get Illustration Type selected value 
                var indexValue = $get("<%= cboVA_IllustrationType.ClientID %>").selectedIndex; 
                var selectedValue = $get("<%= cboVA_IllustrationType.ClientID %>").options[indexValue].value; 
                 
                alert(selectedValue); 
                switch (product.get_text()) { 
                    case "Term": 
                        items.getItem(2).set_visible(true); //Term Options 
                        items.getItem(3).set_visible(true); //Term Riders 
                        items.getItem(4).set_visible(true); //Term Print Options 
                        break; 
                    case "Fixed Annuity": 
                        items.getItem(5).set_visible(true); //FIXED OPTIONS 
                        break; 
                    case "Fixed Index Annuity": 
                        items.getItem(10).set_visible(true); //FIA Crediting Options 
                        items.getItem(11).set_visible(true); //FIA Print Options 
                        break; 
                    case "Variable Annuity": 
                        items.getItem(6).set_visible(true); //VA OPTIONAL BENEFITS 
                        items.getItem(7).set_visible(true); //VA WITHDRAWALS 
                        items.getItem(9).set_visible(true); //VA Print Options 
                        //Put hypothetical stuff here 
                        if (selectedValue == "Hypothetical") { 
                            alert('Hypothetical selected.'); 
                        } 
                        else { 
                            alert('Hypothetical not selected.'); 
                        } 
                        break; 
                    default: 
                        alert("Don't know to handle " + product.get_text() + "."); 
                } 
            } 

0
Accepted
Mario
Top achievements
Rank 2
answered on 22 Dec 2008, 04:10 PM
It sounds to me like visual studio didn't add the control to the designer-file of the page or usercontrol.

You could restart visual studio or manually add:
 
/// <summary> 
/// cboVA_IllustrationType control. 
/// </summary> 
/// <remarks> 
/// Auto-generated field. 
/// To modify move field declaration from designer file to code-behind file. 
/// </remarks> 
protected global::System.Web.UI.WebControls.DropDownList cboVA_IllustrationType; 
to the designer... (that is, the yourpage.designer.cs or yourpage.designer.vb)
0
Dimo
Telerik team
answered on 22 Dec 2008, 04:33 PM
Hello Matt,

There is no problem in using $find() and $get at the same time, but you should know what each method does and use them correctly.

Both methods accept as a paratemer a client id.

$get is actually a shorthand of document.getElementById().

$find can be used only to obtain a reference to the client-side object instance of an ASP.NET AJAX control.

As for your compilation error - it looks quite self-explanatory, but if you have difficulties making this work, please post here your complete page and code-behind.


Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Mario
Top achievements
Rank 2
answered on 22 Dec 2008, 04:41 PM
Uhm.. thanks I think?
But I wasn't having any problems.. =) hehe

I guess you meant Matt?
0
Matt
Top achievements
Rank 1
answered on 22 Dec 2008, 04:43 PM
The DropDownList isn't getting added to the designer.  It wasn't accessible from the code-behind either.

Might this be a nesting issue?  The DropDownList is inside a RadPanelBar which is inside a RadPanel.  I am not able to get designer or code-behind support for it manually or by re-adding it to the designer.

Thanks for any help, I posted the markup below ~ Matt

<telerik:RadSplitter ID="RadSplitterBrowser" runat="server" Height="98%" Width="100%" 
            BorderSize="0" BorderStyle="None"> 
            <telerik:RadPane ID="RadPaneTreeView" runat="server" Scrolling="None" Width="263px"> 
                <telerik:RadSplitter ID="SplitterTreeView" runat="server" Orientation="Horizontal"> 
                    <telerik:RadPane ID="RadPaneTV" runat="server" Height="100%"> 
                        <telerik:RadTreeView ID="RadTreeView1" runat="server" OnNodeClick="RadTreeView1_NodeClick"> 
                            <Nodes> 
                                <telerik:RadTreeNode runat="server" Text="Users" /> 
                            </Nodes> 
                        </telerik:RadTreeView> 
                        <div style="clear: both; height: 24px"> 
                        </div> 
                    </telerik:RadPane> 
                    <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Forward"></telerik:RadSplitBar> 
                    <telerik:RadPane ID="RadPaneCalendar" runat="server" Scrolling="None" Height="251px"> 
                        <telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="True" CultureInfo="English (United States)" 
                            EnableMultiSelect="false" OnSelectionChanged="RadCalendar1_SelectionChanged" 
                            Height="100%" Width="100%"> 
                            <ClientEvents OnDateClick="OnDateClick" OnDateSelecting="OnDateSelecting"></ClientEvents> 
                        </telerik:RadCalendar> 
                    </telerik:RadPane> 
                </telerik:RadSplitter> 
            </telerik:RadPane> 
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward"></telerik:RadSplitBar> 
            <telerik:RadPane ID="RadPaneGrid" runat="server" Width="100%"> 
                <telerik:RadPanelBar ID="RadPanelBar1" runat="server"  
                    OnClientLoad="RadPanelBar1_OnClientLoad" Skin="Web20" Width="100%"> 
                    <CollapseAnimation Duration="100" Type="None" /> 
                    <Items> 
                        <%--Items[0] PLANS/PRODUCTS TAB --%> 
                        <telerik:RadPanelItem runat="server" Expanded="true" Text="Illustration Type"> 
                            <Items> 
                                <telerik:RadPanelItem runat="server" Expanded="true"> 
                                    <ItemTemplate> 
                                        <table> 
                                            <tr> 
                                                <td> 
                                                    <asp:Label ID="lblVA_IllustrationType" runat="server" Text="ILLUSTRATION TYPE:"></asp:Label> 
                                                </td> 
                                                <td> 
                                                    <asp:DropDownList ID="cboVA_IllustrationType" runat="server"> 
                                                        <asp:ListItem>Hypothetical</asp:ListItem> 
                                                        <asp:ListItem Selected="True">Historical</asp:ListItem> 
                                                    </asp:DropDownList> 
                                                </td> 
                                            </tr> 

0
Mario
Top achievements
Rank 2
answered on 22 Dec 2008, 04:49 PM
When everything fails for me, I remove the control... restart visual studio and load the project/solution, open up the page markup code and paste the control again...

You could also add the line of code I sent (modify it to suite your code) in the code behind.. since the designer is partial...

Hope it works...
0
Matt
Top achievements
Rank 1
answered on 22 Dec 2008, 05:13 PM
Below is complete code that will generate the compilation error.  It seems like non-rad controls get lost when the RadPanelBar is inside a RadPane.

Thanks for any help ~ Matt

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 
<%@ 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></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
    </telerik:RadScriptManager> 
    <div> 
 
        <script type="text/javascript"> 
            function RadComboBox1_OnClientSelectedIndexChanged(sender, args) { 
                //works: 
                var product = args.get_item(); 
                alert(product.get_text()); 
                //doesn't work: 
                var ddlControl = $get("<%= cboVA_IllustrationType.ClientID %>"); 
                var indexValue = ddlControl.selectedIndex; 
                var selectedValue = ddlControl.options[indexValue].value; 
                alert(selectedValue); 
            } 
        </script> 
        <telerik:RadSplitter ID="RadSplitter1" runat="server"> 
            <telerik:RadPane ID="RadPane1" runat="server"> 
                <h1> 
                    Inside RadPane1</h1> 
            </telerik:RadPane> 
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" /> 
            <telerik:RadPane ID="RadPane2" runat="server"> 
                <telerik:RadPanelBar ID="RadPanelBar1" runat="server"> 
                    <Items> 
                        <telerik:RadPanelItem runat="server" Text="Panel Item" Expanded="true"> 
                            <ItemTemplate> 
                                <telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="Web20" OnClientSelectedIndexChanged="RadComboBox1_OnClientSelectedIndexChanged"> 
                                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
                                    <Items> 
                                        <telerik:RadComboBoxItem runat="server" Text="Fixed Annuity" /> 
                                        <telerik:RadComboBoxItem runat="server" Text="Fixed Index Annuity" /> 
                                        <telerik:RadComboBoxItem runat="server" Text="Variable Annuity" /> 
                                        <telerik:RadComboBoxItem runat="server" Text="Immediate Annuity" /> 
                                        <telerik:RadComboBoxItem runat="server" Text="Term" Selected="true" /> 
                                        <telerik:RadComboBoxItem runat="server" Text="Universal Life" /> 
                                        <telerik:RadComboBoxItem runat="server" Text="Variable Universal Life" /> 
                                    </Items> 
                                </telerik:RadComboBox> 
                                <p> 
                                    <asp:DropDownList ID="cboVA_IllustrationType" runat="server"> 
                                        <asp:ListItem>Hypothetical</asp:ListItem> 
                                        <asp:ListItem Selected="True">Historical</asp:ListItem> 
                                    </asp:DropDownList> 
                                </p> 
                            </ItemTemplate> 
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelBar> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
        </telerik:RadAjaxManager> 
    </div> 
    </form> 
</body> 
</html> 
 

0
Mario
Top achievements
Rank 2
answered on 22 Dec 2008, 05:37 PM
Then I suggest using the FindControl-method of the Control-class and cast to a Dropdownlist...

i.e. something like:
RadPanelBar bar = RadSplitter1.GetPaneById("RadPane2").FindControl("yourradpanelbar") as RadPanelBar;
DropDownList list = bar.Items[0].FindControl("cboVA_IllustrationType") as DropDownList;

Don't know the exact path... but something like that... You could create an recursive method that finds controls recusivly
i.e: <%= FindControlRecursive(Radsplitter1, "cboVA_IllustrationType").ClientID %>

regards


0
Matt
Top achievements
Rank 1
answered on 23 Dec 2008, 04:00 PM
Thanks Mario, that works.  But giving up designer support for those controls is a killer.

I suppose the proper solution would be to create a user control, but communicating between UCs and the page on the clients sounds pretty daunting.

Thanks for your help ~ Matt
Tags
Ajax
Asked by
Matt
Top achievements
Rank 1
Answers by
Vlad
Telerik team
Mario
Top achievements
Rank 2
Matt
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or