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

RadMonthYearPicker without input field

8 Answers 148 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 1
Eric asked on 29 May 2012, 07:53 PM
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?

8 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 30 May 2012, 05:13 AM
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.
0
Eric
Top achievements
Rank 1
answered on 30 May 2012, 04:20 PM
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>


0
Princy
Top achievements
Rank 2
answered on 31 May 2012, 05:17 AM
Hi Eric,

Try the following CSS.

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

Hope this helps.

Regards,
Princy.
0
Eric
Top achievements
Rank 1
answered on 31 May 2012, 02:16 PM
We're getting there, see attached image:
0
Vasil
Telerik team
answered on 05 Jun 2012, 07:47 AM
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.
0
Eric
Top achievements
Rank 1
answered on 05 Jun 2012, 09:25 PM
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?
0
Princy
Top achievements
Rank 2
answered on 06 Jun 2012, 11:59 AM
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.
0
Vasil
Telerik team
answered on 06 Jun 2012, 12:26 PM
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.
Tags
Calendar
Asked by
Eric
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Eric
Top achievements
Rank 1
Vasil
Telerik team
Share this question
or