This is a migrated thread and some comments may be shown as answers.

RadDatePicker - Multiple Labels

7 Answers 82 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Gregory
Top achievements
Rank 1
Gregory asked on 17 Oct 2014, 04:06 PM
I have a telerik:RadDatePicker control in my ascx file. I need to make it accessible by associating a label. When I put in:

         
<telerik:RadDatePicker ID="RadDatePicker1" ShowPopupOnFocus="True" runat="server" ToolTip="Start Date" DateInput-Display="True" DateInput-Label="Start:">
</telerik:RadDatePicker>


I get two labels instead of one. (see attached image).

Here is the html it is producing:

<td>
    <label for="main_0_content_0_ctl03_RadDatePicker1_dateInput"   id="main_0_content_0_ctl03_RadDatePicker1_dateInput_Label">
Start:
    </label>
</td>
<td class="rcInputCell" style="width:100%;">
    <span id="main_0_content_0_ctl03_RadDatePicker1_dateInput_wrapper" class="riSingle RadInput RadInput_Default" style="display:block;width:100%;">
        <label class="riLabel" for="main_0_content_0_ctl03_RadDatePicker1_dateInput" id="main_0_content_0_ctl03_RadDatePicker1_dateInput_Label" style="width:40%;">
Start:
        </label>
        <span class="riContentWrapper" style="width:60%;">
        <input id="main_0_content_0_ctl03_RadDatePicker1_dateInput" name="main_0$content_0$ctl03$RadDatePicker1$dateInput" class="riTextBox riEnabled" type="text" />
        </span>
        <input id="main_0_content_0_ctl03_RadDatePicker1_dateInput_ClientState" name="main_0_content_0_ctl03_RadDatePicker1_dateInput_ClientState" type="hidden" />
    </span>
</td>
<td>
    <a title="Open the calendar popup." href="#" id="main_0_content_0_ctl03_RadDatePicker1_popupButton" class="rcCalPopup">
Open the calendar popup.
    </a>
    <div id="main_0_content_0_ctl03_RadDatePicker1_calendar_wrapper" style="display: none" >
        <table id="main_0_content_0_ctl03_RadDatePicker1_calendar" summary="Calendar" cellspacing="0" class="RadCalendar RadCalendar_Default">
...

Why?

Thanks,
Gregory

7 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 22 Oct 2014, 08:54 AM
Hi Gregory,

I tried replicating the behavior shown in the screenshot, however, I was unable to. I am attaching a sample Web Site project I used for testing. It is working as expected on my end.

Try running the sample and see if it works on your end as well. Would you let me know what needs to be changed in order to replicate the issue?

Regards,
Viktor Tachev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Gregory
Top achievements
Rank 1
answered on 22 Oct 2014, 05:16 PM
Viktor,

Thank you for your response. 
It is still showing double labels. (see capture.PNG)
I tried to attach my project (which was based on yours), but the forum wouldn't let me attach a zip.

I made a change to the web.config file 
<appSettings>
   <add key="webpages:Enabled" value="true" />
   <add key="webPages:Version" value="2.0"/>
 </appSettings>

I had to do that or it wouldn't run in Visual Studio 2013.

I also referenced Telerik.Web.UI, version 2012.2.607.35, runtime version v2.0.50727

I don't think I changed anything else.

Thank you for your help,
Gregory
0
Viktor Tachev
Telerik team
answered on 27 Oct 2014, 12:27 PM
Hello Gregory,

Thank you for the additional information.

I tested the sample with the version of the controls that you referenced and the issue was indeed observed.

Nevertheless, it is recommended to upgrade the controls to the latest version. It includes various updates and improvements. Also the new versions of the controls are fully compatible with Visual Studio 2013 and Internet Explorer 11. Note that both the IDE and the browser were not yet released in 2012.

The current version of the controls is 2014.3.1022. Try upgrading to that version and the issue should disappear.

Regards,
Viktor Tachev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Gregory
Top achievements
Rank 1
answered on 29 Oct 2014, 03:31 PM
Thanks Viktor,

Unfortunately, we won't be able to get the updated control until we update Sitecore. That is months away. Ah well, it is what it is.

...Gregory
0
Viktor Tachev
Telerik team
answered on 03 Nov 2014, 11:17 AM
Hello,

If it is not possible to upgrade the controls you can use CSS to hide the unnecessary label. Try adding the following CSS rules and see how they are working for you:

.riContentWrapper {
    width: 100% !important;
}
.RadPicker td span label {
    display: none !important;
}


Regards,
Viktor Tachev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Gregory
Top achievements
Rank 1
answered on 04 Nov 2014, 04:23 PM
Good idea Viktor, It looks like that will work for the interim.

On a related not, it also looks like the css class that can be assigned to the label does not work on my version. Is that fixed on the newer version?

...gregory 
0
Viktor Tachev
Telerik team
answered on 07 Nov 2014, 09:46 AM
Hello Gregory,

The property DateInput-LabelCssClass can be used to apply styles to the label. However, this label is hidden by the CSS from my last post. In order to fix that try the following CSS rules instead. It works as expected on my end.

.riContentWrapper {
    width: 75% !important;
}
.RadPicker td > label {
    display: none !important;
}
 
.RadPicker label.test {
    color: red;
    width: 25% !important;
}


Regards,
Viktor Tachev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Calendar
Asked by
Gregory
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Gregory
Top achievements
Rank 1
Share this question
or