Cannot disable raddatepicker

6 posts, 0 answers
  1. Bill
    Bill avatar
    175 posts
    Member since:
    Apr 2010

    Posted 17 Nov 2010 Link to this post

    I am trying to enable/disable a raddatepicker control and am unable to do so. I followed the online documentation for the client-side api and when it runs, I get the msg "radAdmitDate" is undefined.

    Below is my documented code. What am I doing incorrectly?

    html
    -------

                                                                                                                   <td class="td_AEV">
                                                                                                                                        <asp:CheckBox ID="isAdmitted" runat="server" Text="Patient Admitted" Font-Size="8pt"
                                                                                                                                            onclick="EnableAdmitDate();" />
                                                                                                                                    </td>

     

                                                                                                                   <td class="td_AEV">
                                                                                                                                        Admit Date:<telerik:RadDatePicker ID="radAdmitDate" runat="server" Font-Size="8pt"
                                                                                                                                            Enabled="false" onblur="CheckForCompletedReqFlds('Chart');">
                                                                                                                                            <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x"
                                                                                                                                                runat="server">
                                                                                                                                            </Calendar>
                                                                                                                                            <DatePopupButton HoverImageUrl="" ImageUrl="" />
                                                                                                                                            <DateInput ID="DateInput2" DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy" runat="server">
                                                                                                                                            </DateInput>
                                                                                                                                        </telerik:RadDatePicker>
                                                                                                                                    </td>

     

    js
    ----------

    function EnableAdmitDate() {               
                    if (document.getElementById("isAdmitted").checked == "1") {
                        var datepicker = <%= radAdmitDate.ClientID %>;
                        datepicker.DateInput.Enable();
                        datepicker.PopupButton.onclick = function()
                                                {
                                                    datepicker.TogglePopup();
                                                     return false;
                                                };
                    }
                    else {
                        var datepicker = <%= radAdmitDate.ClientID %>;
                        datepicker.DateInput.Disable();
                        datepicker.PopupButton.onclick = null;
                    }
                }

     

    js runtime
    ---------------

    function EnableAdmitDate() {               
                    if (document.getElementById("isAdmitted").checked == "1") {
                        var datepicker = radAdmitDate;
                        datepicker.DateInput.Enable();
                        datepicker.PopupButton.onclick = function()
                                                {
                                                    datepicker.TogglePopup();
                                                     return false;
                                                };
                    }
                    else {
                        var datepicker = radAdmitDate;
                        datepicker.DateInput.Disable();
                        datepicker.PopupButton.onclick = null;
                    }
                }

  2. Daniel
    Admin
    Daniel avatar
    4946 posts

    Posted 17 Nov 2010 Link to this post

    Hello William,

    Please try to modify your code this way:
    function EnableAdmitDate()
    {
        if ($get("isAdmitted").checked == "1")
        {
            var datepicker = $find('<%= radAdmitDate.ClientID %>');
            datepicker.get_dateInput().enable();
            datepicker.get_popupButton().onclick = function ()
            {
                datepicker.togglePopup();
                return false;
            };
        }
        else
        {
            var datepicker = $find('<%= radAdmitDate.ClientID %>');
            datepicker.get_dateInput().disable();
            datepicker.get_popupButton().onclick = null;
        }
    }

    I hope this helps. Let me know if you have any questions.


    Regards,
    Daniel
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bill
    Bill avatar
    175 posts
    Member since:
    Apr 2010

    Posted 18 Nov 2010 Link to this post

    Daniel, I implemented your code. It works as far as enabling/disabling the AdmitDate, but it doesn't enable/disable the calendar popup (see attached pics).

    When disabling the AdmitDate, it also doesn't clear out the contents of the AdmitDate textbox.

    When the AdmitDate is enabled, you can type in the textbox, but looks disabled because the calendar popup is disabled.

    Could you please inform me of the updated code I can use to correct this?

    html
    --------
    <tr>
                                                                                                                                    <td class="td_AEV">
                                                                                                                                        <asp:CheckBox ID="isAdmitted" runat="server" Text="Patient Admitted" Font-Size="8pt" onclick="EnableDisableAdmitDate();" />
                                                                                                                                    </td>
                                                                                                                                </tr>
                                                                                                                                <tr>
                                                                                                                                    <td class="td_AEV">
                                                                                                                                        Admit Date:<telerik:RadDatePicker ID="radAdmitDate" runat="server" Font-Size="8pt"
                                                                                                                                            Enabled="false" onblur="CheckForCompletedReqFlds('Chart');">
                                                                                                                                            <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x"
                                                                                                                                                runat="server">
                                                                                                                                            </Calendar>
                                                                                                                                            <DatePopupButton HoverImageUrl="" ImageUrl=""  />
                                                                                                                                            <DateInput ID="DateInput2" DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy"  runat="server">
                                                                                                                                            </DateInput>
                                                                                                                                        </telerik:RadDatePicker>
                                                                                                                                    </td>
                                                                                                                                </tr>


    js
    ------

                // Enable/Disable AdmiteDate when Patient Admitted is checked/unchecked
                function EnableDisableAdmitDate() {
                    if ($get("isAdmitted").checked == "1") {
                        var datepicker = $find('<%= radAdmitDate.ClientID %>');
                        datepicker.get_dateInput().enable();
                        datepicker.get_popupButton().onclick = function() {
                            datepicker.togglePopup();
                            return false;
                        };
                    }
                    else {
                        var datepicker = $find('<%= radAdmitDate.ClientID %>');
                        datepicker.value = null;
                        datepicker.get_dateInput().disable();
                        datepicker.get_popupButton().onclick = null;
                    }
                }
  5. Bill
    Bill avatar
    175 posts
    Member since:
    Apr 2010

    Posted 23 Nov 2010 Link to this post

    Any update to this post?

    It's been a couple of days now since I've heard from anyone....
  6. Daniel
    Admin
    Daniel avatar
    4946 posts

    Posted 24 Nov 2010 Link to this post

    Hello William,

    I recommend that you disable the whole picker control except if you need to disable the date input separately:
    <script type="text/javascript">
        function EnableDisableAdmitDate()
        {
            var datepicker = $find('<%= radAdmitDate.ClientID %>');
            datepicker.set_enabled($get("isAdmitted").checked == "1");
        }
    </script>

    Also you can clear the contents of the control using the built-in clear method:
    ...
    datepicker.clear();

    RadDatePicker Client Object

    Regards,
    Daniel
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  7. Bill
    Bill avatar
    175 posts
    Member since:
    Apr 2010

    Posted 29 Nov 2010 Link to this post

    Thanks, that worked fine...
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017