As you already know we have introduced new rendering model for RadInput in Q3 2011. It was later set as default mode in Q1 2012.
The initial idea behind this change was to remove 2 of the input elements from the output HTML of the control and use a span that to overlay the visible one in order to show the formatted value. With this approach we really have fewer elements on the page and in the same time we could show, validate and submit different values. We also removed the table in order to provide better styling potential and boost the performance.
I know what you will say in this moment: Why not remove the old rendering, leave only the new one and it would work even faster? That’s good idea. However the old rendering has one advantage that we don’t want to lose: it uses a table. As it could be bad in most of the cases, the table could be used when the control has label. In case when we want the label to have minimal length, and the input to get the rest of the length automatically without any calculation, we need a table.
We come up with this new approach that is combination between both modes:
It makes difference in the rendering. By default EnableSingleInputRendering is still “true”, and when you set it to “false”, the control renders table around the label, input and button elements.
Here is an example ASP markup:
"riSingle RadInput RadInput_Default"
By default in non-single input rendering mode the width of the label is not set, and the length of the input is 100%, so it will be auto sized to get all possible free space in the table. When in single input rendering mode, the default length of the label is 40% and 60% for the input. This width can be changed with the LabelWidth property. And in your browsers the inputs will look like this:
You probably spotted that the riContentWrapper is also needless in this case, but it will stay there until Q2 2012 SP1 for backwards compatibility.
//In this event handler "sender" is actually the client side object.
//Accessing objects and elements:
clientSideObject = $find(
visibleInputElement = $get(
//Accessing the visible value:
formattedDisplayValue1 = clientSideObject.get_displayValue();
formattedDisplayValue2 = visibleInputElement.value;
//if the input is blurred
//Accessing the validation value:
validationValue1 = clientSideObject.get_validationText();
validationValue2 = visibleInputElement.RadInputValidationValue;
//Accessing the edit value:
editValue1 = clientSideObject.get_editValue();
editValue2 = visibleInputElement.value;
//if the input is focused
//Get the control's value:
value1 = clientSideObject.get_value();
//Find the client object if you have its textbox element:
object = $find(visibleInputElement.id);
//Get the HTML element if you have reference to the client object:
element1 = $get(clientSideObject.get_id());
element2 = clientSideObject._textBoxElement;
//hacky but will work with the old rendering as well
The new DisplayText property allows you to set the display value from the Server to a different value the actual value. Similar to the empty message, but shown even if the input is not empty (cool, ain’t it). This text will be cleared once the user changes the input value.
sender, EventArgs e)
dateInput.SelectedDate = DateTime.Now;
"Please enter date"
"Click here to change the date"
In this example, initially the users will see “Click here to change the date”. When they click in the input they will see the current date. When they change the date and get out of focus, they will see the newly entered date. But if all the text is deleted, they will see the empty message. The DisplayText property can be used if you do server-side validation and you want to tell the client that his input is not valid after the PostBack.
"Please enter 'John' in this textbox"
//currently the value of the InputControl is what the user entered, however he/she sees message that we set.
In password mode the empty message is shown as bullets like in Q3 2011
Hope you enjoy the improvements we made!
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.