Getting RadDatePicker to handle Multiple Dates

[Boone]

I've heard that the RadDatePicker does not support multiple dates. I need a workaround that doesn't involve having a big calendar on my screen. What are the work around for this lack of functionality??

[Dimo]

Hi Boone,

I can suggest you to use a simple image/push button and a standalone RadCalendar instance, which will be initially rendered in a container with a display:none CSS style.

When the button is clicked, the RadCalendar's container will be made visible and positioned absolutely next to the button. You can use the $telerik.getLocation( DOM element ) method to find out the position of the button and set the result as correct top and left styles to the RadCalendar's container.

More information about the getLocation method is available at
http://www.telerik.com/help/aspnet-ajax/telerik-static-client-library.html

Regards,
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.

[Guruprasath]

we are using new telerik version (Q3 2013). we have a problem in getElementPosition and getLocation property in raddatetimepicker pop up location.

i have attached clientside script for you information

please do need full


<telerik:GridTemplateColumn>
                            <HeaderTemplate>
                                QC Deadline
                            </HeaderTemplate>
                            <HeaderStyle Width="155px" HorizontalAlign="Left" />
                            <ItemTemplate>
                                <telerik:RadTextBox ID="dttQCDeadlineTime" Width="100px" CssClass="radEnabledCss_Default"
                                    runat="server" Text='<%# Eval("ExpectedCompletionTimeQC") %>' Font-Size="9px">
                                </telerik:RadTextBox>
                                <asp:Image ID="QCpopupDate" runat="server" ImageUrl="~/Resources/Images/icon_calendar.png"
                                    AlternateText="Click to open Calendar popup" ImageAlign="Middle" />
                                <asp:Image ID="QCpopupTime" runat="server" ImageUrl="~/Resources/Images/icon_time.png"
                                    AlternateText="Click to open Time Picker" ImageAlign="Middle" />
                            </ItemTemplate>
                            <ItemStyle VerticalAlign="Middle" HorizontalAlign="Left" />
                        </telerik:GridTemplateColumn>

.cs page
--- ------

 Image QCpopupDate = (Image)e.Item.FindControl("QCpopupDate");
            Image QCpopupTime = (Image)e.Item.FindControl("QCpopupTime");
            QCpopupDate.Attributes.Add("onclick", " return showQCDeadlinePopup(this," + e.Item.ItemIndex.ToString() + ");");
            QCpopupTime.Attributes.Add("onclick", " return showQCDeadlineTimePopup(this," + e.Item.ItemIndex.ToString() + ");");







function showQCDeadlinePopup(sender, rowPos) {
                debugger;

                if (QC_ShoppingStatus(rowPos) == false) {
                    return false;
                }

                //this is a reference to the texbox which raised the event
                //see the methods exposed through the $telerik static client library here - http://www.telerik.com/help/aspnet-ajax/telerik-static-client-library.html
                currentTextBox = sender.tagName == "INPUT" ? sender : $telerik.getPreviousHtmlNode(sender);
                //This line is added to find the hidden text box in the rad text box
                currentHiddenTextBox = currentTextBox.getElementsByTagName("input")[1];
                currentTextBox = currentTextBox.getElementsByTagName("input")[0];
                //.tagName == "INPUT" ? sender : $telerik.getPreviousHtmlNode(sender);
                //this gets a reference to the datepicker, which will be shown, to facilitate
                //the selection of a date
                var datePicker = $find("<%= RadDateTimePicker1.ClientID %>");
                //this variable is used to store a reference to the date picker, which is currently 
                //active
                currentDatePicker = datePicker;
                //this method first parses the date, that the user entered or selected, and then
                //sets it as a selected date to the picker
                datePicker.set_selectedDate(currentDatePicker.get_dateInput().parseDate(currentTextBox.value));
                //the code lines below show the calendar, which is used to select a date. The showPopup
                //function takes three arguments - the x and y coordinates where to show the calendar, as 
                //well as its height, derived from the offsetHeight property of the textbox

                var position = datePicker.getElementPosition(currentTextBox);
                datePicker.showPopup(position.x, position.y + currentTextBox.offsetHeight);
                return false;
            }


we have a one RadDateTimePicker globally and two images called QCpopupDate, QCpopupTime. when we click image using java script we show the date and time pop up

[Guruprasath]

error through Object doesn't support property or method 'getElementPosition' or Object doesn't support property or method 'getLocation'

[Shinu]

Hi Guruprasath,

As a work around please try the following JavaScript to get the position of the TextBox of RadDateTimePicker.

JavaScript:

<script type="text/javascript">
    function pageLoad() {
        var TimePicker = $find("<%=RadDateTimePicker.ClientID %>");
        var textBox = TimePicker.get_textBox();
        var position = getPosition(textBox);
        alert("Text box is located at: " + position.x + ", " + position.y);
    }
    function getPosition(element) {
        var xPosition = 0;
        var yPosition = 0;
        while (element) {
            xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
            yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
            element = element.offsetParent;
        }
        return { x: xPosition, y: yPosition };
    }
</script>

Thanks,
Shinu.