How to hide RadDatePicker popup on tab out of radgrid?

7 posts, 0 answers
  1. Harshit
    Harshit avatar
    7 posts
    Member since:
    Sep 2011

    Posted 21 Sep 2011 Link to this post

    Hi I have Rad datepicker control with in radgrid.
    Basic Html layout looks like this

    <telerik:RadGrid ID="grdtest" ShowStatusBar="true" runat="server" AllowPaging="True"
                            ShowFooter="true" AllowMultiRowEdit="true" GridLines="Both" AutoGenerateColumns="false" 
                            PageSize="100" Width="500px" HorizontalAlign="NotSet" OnNeedDataSource="GridDataSource">
                            <MasterTableView AutoGenerateColumns="False" DataKeyNames="RowID" EditMode="InPlace">
                                <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                                </RowIndicatorColumn>
                                <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                                </ExpandCollapseColumn>
                                <Columns>
                                    <telerik:GridTemplateColumn DataField="DateOfService" HeaderText="DOS" UniqueName="ServiceDate">
                                        <ItemTemplate>
                                            <telerik:RadDatePicker ID="dtPicker" runat="server" Width="100px"  DatePopupButton-Visible="false"
                                                 ShowPopupOnFocus="true" DbSelectedDate='<%# Bind("DateOfService") %>'>
                                                <DateInput runat="server" DateFormat="MM/dd/yyyy" EmptyMessage="MM/dd/yyyy" Width="80px">
                                                   <%--<ClientEvents OnValueChanged="ValueChanged" OnBlur="ValueChanged"  />--%>  
                                                </DateInput>
                                            </telerik:RadDatePicker>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>

                                </columns>

    ....

    ....

    ....

    This grid always remain in inline edit mode. When user types in value directly in date picker control instead of selecting and tabls out it does not hide popup. Can you help me providing proper solution for this problem?
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 22 Sep 2011 Link to this post

    Hello,

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function HidePopupofCalender(index) {
                    var grid = $find("<%=grdtest.ClientID %>");
                    var MasterTable = grid.get_masterTableView();
                    var Rows = MasterTable.get_dataItems();
                    var row = Rows[index];
                    var dtPicker = row.findControl("dtPicker");
                    dtPicker.hidePopup();
                }
            </script>
        </telerik:RadCodeBlock>
    ..............
    ..............
     <telerik:GridTemplateColumn HeaderText="DOS" UniqueName="ServiceDate">
                            <ItemTemplate>
                                <telerik:RadDatePicker ID="dtPicker" runat="server" Width="100px" DatePopupButton-Visible="false"
                                    ShowPopupOnFocus="true">
                                    <DateInput ID="DateInput1" runat="server" DateFormat="MM/dd/yyyy" EmptyMessage="MM/dd/yyyy">
                                    </DateInput>
                                </telerik:RadDatePicker>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
    ..............
    ..............
    protected void grdtest_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridDataItem)
            {
                GridDataItem item = e.Item as GridDataItem;
                RadDatePicker dtPicker = item.FindControl("dtPicker") as RadDatePicker;
     
                dtPicker.DateInput.Attributes.Add("onblur", "HidePopupofCalender(" + item.ItemIndex.ToString() + ")");
            }
        }

    let me know if any concern.

    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nancy
    Nancy avatar
    1 posts
    Member since:
    Oct 2013

    Posted 12 Nov 2013 Link to this post

    Hi,
             I want to hide the calendar popup on the tab out . This calendar popup is opened when the user clicks the popup button. I am able to hide the popup by adding onblur on datepopupbutton button as below

     

    actBegDt.DatePopupButton.Attributes.Add(

     

    "onblur", "HidePopupofCalender("dataBoundItem.ItemIndex.ToString()  ")")

     

     

     


    and on javascript function that you have mentioned . It works as expected i.e. the calendar is hidden on tab out.
     But the problem is when I try to select a date in the popup, the popup is hidden and it does not selects the date.

    Can you please help me.
           

  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 15 Nov 2013 Link to this post

    Hi,

    The date is not selected because the blur event is fired on keydown event. This hides the popup before the date is actually selected.

    In order to achieve the desired functionality you could use the onkeydown event and blur the calendar popup only if the tab key is pressed.

    The handler would look similar to this:

    function keyDown(sender, eventArgs) {
        if (eventArgs.keyCode == 9) {
            var dateInput = $telerik.findDateInput(sender.id);
            dateInput.get_owner().hidePopup();
        }
    }

    And the markup for the template column:

    <telerik:GridTemplateColumn HeaderText="DOS" UniqueName="ServiceDate">
        <ItemTemplate>
            <telerik:RadDatePicker ID="dtPicker" runat="server" Width="100px" DatePopupButton-Visible="false"
                ShowPopupOnFocus="true">
                <DateInput ID="DateInput1" runat="server" DateFormat="MM/dd/yyyy" EmptyMessage="MM/dd/yyyy" onkeydown="keyDown(this, event)">
                </DateInput>
            </telerik:RadDatePicker>
        </ItemTemplate>
    </telerik:GridTemplateColumn>

    I hope this would be helpful to you.

    Regards,
    Viktor Tachev
    Telerik
    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 the blog feed now.
  6. shubhangi
    shubhangi avatar
    19 posts
    Member since:
    Aug 2015

    Posted 26 Aug 2015 Link to this post

    Hi, Want to disable past date and time (less than current date and time) on Rad datetime picker calendar control
  7. shubhangi
    shubhangi avatar
    19 posts
    Member since:
    Aug 2015

    Posted 26 Aug 2015 in reply to shubhangi Link to this post

    can anyone help me in to this
  8. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 28 Aug 2015 Link to this post

    Hello,

    In order to set MinDate of RadDatePicker to the current date you can use the following approach:

    Markup:

    <telerik:RadDatePicker runat="server" ID="RadDatePicker1" OnLoad="RadDatePicker1_Load"></telerik:RadDatePicker>

    Code-behind:

    protected void RadDatePicker1_Load(object sender, EventArgs e)
    {
        (sender as RadDatePicker).MinDate = DateTime.Today;
    }


    On a side note, please open a new support ticket for each unrelated case you need help with, because this will keep each thread more concise and easy to follow.

    Regards,
    Viktor Tachev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017