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

How to hide RadDatePicker popup on tab out of radgrid?

6 Answers 147 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Harshit
Top achievements
Rank 1
Harshit asked on 21 Sep 2011, 08:57 PM
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?

6 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 22 Sep 2011, 06:53 AM
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
0
Nancy
Top achievements
Rank 1
answered on 13 Nov 2013, 12:33 AM
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.
       

0
Viktor Tachev
Telerik team
answered on 15 Nov 2013, 05:06 PM
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.
0
shubhangi
Top achievements
Rank 1
answered on 26 Aug 2015, 12:29 PM
Hi, Want to disable past date and time (less than current date and time) on Rad datetime picker calendar control
0
shubhangi
Top achievements
Rank 1
answered on 26 Aug 2015, 12:31 PM
can anyone help me in to this
0
Viktor Tachev
Telerik team
answered on 28 Aug 2015, 12:29 PM
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
Tags
Calendar
Asked by
Harshit
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Nancy
Top achievements
Rank 1
Viktor Tachev
Telerik team
shubhangi
Top achievements
Rank 1
Share this question
or