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
8 Answers, 1 is accepted
Rank 1
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
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
Rank 1
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
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
Rank 1
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
Rank 1
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
Rank 1
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>