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:
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:
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:
"Please Enter Date"
"dd MMMM yyyy"
Here is an example declaration of NumericTextBox using the old rendering:
Will render like:
"display: -moz-inline-stack; width: 125px; height: 20px;"
"border-width: 0; border-collapse: collapse; width: 125px;"
"width: 100%; white-space: nowrap;"
"visibility: hidden; float: right; margin: -18px 0 0 -1px; width: 1px; height: 1px; overflow: hidden; border: 0; padding: 0;"
And the same input with EnableSingleInputRendering="true" will render like:
"riSingle riContButton RadInput RadInput_Default"
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.
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.
Iana Tsolova is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.