RadDateTimePicker client object getElementPosition

4 posts, 1 answers
  1. Myo
    Myo avatar
    24 posts
    Member since:
    Nov 2013

    Posted 20 Feb 2014 Link to this post

    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




  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Feb 2014 in reply to Myo Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Myo
    Myo avatar
    24 posts
    Member since:
    Nov 2013

    Posted 21 Feb 2014 in reply to Shinu Link to this post

    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?
     
  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 25 Feb 2014 Link to this post

    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.
Back to Top