RadDateTimePicker client object getElementPosition

[Myo]

Hi,

I using getElementPosition() method of RadTimePicker client side api. After I update version to (2013.1.220.45 ) I get an error showing that  method does not exist for the object object. Then I tried to use getLocation() method but errors still the same. Can anybody help me how to solve that errors?

In ASPX
(
 <telerik:RadDatePicker ID="RadDatePicker1" DateInput-DateFormat="dd/MM/yyyy" Style="display: none;" MinDate="01/01/1900" MaxDate="12/31/2100" runat="server">
                <ClientEvents OnDateSelected="dateSelected" />
            </telerik:RadDatePicker>
            <telerik:RadGrid ID="grdHoliday" EnableViewState="true" runat="server" OnNeedDataSource="grdHoliday_NeedDataSource">
                <MasterTableView AutoGenerateColumns="False" DataKeyNames="HolidayKey" ClientDataKeyNames="HolidayKey">
                    <Columns>
                        <telerik:GridBoundColumn  DataField="HolidayKey" Display="false" ></telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn HeaderText="Holiday" UniqueName="Holiday1" SortExpression="Holiday1">
                            <ItemTemplate>
                                <asp:TextBox ID="txtHoliday" Width="100%" runat="server" Text='<%#DataBinder.Eval(Container, "DataItem.Holiday1")%>'></asp:TextBox>
                            </ItemTemplate>
                            <HeaderStyle Width="70%" />
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn HeaderText="HolidayDate" UniqueName="HolidayDate" SortExpression="HolidayDate">
                            <ItemTemplate>
                                <asp:TextBox ID="TextBox1" Width="100px" Text='<%# Eval("HolidayDate", "{0:dd/MM/yyyy}") %>'  runat="server"
                                             onclick="showPopup(this, event);" onfocus="showPopup(this, event);" onblur="parseDate(this, event)">
                                </asp:TextBox>
                                <asp:Image ID="popupImage" runat="server" ImageUrl="../Contents/Images/datePickerPopup.gif" 
                                           AlternateText="Click to open Calendar popup" onclick="showPopup(this, event)" />
                            </ItemTemplate>
                            <HeaderStyle Width="30%" />
                        </telerik:GridTemplateColumn>
                    </Columns>
                    <CommandItemStyle />
                </MasterTableView>
                <ClientSettings>
                    <Selecting AllowRowSelect="true" />
                    <Scrolling AllowScroll="True" UseStaticHeaders="True"   ScrollHeight="450px"
                               SaveScrollPosition="true" FrozenColumnsCount="1" >
                    </Scrolling>
                </ClientSettings>
            </telerik:RadGrid>
)

In Script
(
  var currentTextBox = null;
            var currentDatePicker = null;

            function showPopup(sender, e) {
                currentTextBox = sender.tagName == "INPUT" ? sender : $telerik.getPreviousHtmlNode(sender);
                var datePicker = $find("<%= RadDatePicker1.ClientID %>");
                currentDatePicker = datePicker;
                datePicker.set_selectedDate(currentDatePicker.get_dateInput().parseDate(currentTextBox.value));
                //var position = datePicker.getElementPosition(currentTextBox);
                var position = datePicker.getLocation(currentTextBox);
                datePicker.showPopup(position.x, position.y + currentTextBox.offsetHeight);
            }
            function dateSelected(sender, args) {
                if (currentTextBox != null) {
                    currentTextBox.value = args.get_newValue();
                    TextBoxChanged(currentTextBox);
                }
            }
            function parseDate(sender, e) {
                if (currentDatePicker != null) {
                    var date = currentDatePicker.get_dateInput().parseDate(sender.value);
                    var dateInput = currentDatePicker.get_dateInput();

                    if (date == null) {
                        date = currentDatePicker.get_selectedDate();
                    }
                    var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());
                    sender.value = formattedDate;
                }
            }
)

Thanks & Best Regards
HAN

[Shinu]

Hi,

As a work around please try the following JavaScript to get the position of the textbox in RadDatePicker.

JavaScript:

<script type="text/javascript">
    function pageLoad() {
        var myElement = $find("<%=RadDatePicker1.ClientID %>");
        var textBox = myElement.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.

[Myo]

Thanks Shinu,

But now I got another problems as showing in attachement file. One line is displaying in canlandar ? Could you give me some suggestion how to remove it?
 

[Konstantin Dikov]

Hi Myo,

Using your code and the Shinu's suggestion I have tested the code bellow on my end and everything is working as expected on my end. Please give this a try and see what differs in your project:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var currentTextBox = null;
        var currentDatePicker = null;

        function showPopup(sender, e) {
            currentTextBox = sender.tagName == "INPUT" ? sender : $telerik.getPreviousHtmlNode(sender);
            var datePicker = $find("<%= RadDatePicker1.ClientID %>");
            currentDatePicker = datePicker;
            datePicker.set_selectedDate(currentDatePicker.get_dateInput().parseDate(currentTextBox.value));
            //var position = datePicker.getElementPosition(currentTextBox);
            var position = getPosition(sender);
            datePicker.showPopup(position.x + 200, position.y + currentTextBox.offsetHeight);
        }
        function dateSelected(sender, args) {
            if (currentTextBox != null) {
                currentTextBox.value = args.get_newValue();
                TextBoxChanged(currentTextBox);
            }
        }
        function parseDate(sender, e) {
            if (currentDatePicker != null) {
                var date = currentDatePicker.get_dateInput().parseDate(sender.value);
                var dateInput = currentDatePicker.get_dateInput();

                if (date == null) {
                    date = currentDatePicker.get_selectedDate();
                }
                var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());
                sender.value = formattedDate;
            }
        }

        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>
</telerik:RadCodeBlock>

<telerik:RadDatePicker ID="RadDatePicker1" DateInput-DateFormat="dd/MM/yyyy" Style="display: none;" MinDate="01/01/1900" MaxDate="12/31/2100" runat="server"></telerik:RadDatePicker>
<asp:Image ID="popupImage" runat="server" ImageUrl="../Contents/Images/datePickerPopup.gif"
    AlternateText="Click to open Calendar popup" onclick="showPopup(this, event)" />

Regards,
Konstantin Dikov
Telerik