RadDatePicker - Multiple Labels

[Gregory]

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

[Viktor Tachev]

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

 

 

[Gregory]

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

[Viktor Tachev]

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

 

 

[Gregory]

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

[Viktor Tachev]

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

 

 

[Gregory]

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 

[Viktor Tachev]

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