How to hide RadDatePicker popup on tab out of radgrid?

[Harshit]

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?

[Jayesh Goyani]

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

[Nancy]

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.
       

[Viktor Tachev]

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

[shubhangi]

Hi, Want to disable past date and time (less than current date and time) on Rad datetime picker calendar control

[shubhangi]

can anyone help me in to this

[Viktor Tachev]

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