RadMonthYearPicker without input field

9 posts, 0 answers
  1. Eric
    Eric avatar
    32 posts
    Member since:
    Jun 2011

    Posted 29 May 2012 Link to this post

    Is there a way to disable, or rather replace the input field of a RadMonthYearPicker with a label? Or just show the image?

    I'm trying to create a GridView that emulates a calendar since the functionality I need doesn't exist with the RadCalendar and I'd really like to emulate the way the RadCalendar uses the paged month/year label as the trigger to open the MonthYearPicker. Is there anyway I can accomplish that myself?
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 May 2012 Link to this post

    Hi Eric,

    I suppose you want to disable/hide the input field of RadMonthYearPicker. Try the following approaches to disable/hide the input field of RadMonthYearPicker.

    1) Try the following code snippet to disable the input field of RadMonthYearPicker.

    JS:
    <script type="text/javascript">
        function pageLoad()
        {
            $telerik.$('.riTextBox').attr("disabled", "disabled");
        }
    </script>

    2) Try the following CSS to hide the input field of RadMonthYearPicker.

    CSS:
    <style type="text/css">
         .riSingle .riTextBox
            {
                display: none !important;
            }
    </style>

    Hope this helps.

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Eric
    Eric avatar
    32 posts
    Member since:
    Jun 2011

    Posted 30 May 2012 Link to this post

    It hides the input field, but doesn't remove the width associated with it. Please see the attached image. I believe it has to do with the following code:
    <table cellspacing="0" class="rcTable rcSingle" style="width:100%;">
        <tr>
              <td class="rcInputCell" style="width:100%;">
                     <span id="ctl00_m_g_0db9cee1_c484_45e4_bffd_acdd7881b2ac_ctl00_RadMonthYearPicker1_dateInput_wrapper" class="riSingle RadInput RadInput_Metro" style="display:block;width:100%;">
                       <span class="riDisplay" id="ctl00_m_g_0db9cee1_c484_45e4_bffd_acdd7881b2ac_ctl00_RadMonthYearPicker1_dateInput_display" style="display:none;"></span>
                          <input id="ctl00_m_g_0db9cee1_c484_45e4_bffd_acdd7881b2ac_ctl00_RadMonthYearPicker1_dateInput" name="ctl00$m$g_0db9cee1_c484_45e4_bffd_acdd7881b2ac$ctl00$RadMonthYearPicker1$dateInput" type="text" class="riTextBox riEnabled" />
                            <input id="ctl00_m_g_0db9cee1_c484_45e4_bffd_acdd7881b2ac_ctl00_RadMonthYearPicker1_dateInput_ClientState" name="ctl00_m_g_0db9cee1_c484_45e4_bffd_acdd7881b2ac_ctl00_RadMonthYearPicker1_dateInput_ClientState" type="hidden" />
                   </span>
             </td>


  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 31 May 2012 Link to this post

    Hi Eric,

    Try the following CSS.

    CSS:
    <style type="text/css">
        .rcInputCell
            {
                display: none !important;
            }
    </style>

    Hope this helps.

    Regards,
    Princy.
  6. Eric
    Eric avatar
    32 posts
    Member since:
    Jun 2011

    Posted 31 May 2012 Link to this post

    We're getting there, see attached image:
  7. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 05 Jun 2012 Link to this post

    Hello Eric,

    You can inspect the elements in the browser to see which element sill has width and from what CSS these styles are coming. Then write custom CSS that to over-style them. It will be very hard for us to say what could be the problem, without having your page.

    All the best,
    Vasil
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Eric
    Eric avatar
    32 posts
    Member since:
    Jun 2011

    Posted 05 Jun 2012 Link to this post

    Vasil, whatever I write-over the Telerik control keeps adding width: 100%.

    However, I would much rather have the option to have the RadMonthYearPicker "pop-out" when a label is clicked, like how the RadCalendar works. Is that possible?
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Jun 2012 Link to this post

    Hello Eric,

    Try the following js to show popup on label click and hide the input filed using the CSS mentioned below.
    CSS:
    .RadPicker_Default .rcCalPopup, .RadPicker_Default .rcTimePopup
         {
             background-image:none !important;
         }
          .riTextBox
         {
             display:none !important;
         }
         table.RadCalendarMonthView_Default
         {
             margin-left:-180px !important;
         }
         .RadCalendarPopupShadows > .rcShadTR
         {
             right:15px !important;
         }

    JS:
    function showpopup()
     {
         var picker = $find('<%=MonthYearPicker1.ClientID %>');
         picker .showPopup(true);
     }

    C#:
    protected void Page_Load(object sender, EventArgs e)
     {
        Label1.Attributes.Add("onClick", "showpopup();"); //to attach click event on label
     }

    Thanks,
    Princy.
  10. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 06 Jun 2012 Link to this post

    Hi Eric,

    The control refresh it's width on hover/focus/blur/disable/enable, however if you use CSS selector with higher specificity of these coming from the skin, you still will override the width.

    If you like to make it like the month year picker in the Calendar, you could use RadCalendar in our page and hide its rcMain table. This way you will see only the header and will be able to click on the date to select month.

    Regards,
    Vasil
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017