Standard Compliant RadInput and RadDateTimePicker With No Tables
|
Article relates to
|
RadCalendar
|
|
Created by
|
Dimo Dimov
|
|
Last modified
|
Jan, 2013
|
|
Last modified by
|
Eyup Yusein
|
By default, RadDatePicker is rendered with HTML table since its forming elements
(Label, TextBox and Button) occupy a preset amount of space and configuring their positioning (without calculating and changing
the elements' widths with Javascript on the client) can only be achieved by enclosing these elements inside a table.
In order to improve the standards compliance of RadInput and RadDateTimePicker, a rendering mode with no tables can be used. The condition is to hide the label and popup button of the picker. To replace them,
one can add custom labels and image buttons and make them work like the controls' native ones.
| <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> |
Comments
If you'd like to comment on this KB
article, please, send us a
Support Ticket.
Thank you!
Please
Sign In
to rate this article.