RadDatePicker: Showing calendar has ugly line

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

    Posted 21 Feb 2014 Link to this post

    Hi All,

    After I upgrade the client api method getElementPosition() to getLocation(), my calendar show cross line in my calendar. Is there anyone can give me some suggestion to remove this line? I have attached my file below.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

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

    Hi,

    Such an issue is not expected. Please take a look into the sample code which works fine at my end. The information provided is not enough to replicate the issue. Please provide your full code with CSS.

    ASPX:
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
    </telerik:RadDatePicker>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Myo
    Myo avatar
    24 posts
    Member since:
    Nov 2013

    Posted 22 Feb 2014 in reply to Princy Link to this post

    Hi Princy,

    Below is the code I have developed.


    <div class="divMain">
            Holidays & Events
            <div class="divContent">
                <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>

            </div>
            <div class="divbtmBtn">
                <input type="button" id="btnaddnewrow" value="ADD" />
                <input type="button" id="btnSave" value="SAVE" />
                <input type="button" id="btnCancel" value="CANCEL" />
            </div>
        </div>
    )

    In script
    (
    <Telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript" id="calender">
                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);
                    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;
                    }
                }

            </script>
        </telerik:RadCodeBlock>
    )

    Thanks
  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 25 Feb 2014 Link to this post

    Hi,

    I tried replicating the behavior you describe, however I was unable to. I am attaching a sample project I used for testing. I used the code provided in your post, the RadGrid is bound to a dummy data source as illustration.

    On a side note, the approach you are implementing seems rather strange. Why do you need a TextBox and an Image controls in the ItemTemplate of a template column and use them to open a calendar popup when they are clicked? The RadDatePicker provides this functionality out of the box and there is no additional code needed. You could also change its popup image by specifying the DatePopupButton-ImageUrl property. The markup for the GridTemplateColumn could look similar to the one below:

    <telerik:GridTemplateColumn HeaderText="HolidayDate" UniqueName="HolidayDate" SortExpression="HolidayDate">
        <ItemTemplate>
     
            <telerik:RadDatePicker ID="RadDatePicker1" DateInput-DateFormat="dd/MM/yyyy"
                SelectedDate='<%# Eval("HolidayDate") %>' MinDate="01/01/1900" MaxDate="12/31/2100" runat="server"
                ShowPopupOnFocus="true" DatePopupButton-ImageUrl="../Contents/Images/datePickerPopup.gif">
                <ClientEvents OnDateSelected="dateSelected" />
            </telerik:RadDatePicker>
     
        </ItemTemplate>
        <HeaderStyle Width="30%" />
    </telerik:GridTemplateColumn>

    Check out the sample project that is attached. It seems to be working as expected on my side. Let me know if this approach is working for you.

    Regards,
    Viktor Tachev
    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.
  6. Myo
    Myo avatar
    24 posts
    Member since:
    Nov 2013

    Posted 25 Feb 2014 in reply to Viktor Tachev Link to this post

    Dear Viktor Tachev,

    It is working fine now. Thanks for your help.

    Thanks & Best Regards
    HAN
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017