Thursday, September 22, 2016

Accessing Telerik RadComboBoxes via jQuery

Yes yes, I know, Telerik is terrible and it creates an incredible amount of just unnecessary markup and the controls don't work very well in the wild, even though the demos seem so easy and simple!

But sometimes you just need to use a RadComboBox because you need a multi-dropdown list with checkboxes inside, and you don't want to roll your own. Then you need to use jQuery to manually open them in some cases, because you have a non-mobile-friendly old version of Telerik that you can't update for fear of breaking multiple other sites that all use the same assemblies. You suddenly understand why some corporations still run Windows 7 even though Microsoft is trying as hard as it can to disavow it and IE. It's just too hard, time-consuming, and expensive. And you just need it done.

After trying unsuccessfully to get the danged dropdowns to open by writing a bit of JS that inexplicably find the dropdowns non-existent, and getting a lot of "null" returns for said dropdowns, you finally stumble upon developer googling gold.

Telerik has its own jQuery library, which enables you to access and manipulate their controls via javascript. What the frig?

First, add the references to the jQuery library on your page:
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" >
   <Scripts>
       <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
       <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
   </Scripts>
</telerik:RadScriptManager> 

Now, lets say you have the following RadComboBox:
<telerik:RadComboBox runat="server" ID="rcbEveryoneLikesOptions" AutoPostBack="True"></telerik:RadComboBox>

To get it via jQuery, use this syntax:
var rcbEveryoneLikesOptions = $find("<%=rcbEveryoneLikesOptions.ClientID %>");

Then you can do fun things with it like dynamically open it:
rcbEveryoneLikesOptions.showDropDown();

You can find all the other allowable events and more detailed info here:
Using jQuery with Telerik
RadComboBox Object jQuery fun

No comments:

Post a Comment