Telerik’s RadControls for ASP.NET are reasonably good from an ‘out of the box pretty’ point of view and expose a fair bit of functionality with minimal configuration (hence the ‘RAD’ part of the control name, one imagines). However, such quick-to-throw-together functionality comes at a cost, as the controls can render down to some quite clumsy HTML.

For example a RadTextBox called ‘RadTextBox1’ with a prompt message within it renders to three input tags and a span tag:

<span id="RadTextBox1_wrapper" style="white-space: nowrap;">
  <input value="type here..." size="20" id="RadTextBox1_text" name="RadTextBox1_text" style="width: 290px;" type="text">
  <input id="RadTextBox1" name="RadTextBox1" title="" style="visibility: hidden; margin: -18px 0pt 0pt -1px; width: 1px; height: 1px; overflow: hidden; border: 0pt none; padding: 0pt;" value="" type="text">
  <input autocomplete="off" value="{&quot;enabled&quot;:true,&quot;emptyMessage&quot;:&quot;type here...&quot;}" id="RadTextBox1_ClientState" name="RadTextBox1_ClientState" type="hidden">
</span>

The element that actually shows on-screen isn’t the one with ID ‘RadTextBox1’ which is annoying when trying to tie together jQuery and Telerik controls. For example, to attach a jQuery Autocomplete to the above Telerik RadTextBox you’d have to either do it by class (fine, unless you’re using this in a user control in which case you’d have to class each one differently just to get different autocompletion lists working) or assume that Telerik stick with their current convention of appending ‘_text’ to the element ID that actually shows.

So it’s fairly good news for those faced with combining Telerik controls and jQuery (or anything else javascripty) that they’ve introduced ‘single input rendering mode‘ that turns the above into something marginally clearer:

<span id="RadTextBox1_wrapper" style="width: 290px;">
   <span id="RadTextBox1_display" style="display: inline; color: rgb(138, 138, 138); font-family: &quot;segoe ui&quot;,arial,sans-serif; font-size: 12px; line-height: 17px;">type here</span>
   <input style="color: transparent;" id="RadTextBox1" name="RadTextBox1" size="20" type="text">
   <input autocomplete="off" value="{&quot;enabled&quot;:true,&quot;emptyMessage&quot;:&quot;type here&quot;}" id="RadTextBox1_ClientState" name="RadTextBox1_ClientState" type="hidden">
</span>

It’s still generating a bunch of tags for something fairly straightforward, but at least now the visible input control is the one with the ID you assign in the page making interactions with jQuery a little easier.