|
Article relates to
|
RadInput for ASP.NET 2.1.4+;
RadInput Prometheus 2007.3.1323.20+
|
|
Created by
|
Dimo Dimov
|
|
Last modified
|
|
|
Last modified by
|
|
RadInput has to support a scenario in which several HTML elements
(Label, TextBox and Button) occupy a preset amount of space, without calculating and changing
the elements' widths with Javascript on the client. Unfortunately, this can only be achieved by enclosing these elements inside a table.
In order to improve the standards compliance of RadInput and RadDateTimePicker, we
created a rendering mode with no tables. The condition is that the label and image buttons are not used. Instead,
one has to add custom labels and image buttons and make them work like the controls' native ones.
Attached to this article is a sample project which demonstrates the described approach for both the Prometheus and "Classic" controls. We added this standard-compliant rendering feature very short time before Q3 2007 SP1 was released (on January 14, 2008), and we found a couple of issues related to HTML validation afterwards. That is why the attached project runs with custom build assemblies of RadInput for ASP.NET and RadControls Prometheus. If anyone would like to obtain developer versions, please contact our Support team.
| <script type="text/javascript"> |
| function InputClick() |
| { |
| document.getElementById('form1').submit(); |
| } |
| function DateClick() |
| { |
| <%= RadDateTimePicker1.ClientID %>.ShowPopup(); |
| } |
| function TimeClick() |
| { |
| <%= RadDateTimePicker1.ClientID %>.ShowTimePopup(); |
| } |
| </script> |
| |
| <label for="RadTextBox1_text">Label</label> |
| <rad:RadTextBox ID="RadTextBox1" runat="server" /> |
| <a href="#" onclick="InputClick()"><img src="img/input_button.gif" alt="go button" /></a> |
| |
| <label for="RadDateTimePicker1_dateInput_text">Label</label> |
| <rad:RadDateTimePicker ID="RadDateTimePicker1" runat="server" |
| DatePopupButton-Visible="false" |
| TimePopupButton-Visible="false" |
| /> |
| <a href="#" onclick="DateClick()"><img src="img/datepicker_button.gif" alt="pick date" /></a> |
| <a href="#" onclick="TimeClick()"><img src="img/timepicker_button.gif" alt="pick time" /></a> |
| <script type="text/javascript"> |
| function InputClick() |
| { |
| document.getElementById('form1').submit(); |
| } |
| function DateClick() |
| { |
| $find("<%= RadDateTimePicker1.ClientID %>").showPopup(); |
| } |
| function TimeClick() |
| { |
| $find("<%= RadDateTimePicker1.ClientID %>").showTimePopup(); |
| } |
| </script> |
| |
| <label for="RadTextBox1_text">Label</label> |
| <telerik:RadTextBox ID="RadTextBox1" runat="server" /> |
| <a href="#" onclick="InputClick()" class="va"><img src="img/input_button.gif" alt="go button" /></a> |
| |
| <label for="RadDateTimePicker1_dateInput_text">Label</label> |
| <telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server" |
| DatePopupButton-Visible="false" |
| TimePopupButton-Visible="false" |
| /> |
| <a href="#" onclick="DateClick()"><img src="img/datepicker_button.gif" alt="pick date" /></a> |
| <a href="#" onclick="TimeClick()"><img src="img/timepicker_button.gif" alt="pick time" /></a> |
There are no comments yet.
Please Sign In to rate this article.