RadComboBox in UserControl

[Matt]

Hi,

I wish to disable my radcombobox whilst the page loads, this is within a "usercontrol" and I am using jquery in the main page (which includes this control), and can use it here if that helps?

This returns a null reference for the combobox! I have looked at many threads to no avail, hopefully you can post an example for me.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="buyersguidefinderUserControl.ascx.cs"
    Inherits="usercontrol_seo_buyersguidefinderUserControl" %>
<div class="fl">
    <telerik:RadComboBox ID="RadComboBox1" AllowCustomText="true" runat="server" Width="250px"
        Height="300px" Filter="Contains" LoadingMessage="Finding Buyers Guide ..." EmptyMessage="Type which guide you would like to read..."
        HighlightTemplatedItems="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged"
        AutoPostBack="true">
    </telerik:RadComboBox>
</div>
<div class="guidesearchbtn fl">
    <asp:Button ID="Button1" runat="server" Text="Go" OnClick="Button1_Click" /></div>

<script language="javascript" type="text/javascript">
    // <!CDATA[
    // disable control otherwise it breaks page state
    var combo = $find("<%= RadComboBox1.ClientID %>");
    combo.Disable();

    $(document).ready(function() {
        combo.Enable();
    });
    // ]]>
</script>

Thanks again,
Matt

[Simon]

Hello Matthew Waring,

Naming conventions have been changed in RadControls for ASP.NET AJAX and all method/property names start with a lowercase letter.

You are using RadComboBox for ASP.NET AJAX, so please try with combo.enabled and combo.disable with lowercase letters and let me know how it goes.

Best wishes,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Simon]

There is one more thing I missed.

Your code cannot find RadComboBox because the client-side object of the control is still not initialized when the code executes. Additionally, the jQuery document.ready handler will fire before the object is initialized as well.

A better approach in this case would be to disable the RCB by setting its server-side property Enabled to false, handle RCB's client-side Load event and enable the control there:

function onLoad(sender) {
    sender.enable();
}

Regards,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Matt]

Thanks Simon,

Using the declarative disabled/client onload method worked great.

Could you possibly point me to the docs on explaining the page lifecycle and how / when we can hook into telerik controls using jquery if required. If not, could someone blog about best pratices?

Cheers
Matt

[Saed]

Hi Matthew,

Client pageLoad always fires AFTER Server-side Page_Load event and before Serer-Side Page_PreRender. Therefore, I usually utilise Server-Side Page_Load for any initialisation that deemed necessary, through an 'If Not  IsPostBack' block. However, if I wish to handle initilisation on Client, I pass a value to a HiddenField during the 'If Not  IsPostBack' then capture said value on Client during pageLoad, do whatever intialisation required then clear the HiddenField. This way, I avoid processing intialisation on every pageLoad on client (i.e. simulating 'Not IsPostBack').

If you have a Master page, then the sequence would be as follows (I think):

1. Master Server-side Page_Load.
2. Content Page Server-side Page_Load.
3. Client pageLoad.

Please note that only one pageLoad would be applicable on client; either you handle it on Master or on Content page.

As for links, I believe MSDN has a thorough documentation on page lifecycle, but can't recall the links now. May be Telerik folks could assist here.

Hope this helps.

Regards,
Saed

[Simon]

Hi Matthew Waring,

Here is an excerpt from the documentation of the $(document).ready() function:

"[...]Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded."

and here you could find more information about the page life cycle of an ASP.NET AJAX page.

What is important to note is that the $(document).ready() function fires before the init event of the ASP.NET AJAX Framework.

All the best,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Matt]

Thanks Simon, I will look into this as I clearly do not understand that even though the DOM has loaded I cant get at my radcombo textbox object until later!

And thank you Saed for your comments above, it is all helpful.

[Simon]

Hi Matthew Waring,

You could also see this article for more information.

All the best,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Rohan]

Hi Simon,
How disable the Telerik Radcombobox using jquery on ready method of jquery .

[Princy]

Hello Rohan,

Try the following javascript to disable ComboBox.
JS:

<script type="text/javascript">

    $(document).ready(function () {
       var combo = $find('Radcombobox1');

        combo.disable();

});

</script>

Thanks,
Princy.