Get Better Performing Input Fields in Your ASP.NET AJAX Apps

As we are constantly trying to improve our controls, in Q3 2011 we are introducing new HTML rendering for Telerik’s ASP.NET AJAX Input control – single input rendering. First of all I should assure you that the old rendering is still available, so all your custom styles and complicated scenarios with RadInput will still work.

Let’s check some of the advantages of the single input rendering mode comes with: 

• No table is used when having buttons and/or labels, which results in quicker rendering.
• Less HTML is rendered as a whole, which leads to less data transferred to the client.
• The control can show readable text when the input is in password mode. This is useful for showing empty and error messages.
• The ClientID of the control will be used for the <input> element in which the user types. So you will no longer need to add anything like “_text” when need to get it by ID.
• Since the new rendering is not using any tables, the control is always held in a span. This allows for placing the control inside paragraphs for instance without breaking the XHTML validation.

How it works

To turn on the new rendering you just need to set the EnableSingleInputRendering property to true (the default value is false) for the RadInput controls on the page.
With the new rendering the two main HTML elements of the RadInput are:

1. The input element in which the user types and submits.
2. Span element over the input that holds formatted and empty messages when needed.

The control has two main stages:  focus and blur. When the control is in focus, the <span> element is not visible, this allows the user to see the text that he types. We call this text “Edit value”, since the user edits it. When the control is not in focus, the <span> element that holds formatted value (also called as “Display value”) is shown to the user. At the same time the value in the <input> could be corrected depending on the validation format and I will refer to this formatted value as “Validation value”.

Let me give an example with RadDateInput defined as follows:

1. When the page loads, the user will see “Please Enter Date” text over the input. In the same time value of the input is an empty string. This means that Validation value (the value that would be submitted, if the user makes a Postback) will be null;
2. Then the user clicks on the input. Now we are going into the focus stage. The span gets hidden and the user sees empty input with a blinking caret inside.
3. Since the user is not required to know what is the edit value he could type “10.22.2011” (without the quotes). The date is parsed and autocorrected depending on the DateFormat. So the Edit value gets “2011/10/22”. As the input is still in focus, the user will see this corrected value in the input, he could modify it further or decide that is correct one.
4. The user clicks away (or tabs) to blur the textbox. So we are going to blur stage. As a result the Display value gets changed to “22 October 2011” according to the selected DisplayDateFormat. At the same time Validation value gets “2011-10-22-00-00-00” which can easy be validated regardless of the culture settings and preferred displaying format.
5. If the user clicks again on the input and focus it, he will see back the Edit value “2011/10/22” and so on.

See the difference

Here is an example declaration of NumericTextBox using the old rendering:

Will render like:

And the same input with EnableSingleInputRendering="true" will render like:

As you can see above, the rendered HTML is almost twice shorter in the second sample. You could find a live comparison in our online demos here.

Style easier

With the new rendering we are also trying to make Telerik’s ASP.NET AJAX Input control even easier to style than it was before. You will find information on what CSS classes are applied to the elements in our help resources.

I hope that you will like the improvement. Try it out and share your experience, all feedback is highly appreciated.