RadDatePicker: Showing calendar has ugly line

[Myo]

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.

[Princy]

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.

[Myo]

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

[Viktor Tachev]

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

[Myo]

Dear Viktor Tachev,

It is working fine now. Thanks for your help.

Thanks & Best Regards
HAN