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

RadDateTimePicker client object getElementPosition

3 Answers 53 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Myo
Top achievements
Rank 1
Myo asked on 21 Feb 2014, 03:30 AM
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




3 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 1
answered on 21 Feb 2014, 05:42 AM
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.
0
Myo
Top achievements
Rank 1
answered on 21 Feb 2014, 06:19 AM
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?
 
0
Konstantin Dikov
Telerik team
answered on 25 Feb 2014, 03:39 PM
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
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 UI for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Calendar
Asked by
Myo
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Myo
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or