How to find ComboBox using jQuery?

9 posts, 0 answers
  1. Leszek
    Leszek avatar
    22 posts
    Member since:
    Jul 2012

    Posted 27 Sep 2017 Link to this post

    Hi,

    I'm trying to use jQuery to set a selected item in a RadComboBox. This is my HTML:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="EBuild.PWMS.UI.Pages.TestPage" %>
    <%@ Register tagprefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <table>
                <tr>
                    <td>Buyer: </td>
                    <td>
                        <telerik:RadComboBox ID="RadComboBoxBuyers"
                            DataValueField="Id" DataTextField="PickerName"
                            DataSourceID="SqlDataSource1"
                            EnableAutomaticLoadOnDemand="true" ShowMoreResultsBox="true"
                            EnableVirtualScrolling="true" ItemsPerRequest="10"
                            runat="server">
                        </telerik:RadComboBox>
                    </td>
                </tr>
            </table>
            <asp:SqlDataSource ID="SqlDataSource1"
                ConnectionString="<%$ ConnectionStrings:APPDB %>"
                ProviderName="System.Data.SqlClient"
                SelectCommand="usp_GetUsersBuyers"
                SelectCommandType="StoredProcedure"
                runat="server">
                <SelectParameters>
                    <asp:Parameter Name="IsSearch" Type="Boolean" DefaultValue="True" />
                </SelectParameters>
            </asp:SqlDataSource>
        </form>
    </body>
    </html>

    The problem is I'm not able to get a reference to the ComboBox. I searched the forum and found a bunch of code snippets but none of them works. This is what I tried:

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
            el = $find("RadComboBoxBuyers"); // returns null
            el = $("form").find("[id='RadComboBoxBuyers']"); // el.findItemByValue is undefined
            el = $telerik.$("#RadComboBoxBuyers"); // el.findItemByValue is undefined
        });
    </script>
    </telerik:RadCodeBlock>

    I have hard-coded the name of the control to "RadComboBoxBuyers" in the above code because I know that it is the correct ClientID.

    Any suggestions?

    Thanks,

    Leszek

     

     

  2. Leszek
    Leszek avatar
    22 posts
    Member since:
    Jul 2012

    Posted 18 Oct 2017 in reply to Leszek Link to this post

    Hi,

    This is such a basic functionality that I just can't believe nobody knows the answer. Is the question not clear enough?

    Thanks,

    Leszek

     

  3. Rumen
    Admin
    Rumen avatar
    14324 posts

    Posted 19 Oct 2017 Link to this post

    Hi Leszek,

    You can learn how to get a Telerik control object via jQuery in the following help article: Using jQuery Selectors.

    var combobox = $telerik.$("[id$='RadComboBoxBuyers']").get(0).control;

    Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Leszek
    Leszek avatar
    22 posts
    Member since:
    Jul 2012

    Posted 19 Oct 2017 in reply to Rumen Link to this post

    Thanks Rumen for your response. The code you provided:

    var combobox = $telerik.$("[id$='RadComboBoxBuyers']").get(0).control;

    returns 'undefined' in the combobox variable. Could you test it with the snippet I attached in my previous post, please? Maybe I'm doing something wrong there.

    Thanks,

    Leszek

     

  5. Rumen
    Admin
    Rumen avatar
    14324 posts

    Posted 19 Oct 2017 Link to this post

    Hello Leszek,

    To be able to test it I'll need an isolated runnable project.

    Until then my advice is to debug the anonymous function and see why the object is undefined.

    You can also find useful the attached sample app.

    Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Leszek
    Leszek avatar
    22 posts
    Member since:
    Jul 2012

    Posted 19 Oct 2017 in reply to Rumen Link to this post

    Thanks Rumen. The sample app RadGridBatchEditingFindCombobox is not much use for me as it relies on the OnClientSelectedIndexChaged event which has a reference to a ComboBox as a parameter. This is not a case in my situation. I need to obtain a reference using JS or JQuery.

    Please, find the attachment including an isolated runnable project with a few test cases that illustrate the issue.

    Thanks for your help.

    Leszek

     

  7. Leszek
    Leszek avatar
    22 posts
    Member since:
    Jul 2012

    Posted 19 Oct 2017 Link to this post

    I just got an error message that I'm not allowed to attach ZIP files. How should I send you the runnable project?
  8. Rumen
    Admin
    Rumen avatar
    14324 posts

    Posted 20 Oct 2017 Link to this post

    Hello,

    You can find all ways of obtaining a reference to Telerik AJAX controls in this article: Get Client-side Reference to a Control Object.

    You can use the Telerik.com support ticketing system to attach files.

    Kind Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Leszek
    Leszek avatar
    22 posts
    Member since:
    Jul 2012

    Posted 20 Oct 2017 in reply to Rumen Link to this post

    Thanks, Rumen. The answer to my question is to use Sys.Application.add_load. This is the correct (simplified) code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <%@ Register tagprefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadComboBox ID="RadComboBoxBuyers" runat="server">
            <Items>
                <telerik:RadComboBoxItem Value="0" Text="[Select]" />
                <telerik:RadComboBoxItem Value="1" Text="AAA" />
                <telerik:RadComboBoxItem Value="2" Text="BBB" />
                <telerik:RadComboBoxItem Value="3" Text="CCC" />
            </Items>
        </telerik:RadComboBox>
        </div>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            Sys.Application.add_load(showComboBox)
            function showComboBox() {
                // Using the $find method to get the control's client-side reference.
                combobox = $find("RadComboBoxBuyers");
                alert(combobox);
                // Using the getElementById method to get the control's client-side reference.
                combobox = document.getElementById("RadComboBoxBuyers").control;
                alert(combobox);
                // Using the $get method to get the control's client-side reference.
                combobox = $get("RadComboBoxBuyers").control;
                alert(combobox);
                // Using the attributeEndsWith selector to get the client-side instance of a control.
                combobox = $telerik.$("[id$='RadComboBoxBuyers']").get(0).control;
                alert(combobox);
            }
        </script>
        </telerik:RadCodeBlock>
        </form>
    </body>
    </html>

     

Back to Top