Hi Folks
The fact that this WebDatePicker control is clearing styles is literally killing mountains of time trying to format what would have been extremely simple formatting (basically NO formatting). Trying to get this control to line-up horizontally with validators is a technical HTML nightmare. You get them lined up and calendars don't stay popped up. You get the pop-ups to work and validators make the HTML look like scrambled eggs.
Three questions:
1. Is there anyway to negate/remove/override the default behavior in this control in regards to styling. I need to have it work simply like the default calendar in vanilla ASP.NET or other vendor date/calendar control. Let's say Peter Blums, because this is what the company has been using for the last 6 years.
2. For the life of me, clearing these styles, so I can get alignment proper horizontal alignment is a total nightmare. In my example below, getting these to align with div tags works, but the calendar staying popped up is sporadic and is disfunctional. This is a common scenario, having date ranges throughout all of our applications.
3. Will you create a "101" example, showing how you'd create 2 webdatepicker columns with label text AND normal 101 validators that looks intelligent in terms of display, works as a normal validator and keeps pop-ups staying popped up.
<asp:Panel ID="pnlAddEditLicenseTerm" runat="server" Visible="false"> <table style="width: 100%;"> <tr> <td width="15%" style="text-align: right"> </td> <td width="85%"> <i>Enter the effective dates for the renewal period for this license.</i> </td> </tr> <tr> <td style="text-align: right" width="15%"> Begin Effective Date: </td> <td width="85%"> <div id="Div4"> <div style="float: left"> <ig:WebDatePicker ID="dtbLicenseBeginDate" runat="server"> <Buttons> <CustomButton ImageUrl="~/images/icon-calendar.gif" /> </Buttons> </ig:WebDatePicker> <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="dtbLicenseBeginDate" Display="Dynamic" ForeColor="Red" ErrorMessage="Required" SetFocusOnError="True" ValidationGroup="LT"></asp:RequiredFieldValidator> </div> <div style="float: left"> <table style="width: 100%;"> <tr> <td width="65%" style="text-align: left"> * Expiration Date: </td> <td width="35%"> <ig:WebDatePicker ID="dtbLicenseExpirationDate" runat="server"> <Buttons> <CustomButton ImageUrl="~/images/icon-calendar.gif" /> </Buttons> </ig:WebDatePicker> <asp:CompareValidator ID="valdtbLicenseExpirationDate" runat="server" ControlToValidate="dtbLicenseExpirationDate" Display="Dynamic" Type="Date" ForeColor="Red" ErrorMessage="Expiration Date is not a valid date. Date must be in the format MM/DD/YYYY." Operator="DataTypeCheck" SetFocusOnError="True" ValidationGroup="LT"> </asp:CompareValidator> <asp:CompareValidator ID="valEndAfterStartLcBeginExpire" runat="server" ControlToCompare="dtbLicenseBeginDate" ControlToValidate="dtbLicenseExpirationDate" Display="Dynamic" ForeColor="Red" ErrorMessage="Expiration Date can not be before Begin Date." Operator="GreaterThanEqual" Type="Date" SetFocusOnError="True" ValidationGroup="LT"> </asp:CompareValidator> </td> </tr> </table> </div> <%--<div style="clear: left"> </div>--%> </td> </tr> </table> <%--<div style="clear: left"> </div>--%> </asp:Panel>
I've been consistently less than happy with both the response timing and the resulting recommendations and I'm starting to post these questions on other ASP.NET forums now as well.
rob
just emailed to case CAS-76765-T0VM7J with example screenshots of the orientation miscalculation.
also, is there any means to "clear" the default behavior of the WebDatePicker to NOT use any TABLE html element (display:block).
like I said, we have dozens of spots in our applications where stacking date ranges horizontally with labels and validators is common place. this is also going to reduce our testing cycle, because now, they actually have to test different validator scenarios to understand what's going to render.
thanks
Hi Rob,
The rendering of WebDatePicker is based on TABLE html element, which has display:block. It means that flow-inline layout of browser (elements like INPUT, IMG, SPAN, BUTTON) is not supported. WebDatePicker will appear on new line and any element after it will appear on new line too.
If application needs to show element on "one line", then it may use <table> with one tr and 2 tds, or it may use position:absolute.
In order to help you with issues related to location of drop-down calendar, we need a simple sample with steps to reproduce (bug report).
Problems with location are possible. It seems to me they may happen in complex layouts and if containers have center or right alignments, or some attributes with value of "auto".
also this type of functionality for pop-orientation (explicitly tell the control to open vertically and above) appears to be in other controls like the drop-down.
can i ask this to be a feature in the webdatepicker?
hi Viktor
we definitely have a location calculation problem.
the two webdate pickers are about 30px off of the bottom of the form (with obviously less space than what the calendar needs to display), so rather that put the calendars on top (where there's plenty of form space), the calculation throws them below what's displayable on the form and a vertical scrollbar appears on the right. this would drive me nuts having 2 webdatepickers popping up where I couldn't see them in their entirety and having to scroll down to pick a calendar date twice in this case. will send you a screenshot.
next, can you demonstrate what it takes to take this control (in an HTML table) and other controls to line-up horizontally. for instance (and in brief)
<tr>
label1, webdatepicker, label2, validator
<tr/>
there is something in a good deal of the infragistics control which is doing something with styles which makes the output "go all over the map"
1.every control AFTER the first webdatepicker wants to STACK vertically
2. the validator (when fired) appears UNDER the webdatepicker (where in the designer it appears as though it's going to appears horizontally to the right)
3. we have to create a floating div, clear styles and do all kinds of "nonsense" to get things to line up horizontally. this is a huge time killer. especially coming out of either a vanilla asp.net date control or peter blums date package. (there's no monkey business with doing div tags and things with either one of these controls, they simple appear as given in the designer.) this is a HUGE time killing problems since we have 100's of forms to convert over to the webdatepicker (and off of PB's Date Package).
Thanks
Rob
I copied your codes into aspx of a website and tested them. To see content of panel pnlAddEditLicenseTerm, I removed Visible=false and removed custom images for buttons of datepicker.
I did not find any problems with drop-down calendars and there locations or styling.
Since you mentioned WebTab, I also created a WebTab with small height, copied your codes into content of tab item and tested that too. I did not find any problems.
Note: WebDatePicker and its drop-down calendar supports overrides for any css classes. It can be done globally for all controls by changing attributes in ig_texteditor.css and ig_monthcalendar.css used by application (at the ig_res/default/*.* or similar location). Application also can modify css for any specific instance of control using XxxCss properties of WebDatePicker and WebMonthCalendar.
If application has problems with getting reference to shared calendar, then it may add to application WebMonthCalendar, modify its properties and set DropDownCalendarID of WebDatePicker(s) to the ID of that calendar.
Below codes will search for shared calendar and modify one of its css.
aspx:
<head runat="server"> ... <style type="text/css"> .redBackground{background-color:red} </style></head>
aspx.cs:
protected void Page_Load(object sender, EventArgs e){ Infragistics.Web.UI.EditorControls.WebDatePicker.EnsureSharedCalendar(this); Infragistics.Web.UI.EditorControls.WebMonthCalendar calendar = null; // find reference to date picker within your form or template // line below assumes dtbLicenseBeginDate located in form in visible container Infragistics.Web.UI.EditorControls.WebDatePicker datePicker = this.dtbLicenseBeginDate; if(datePicker != null) calendar = this.WebDatePicker1.FindSharedCalendar(); // if datePicker was not found, then use ID of shared calendar if(calendar == null) calendar = this.Form.FindControl("_ig_def_dp_cal") as Infragistics.Web.UI.EditorControls.WebMonthCalendar; if(calendar != null) { calendar.CssClasses.DayCssClass = "redBackground"; }}
WebDatePicker does not support custom location of drop-down calendar. The location of calendar (below or above editor) is calculated internally using instant location of datepicker relative to bounds of browser. Calendar should appear within visible area of browser including possible shift to the left if datepicker is located at right side of browser. If it fails, then we need a bug report with simple sample and steps to reproduce: http://ko.infragistics.com/support/ask-for-help.aspx
However, it is also possible to adjust location of drop-down calendar dynamically on client. But that is possible only if slide animations are disabled. Otherwise, custom codes will have no effect of destroy drop-down.
Below is example based on your codes:
<script type="text/javascript">function WebDatePicker1_CalendarOpened(sender, eventArgs){ var calendar = sender.get_calendar(); var elem = calendar.get_element(); //elem.style.border = '3px solid red'; var oldTop = parseInt(elem.style.marginTop, 10); if (isNaN(oldTop)) oldTop = 0; elem.style.marginTop = (oldTop + 20) + 'px';}</script>
<ig:WebDatePicker ID="dtbLicenseBeginDate" runat="server"> <Buttons> <CustomButton ImageUrl="~/images/icon-calendar.gif" /> </Buttons> <CalendarAnimation SlideCloseDuration="0" SlideOpenDuration="0" /> <ClientSideEvents CalendarOpened="WebDatePicker1_CalendarOpened" /></ig:WebDatePicker>