Monday, March 21, 2011

Telerik Controls - A perfect example of how not to do things!

As you might have known already from my previous post, in one of my projects we use Telerik Controls extensively for showing various GUI controls.

I personally *hate* using Telerik controls.  Lot of people have asked me, why I hate them, hence for the benefit of the community, I have decided to document the reasons of my hatred for Telerik controls.

Telerik has provided a lot of controls that could be used in variety of situations.  They have provided lots of demos for various controls that they provide.  Looking at just the demo, anyone will be impressed with these controls and would want to give them a shot.  But, once you start using them, you will realize how badly they have been architected.

Oh! by the way, tell me one thing.

What are demo websites meant for?

I would say, to showcase the power of the product/tool.  Demo websites make the first impression about any product/tool.  Its extremely important to get this right.  But, for me, Telerik has failed in making a solid impression.

The Telerik controls demo website does not working in Firefox 64 bit!  

My hatred starts here.  More and more machines are getting 64 bit OS pre-installed on them.  Companies and People are moving towards 64 bit platform.  If entire Telerik demo website not working on Firefox 64 bit, its a shame if not anything else.

I am going to bitch about some of the basic Telerik controls, because I believe, if you can't get the basics right, you cant get it right at all!


Lets talk about the most basic Telerik control, the RadTextBox.  You might feel, surely there is nothing wrong with the text box right!  But unfortunately, Telerik has got the most basic control wrong.

The asp.net code to use the RadTextBox in your page looks like

Nothing fancy here right? Yes, I would agree. The asp.net code does not look too bad. Lets look at the generated HTML for a moment.

What? Where did the "span" and two extra "input" tags come from?

Yep, believe it or not. One RadTextBox gets rendered as a span and three input tags!

Why would any one decide to render one Text box as using three input tags!

Whats the problem with rendering one TextBox as three input tags?

Well, none of your traditional JavaScript would work!

For e.g. lets say, you were using jQuery for your JavaScript manipulation (BTW, jQuery is an excellent JavaScript framework.  I recommend it for every web based project!  Great work guys!), the code to update the value of the text field to "Hello World" should look like

But unfortunately, the above code does not work. Since Telerik uses 3 input tags to render one text box the above JavaScript code does not set the value of the text field!

Instead, Telerik provides JavaScript wrappers for their controls.  In this case to update the value of the first name text box we have to use the following JavaScript.

Update: $find function is part of the Telerik JavaScript.  $find is part of the "MicrosoftAjax.js".  Thanks bugventure for pointing me to the right direction.

This effectively means none of the awesome jQuery api can be used with any of the Telerik Controls.

Yes, you read it right.  I will say it again, JQuery api would not work as expected with Telerik Controls. 

Imagine, how you will show/hide, enable/disable the text box. What about adding/removing a class from the text box. These are just a few examples of what you will not be able to do using jQuery because of Telerik controls.  Believe me, without jQuery, JavaScript manipulation is going to be tough!

Now you understand my frustration?

Lets look at one more control and I promise we will be done after that.

RadComboBox:

This one is my favorite control, I just love bitching about this control.  I am amazed at how badly they have messed this up.

The asp.net code to use the RadComboBox in your asp.net page would look like

The above RadComboBox is suppose to show users a list of countries. Notice that, we have not attached any special behavior to it.

Before looking at the generated HTML, do you want to take a guess at how should it look like?

10 Bucks if you get this right!

But, I can guarantee that,  the generated html looks nothing like you would have thought

Usually for us "the mortal developers", Combo Box is rendered via the "select" tag.  We use CSS to style it.

But, Telerik had different plans for the Combo Box.  May be, Telerik thought,

"Oh! that is too simple, lets make peoples lives complicated". 

Telerik uses a complex tree of "div's, ul, li, table, tr, td, a, input and an hidden input", for something that could have been easily achieved using a simple "select" tag, some JavaScript and some CSS!


Telerik, did you forget the KISS principle?

I am simply speechless!  What can I say, its a disaster.  Needless to say that, the traditional JavaScript does not work with Telerik RadComboBox.

This is just developer side of the problem.
  • What about automated functional tests?  
  • What about the QA's who take so much effort to write functional tests using selenium and other tools?
Tools like selenium rely heavily on use of traditional JavaScript, because of this functional tests written using these tools do not work well with Telerik Control.

For e.g. looking at the html generated for a simple combo box, imagine what will the code look like to select a country from the drop down.  Its just terrible.

One last thing and I will stop.

Lets say, if you wanted to do something when client side onblur event occurs for a RadTextBox and RadComboBox.  This is how you will have to do it.

The above code shows how we attached an client side onblur event with RadTextBox. Lets see how we have to attach the client side onblur event for the RadComboBox

Did you notice the inconsistency between two Telerik controls themselves?

I can only say, surely there are better ways of doing things!


Telerik, if you are reading this, you better pull up your socks and start doing some major rearchitecting!

I think that is enough bitching for a post.

Ah, almost forgot, if you are still interested in using Telerik Controls in your project, you need to pay for it, They are not free!
Have some Fun!