Changes in RadInput in Q2 2012 version of RadControls

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.

In the last Q we had to support both renderings to be backwards compatible with the older versions. People are still able to set EnableSingleInputRendering=”false” and to use the old rendering in their projects, to avoid rewriting the styles. However supporting both modes is causing performance penalty since they work differently. Not only that the JavaScript code is bigger, but has lots of checks in each moment what is the mode and what should happen.

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:

• Render one input element that to be visible all the time like in Q2 2012.
• Do not use SPAN element like in Q3 2011.
• Render only one input like in Q2 2012.
• Set validators to access different value from the visible one to work with cultures properly.
• Provide a way for showing different text in the input, without changing the validation value, in order to show empty/error messages dynamically on all Input controls.

New Validation Model

The idea is to render only the input element all the time, and remove the span element and the excessive inputs.  To achieve this we store the validation value in “expando” property and we submit real value through the client state.  Also we needed to override the ValidatorGetValue function of asp:Validators to look our expando property called “RadInputValidationValue”. 

The Role of the EnableSingleInputRendering Property since Q2 2012

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:

The rendered HTML will be like(I’ve  stripped some styles to be more clear):

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.

Another reason you would might want to set EnableSingleInputRendering="false" for your Telerik’s ASP.NET AJAX Input controls is to avoid re-computing of the styles dynamically on the client.

Tips and Tricks for Client and Server-Side Programming

Accessing the Client object and input element:

New DisplayText server-side property

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.

Aspx:

C#: 

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.

Showing informative messages inside the textbox

Similar to the server-side DisplayText property, there is a displayValue client-side property. You can use it when you want to show some message inside the textbox with JavaScript code. And this message will not affect the control actual value:

Known Limitations (For Now)

In password mode the empty message is shown as bullets like in Q3 2011

Changes You Should Do After Upgrade

If you upgrade from Q1 2012:

Public client side API was no changes. So if you strictly used only public methods you don’t need to change anything, and the control will work the same way.

If you upgrade from Q3 2011 or older:

• If you have accessed the visible input element using: 
• $get("<%=input1.ClientID %>_text")
  Now you should use:
• $get("<%=input1.ClientID %>")

• If you have accessed the value of NumericTextBox using:
• $get("<%=NumericTextBox1.ClientID %>_value").value;
  You should change your code to:
• $find("<%=NumericTextBox1.ClientID %>").get_value();

• If you have accessed the validation value using:
• $get("<%=input1.ClientID %>").value;
  Now you have to use:
• $get("<%=input1.ClientID %>").RadInputValidationValue;

Hope you enjoy the improvements we made!