$find(...) returns nothing

[Mike]

Hello,
I have a JS fuction that uses the $find function to try and get the selectedItemValue from a radCombobox, but the call returns nothing. Below is the beginning of the function. If I look at the combo var afer the '$find' call it is null

JS Function:
function getCounterFormat() {
debugger
var combo = $find("<%= DisplayCounter1.cboFormat.ClientID %>");
var formatString;
try{
formatString = combo.get_value;
( remainder removed for brevity )

When rendered the line looks like:
var combo = $find("ctl00_contentRight_DisplayCounter1_cboFormat")

in the rendered source this is the combobox id:
<div class="ComboBox_Default" id="ctl00_contentRight_DisplayCounter1_cboFormat"

the getCounterFormat() function is called on OnClientSelectedIndexChanged

Just to test I created a different function:
function setCounterFormat(obj) {
debugger
var formatString = obj.Value;
var newString = getCounterFormat();

This one does return the selecteditem value on the obj.Value call but the getCounterFormat() still returns nothing.

Can you tell me what I am doing wrong?

[Rosi]

Hi Mike,

First, I suggest you replace the following line: formatString = combo.get_value;  with  formatString = combo.get_value();

Then you can check when you call the getCounterFormat method. You can use the pageLoad function where $find is guaranteed to return valid object:

function pageLoad()
{
    var newString = getCounterFormat();
}


Regards,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mike]

The getCounterFormat has to be called from the OnClientSelectedIndexChanged of two seperate comboboxes. When one changes I have to get the value from 2 boxes and concatenate them together for display purposes and then do some work based on the value of the 2 comboboxes.

[Rosi]

Hello Mike,

In this case modifying the code 

formatString = combo.get_value; 
to
formatString = combo.get_value();


I suggest you try this and let us known how this goes.

Regards,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mike]

The problem is that the $find function returns null.
so combo.getvalue() returns undefined.

Is $find colliding with something? I also use YUI  on this page.
What is the fully qualified name for $find?

[Todd Anglin]

Mike-

Is getCounterFormat() called by the RadCombobox that you want to query? If it is, you can save yourself the $find statement and reference the combobox that fired the event directly, like this:

function getCounterFormat(sender, args){

var formatString = null;

try{

formatString = sender.get_value();

...

}

If you're trying to target a different combobox (i.e. one that didn't fire the OnSelectedIndexChanged event), the syntax you've shown should work (even in a YUI environment). Sometimes with JavaScript, an error elsewhere in your code can cause things to fail in weird places, though. Have you tried stepping your JavaScript code using something like Firebug in Firefox? That may help reveal what's going on.

Let me know if that helps.

-Todd

[Rosi]

Hi ,

You can also use the  Telerik.Web.UI.RadComboBox.ComboBoxes array to access the combobox instances.

For example var combo1= Telerik.Web.UI.RadComboBox.ComboBoxes[0] will return the first combobox and 

var combo2= Telerik.Web.UI.RadComboBox.ComboBoxes[1] will return the second combobox and so on.

For more details you can read our help article - Finding combobox on the client-side when it is embedded in another control


Kind regards,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mike]

Thank you very much. That was one small detail I left out :-( it is indeed embedded in another control.

[Gabriel]

I am having the same problem but with a RadDateTimePicker control.  After reading up on $find() here, it seems that it uses the id that is passed in as a key in a key value "array": Sys.Application._component.  When I look at the DOM for the Telerik website i can see the Rad controls have been registered in this array so a $find() operation would work.  For my website, however, the RAD controls are not getting registered in Sys.Application._component, so $find() operations do not work.  Why is this the case?  Is there another way I can access the Rad objects (not the HTML elements) without using $find() and without hard-coding id values?  (I would rather not have to register the controls manually either.  It seems like i must be missing something if they are getting registered automatically.)
thx for any help.

thx,
gabe

function RestrictedBeginDateTime_DateSelected(sender, args) {

var dateTime = args.NewDate;

var jqEndPicker = $('.rdtpEnd :first:input');

var id = jqEndPicker.attr('id'); // this is the ClientID

var radEndPicker = $find(id); // this return null

radEndPicker.set_minDate(dateTime); // this fails of course because radEndPicker is null

}

[Todd Anglin]

I imagine the problem could be that you're not getting the right ID with your JQ search. What ID value are you passing to the $find() method? If you can share that it will quickly reveal if you're using the correct client-side ID to target the RadControl object.

Also, for debugging, you might try something like this just to see if your code works:

var radEndPicker = $find('<%= myRadDatePicker.ClientID %>');

This will guarantee that you're using the correct client-side ID and it will be a good way to determine if the ID is the problem. Give that a try and let me know how it goes.

-Todd

[Gabriel]

i have already used the VS08 c# debugger to check the ClientID of the control i'm trying to find and compared that w/ the id that i see when i use FireBug to check the value of the 'id' variable that is being passed into the $find() and they are identical.  I know for sure that's not the problem.  Also, i used FireBug to examine the Sys.Application._component object and it has no properties, so I am assuming that means none of the RadControl objects are getting registered w/ the Sys.Application._component object automatically.  This is the real problem.  I was able to access the Rad object by using the following:

function RestrictedBeginDateTime_DateSelected(sender, args) {

var dateTime = args.NewDate;

var jqEndPicker = $('.rdtpEnd :first:input');

var id = jqEndPicker.attr('id'); // gets the ClientID (identical w/ what the VS08 debugger tells me)

var radEndPicker = $find(id); // currently, always returns null

if (!radEndPicker) {

radEndPicker = window[id]; // gets the Rad object

}

radEndPicker.SetMinDate(dateTime);

}

This is my workaround for now until I can get these Rad objects to be registered w/ the Sys.Application._component object automatically.

thx,
gabe

P.S.
I am using external javascript files, and i have never been able to get <%= control.ClientID %> to work in external files.

[Todd Anglin]

Correct, you cannot use server tags in external JS files. In those cases, it is best to pass-in the ID of the control via an "init" constuctor. For instance, on your parent page you may have code like this:

initScriptControlIds('<%= myRadControl1.ClientID %>', '<%= myRadControl2.ClientID %>');

And then, in your external JS file, you'd have something like this:

var ctl1 = null;

var ctl2 = null;

function initScriptControlIds(control1, control2){

ctl1 = control1;

ctl2 = control2;

}

Back to the main issue- it is very strange that $find() is not working for you. For further debugging, try writing some simple code in your client-side pageLoad event to see if $find() works there. For instance, write something like this:

function pageLoad(){

var dp = $find('<%= radEndPicker.ClientID %>');

if(dp == null) alert('Control not found.');

}

That will help further determine if the problem is with the page or with timing. Let me know how your tests go. If you are unable to access the control, even on pageLoad, then I suggest you open a support ticket and attach a simple page that demonstrates the problem. From there, I can take a look at your code and try to help further.

Hope that helps.

-Todd

[Gabriel]

@Todd:

thanks for the tip on initializing the ClientIDs! 8o)

I don't think that it's a timing issue because this is a client event that gets fired when the user has selected a date/time in a DateTimePicker.  The page should be way past loading by this time i would think.  I'll try the pageLoad though.

thx,
gabe

[Todd Anglin]

Yes, I agree- it's probably not a timing issue. Tesing with pageLoad, though, will simplfy the scneario and help us discover if we can get to a point where the $find() code works (as it should). If that works, then we can work back towards your event code in the external JS file. I look forward to the results of your tests.

-Todd

[Avishek]

Hi,
I have a specific requirement with RadComboBox. I have implemented it with asp dropdownlist, but I am not able to do it with RadComboBox...The requirement is whenever the selected value for any of the dropdown is "others", I need to make one textbox visible, which is just next to the dropdown.

html part

<

 

 

asp:DropDownList ID="ddlTitle" runat="server">

 

 

</

 

 

asp:DropDownList>

 

 

<

 

 

asp:TextBox ID="txtTitleOthers" runat="server" class="textBox hide" />

Javascript Code written inside $(document).ready

 

 

 

 

 

 

 

 

$(

 

 

'select').change(function () {

 

 

 

 

 

//alert('changed');

 

 

 

 

 

 

 

 

 

 

 

var others_option = $('option:selected', this).val();

 

 

 

 

 

if ((others_option) == 'others') {

 

 

$(

 

 

this).next().removeClass('hide');

 

 

}

 

 

 

 

else {

 

 

$(

 

 

this).next().addClass('hide');

 

 

}

 

});

The same thing obviously does not work with Rad ComboBox. I have tried in several ways, but couldn't make it. Can Somebody help...

[Helen]

Hi Avishek,

Please find below a sample how to achieve this with RadComboBox.:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged="clientChanged">
<Items>
    <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1"
    Value="RadComboBoxItem1" />
    <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2"
    Value="RadComboBoxItem2" />
    <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3"
    Value="RadComboBoxItem3" />
    <telerik:RadComboBoxItem runat="server" Text="others" Value="others" />
    <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem5"
    Value="RadComboBoxItem5" />
    <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem6"
    Value="RadComboBoxItem6" />
</Items>
</telerik:RadComboBox>

<asp:TextBox ID="txtTitleOthers" runat="server" class="textBox hide" />
<script type="text/javascript">
    var $ = $telerik.$;

    function clientChanged(sender, args)
    {
        var others_option = args.get_item().get_value();
        if ((others_option) == 'others') {

        $('#txtTitleOthers').removeClass('hide');

        }
        else {

            $('#txtTitleOthers').addClass('hide');

            }
    }
</script>

Hope it helps.

Regards,
Helen
the Telerik team