RadDatePicker and Mouse Wheel

[Robin Lilly]

Is there a way to turn off the Mouse Wheel Incrementation in the RadDatePicker similar to the property IncrementSettings-InterceptMouseWheel="False" in the RadNumericTextbox for a RadGrid and FormView?

I have not been able to find any docmentation that shows this.

Thanks, Robin

[Dimo]

Hello Robin,

Yes, there is a way. The datepicker's textbox is a RadDateInput control, which has the same increment settings as a RadNumericTextBox:

<telerik:RadDatePicker>
    <DateInput>
        <IncrementSettings InterceptMouseWheel="false" />
    </DateInput>
</telerik:RadDatePicker>


Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Raam Nandan]

Hi,

I have RadDatePicker in Rad Grid in which iam Showing Only Month and Year as Display Format. But When i Click on the Calender Icon, the Popup window is Showing in Different locations in the Page instead of Showing below the Input Box. Anybody have the Suggestion please?

[Dimo]

Hi Raam,

I am afraid the provided information is not sufficient for us to guess what causes the problem. Please provide a runnable web page (a live URL will do as well), which reproduces the issue. Thanks.

All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Raam Nandan]

Hi,

I have RadDatePicker in Rad Grid in which iam Showing Only Month and Year as Display Format. But When i Click on the Calender Icon, the Popup window is Showing in Different locations in the Page instead of Showing below the Input Box. Anybody have the Suggestion please?

Here Iam Giving My Code With javaScript Function.

<

 

script type="text/javascript">

 

 

//override the onload event handler to change the picker after the page is loaded

 

 

function SetCalendarTable(sender, eventArgs) {

 

 

var calendar = sender;

 

 

var picker = $find(calendar.get_id().replace("_calendar", ""));

 

 

 

var fastNavigation = calendar._getFastNavigation();

 

$clearHandlers(picker.get_popupButton());

$addHandler(picker.get_popupButton(),

"click", function() {

 

 

//debugger;

 

 

var textbox = picker.get_textBox();

 

 

//adjust where to show the popup table

 

 

var x, y;

 

 

var adjustElement = textbox;

 

 

if (textbox.style.display == "none")

 

adjustElement = picker.get_popupImage();

 

var pos = picker.getElementPosition(adjustElement);

 

x = pos.x;

y = pos.y + adjustElement.offsetHeight;

 

var e = {

 

clientX: x,

clientY: y

};

x = 0;

y = 0;

 

//synchronize the input date if set with the picker one

 

 

var date = picker.get_selectedDate();

 

 

if (date) {

 

calendar.FocusedDate[0] = date.getFullYear();

calendar.FocusedDate[1] = date.getMonth() + 1;

}

$get(calendar._titleID).onclick(e);

});

fastNavigation.OnOK =

 

function() {

 

 

var date = new Date(fastNavigation.Year, fastNavigation.Month, 1);

 

picker.get_dateInput().set_selectedDate(date);

fastNavigation.Popup.Hide();

}

fastNavigation.OnToday =

 

function() {

 

 

var date = new Date();

 

picker.get_dateInput().set_selectedDate(date);

fastNavigation.Popup.Hide();

}

}

 

</script>

ASPX CODE:

 

<

 

columns>

 

 

<telerik:GridButtonColumn ConfirmText="Delete This Record?" ButtonType="ImageButton"

 

 

ImageUrl="../Images/Icons/Delete.gif" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">

 

 

<HeaderStyle Width="20px" />

 

 

<ItemStyle HorizontalAlign="Left" VerticalAlign="Top" />

 

 

</telerik:GridButtonColumn>

 

 

 

<telerik:GridTemplateColumn UniqueName="StartDate" HeaderText="Start Date" DataField="StrMth" >

 

 

 

<ItemTemplate>

 

 

<asp:Label runat="server" ID="lblStartDate" align="Left" Font-Bold="True" Text='<%# Eval("StrMth") %>' Width="5px"></asp:Label>

 

 

</ItemTemplate>

 

 

 

<EditItemTemplate>

 

 

 

 

<Telerik:RadDatePicker ID="rdpStartDate" runat="server" Width="155Px" CausesValidation="False" >

 

 

<DateInput ID="DateInput1" runat="server" DisplayDateFormat="MMyyyy">

 

 

</DateInput>

 

 

<Calendar ID="Calendar1" runat="server">

 

 

<ClientEvents OnLoad="SetCalendarTable" />

 

 

</Calendar>

 

 

</Telerik:RadDatePicker>

 

 

<span style="color: Red">*</span>

 

 

<asp:RequiredFieldValidator ID="rfvStartDate" ControlToValidate="rdpStartDate" ErrorMessage="This field is required" runat="server"></asp:RequiredFieldValidator>

 

 

</EditItemTemplate>

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

<telerik:GridTemplateColumn UniqueName="EndDate" HeaderText="End Date" DataField="EndMth">

 

 

<ItemTemplate>

 

 

<asp:Label runat="server" ID="lblEndDate" align="Left" Font-Bold="True" Text='<%# Eval("EndMth") %>'></asp:Label>

 

 

</ItemTemplate>

 

 

 

<EditItemTemplate>

 

 

<telerik:RadDatePicker ID="rdpEndDate" runat="server" Width="155px" AutoPostBack="true" >

 

 

<DateInput ID="DateInput1" runat="server" DisplayDateFormat="MMyyyy" >

 

 

</DateInput>

 

 

<Calendar ID="Calendar1" runat="server">

 

 

<ClientEvents OnLoad="SetCalendarTable" />

 

 

</Calendar>

 

 

</telerik:RadDatePicker>

 

 

 

<span style="color: Red">*</span>

 

 

<asp:RequiredFieldValidator ID="rfvEndDate" ControlToValidate="rdpEndDate" ErrorMessage="This field is required" runat="server"></asp:RequiredFieldValidator>

 

 

 

 

</EditItemTemplate>

 

 

 

 

</telerik:GridTemplateColumn>

 

[Raam Nandan]

Hi Dimo,

I have RadDatePicker in Rad Grid in which iam Showing Only Month and Year as Display Format. But When i Click on the Calender Icon, the Popup window is Showing in Different locations in the Page instead of Showing below the Input Box. Anybody have the Suggestion please? Here Iam giving My Code With javaScript Function,

<

 

telerik:RadGrid ID="ApplicationDetails" runat="server" AutoGenerateColumns="false"

 

 

Skin="Web20" ShowFooter="true" GridLines="None">

 

 

 

 

<

 

HeaderContextMenu Skin="Web20" EnableTheming="True">

 

<

 

CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

 

</

 

HeaderContextMenu>

 

 

<

 

PagerStyle Mode="NextPrevNumericAndAdvanced"></PagerStyle>

 

 

<MasterTableView DataKeyNames="" EditFormSettings-EditColumn-CancelImageUrl="../../images/Icons/Cancel.gif" CommandItemDisplay="Top" Name="ApplicationDetails"

 

 

EditMode="EditForms" >

 

 

 

<RowIndicatorColumn Visible="False">

 

 

<HeaderStyle Width="20px"></HeaderStyle>

 

 

</RowIndicatorColumn>

 

 

 

<ExpandCollapseColumn Visible="False" Resizable="False">

 

 

<HeaderStyle Width="20px"></HeaderStyle>

 

 

</ExpandCollapseColumn>

 

 

 

 

 

<CommandItemStyle HorizontalAlign="Left"></CommandItemStyle>

 

 

 

<CommandItemTemplate>

 

 

<asp:LinkButton ID="LinkButton1" runat="server" CommandName="InitInsert" Visible='<%# Not ApplicationDetails.MasterTableView.IsItemInserted%>'><img style="border:0px" alt="" src="../Images/Icons/Insert.gif" width="16" height="16" /><strong>Add New</strong></asp:LinkButton>

 

 

</CommandItemTemplate>

 

 

 

 

 

<columns>

 

 

<telerik:GridButtonColumn ConfirmText="Delete This Record?" ButtonType="ImageButton"

 

 

ImageUrl="../Images/Icons/Delete.gif" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">

 

 

<HeaderStyle Width="20px" />

 

 

<ItemStyle HorizontalAlign="Left" VerticalAlign="Top" />

 

 

</telerik:GridButtonColumn>

 

 

 

<telerik:GridTemplateColumn UniqueName="StartDate" HeaderText="Start Date" DataField="StrMth" >

 

 

 

<ItemTemplate>

 

 

<asp:Label runat="server" ID="lblStartDate" align="Left" Font-Bold="True" Text='<%# Eval("StrMth") %>' Width="5px"></asp:Label>

 

 

</ItemTemplate>

 

 

 

<EditItemTemplate>

 

 

 

 

<Telerik:RadDatePicker ID="rdpStartDate" runat="server" Width="155Px" CausesValidation="False" >

 

 

<DateInput ID="DateInput1" runat="server" DisplayDateFormat="MMyyyy">

 

 

</DateInput>

 

 

<Calendar ID="Calendar1" runat="server">

 

 

<ClientEvents OnLoad="SetCalendarTable" />

 

 

</Calendar>

 

 

</Telerik:RadDatePicker>

 

 

<span style="color: Red">*</span>

 

 

<asp:RequiredFieldValidator ID="rfvStartDate" ControlToValidate="rdpStartDate" ErrorMessage="This field is required" runat="server"></asp:RequiredFieldValidator>

 

 

</EditItemTemplate>

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

<telerik:GridTemplateColumn UniqueName="EndDate" HeaderText="End Date" DataField="EndMth">

 

 

<ItemTemplate>

 

 

<asp:Label runat="server" ID="lblEndDate" align="Left" Font-Bold="True" Text='<%# Eval("EndMth") %>'></asp:Label>

 

 

</ItemTemplate>

 

 

 

<EditItemTemplate>

 

 

<telerik:RadDatePicker ID="rdpEndDate" runat="server" Width="155px" AutoPostBack="true" >

 

 

<DateInput ID="DateInput1" runat="server" DisplayDateFormat="MMyyyy" >

 

 

</DateInput>

 

 

<Calendar ID="Calendar1" runat="server">

 

 

<ClientEvents OnLoad="SetCalendarTable" />

 

 

</Calendar>

 

 

</telerik:RadDatePicker>

 

 

<span style="color: Red">*</span>

 

 

<asp:RequiredFieldValidator ID="rfvEndDate" ControlToValidate="rdpEndDate" ErrorMessage="This field is required" runat="server"></asp:RequiredFieldValidator>

 

 

 

 

</EditItemTemplate>

 

 

 

 

</telerik:GridTemplateColumn>

 

</Columns>
</Telerik:RadGrid>

JavaScript Function :

<

 

script type="text/javascript">

 

 

//override the onload event handler to change the picker after the page is loaded

 

 

function SetCalendarTable(sender, eventArgs) {

 

 

var calendar = sender;

 

 

var picker = $find(calendar.get_id().replace("_calendar", ""));

 

 

 

var fastNavigation = calendar._getFastNavigation();

 

$clearHandlers(picker.get_popupButton());

$addHandler(picker.get_popupButton(),

"click", function() {

 

 

//debugger;

 

 

var textbox = picker.get_textBox();

 

 

//adjust where to show the popup table

 

 

var x, y;

 

 

var adjustElement = textbox;

 

 

if (textbox.style.display == "none")

 

adjustElement = picker.get_popupImage();

 

var pos = picker.getElementPosition(adjustElement);

 

x = pos.x;

y = pos.y + adjustElement.offsetHeight;

 

var e = {

 

clientX: x,

clientY: y

};

x = 0;

y = 0;

 

//synchronize the input date if set with the picker one

 

 

var date = picker.get_selectedDate();

 

 

if (date) {

 

calendar.FocusedDate[0] = date.getFullYear();

calendar.FocusedDate[1] = date.getMonth() + 1;

}

$get(calendar._titleID).onclick(e);

});

fastNavigation.OnOK =

 

function() {

 

 

var date = new Date(fastNavigation.Year, fastNavigation.Month, 1);

 

picker.get_dateInput().set_selectedDate(date);

fastNavigation.Popup.Hide();

}

fastNavigation.OnToday =

 

function() {

 

 

var date = new Date();

 

picker.get_dateInput().set_selectedDate(date);

fastNavigation.Popup.Hide();

}

}

 

</script>

 

[Dimo]

Hello Raam,

The problem is probably caused by the fact that the web page scroll offset is not taken into consideration. Please make the following 2 changes in the Javascript:


    $addHandler(picker.get_popupButton(), "click", function()
    {
        var textbox = picker.get_textBox();
        var x, y;
        var adjustElement = textbox;
        if (textbox.style.display == "none")
            adjustElement = picker.get_popupImage();

        var pos = picker.getElementPosition(adjustElement);
        x = pos.x;
        y = pos.y + adjustElement.offsetHeight;
        var e = {
            clientX: x,
            clientY: y - document.documentElement.scrollTop
        };
        x = 0;
        y = 0;

        var date = picker.get_selectedDate();
        if (date)
        {
            calendar.FocusedDate[0] = date.getFullYear();
            calendar.FocusedDate[1] = date.getMonth() + 1;
        }
        $get(calendar._titleID).onclick(e);
        return false;

    });

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Raam Nandan]

Thanks a lot it Worked. Now my DatePicker Popup window is displaying Just below the Text Box.