RadDatePicker - Multiple Labels

8 posts, 0 answers
  1. Gregory
    Gregory avatar
    4 posts
    Member since:
    Oct 2014

    Posted 17 Oct 2014 Link to this post

    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
  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 22 Oct 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gregory
    Gregory avatar
    4 posts
    Member since:
    Oct 2014

    Posted 22 Oct 2014 in reply to Viktor Tachev Link to this post

    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
  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 27 Oct 2014 Link to this post

    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.

     
  6. Gregory
    Gregory avatar
    4 posts
    Member since:
    Oct 2014

    Posted 29 Oct 2014 in reply to Viktor Tachev Link to this post

    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
  7. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 03 Nov 2014 Link to this post

    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.

     
  8. Gregory
    Gregory avatar
    4 posts
    Member since:
    Oct 2014

    Posted 04 Nov 2014 in reply to Viktor Tachev Link to this post

    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 
  9. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 07 Nov 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017