Both the DatePickerProvider, and the MonthCalendarProvider intelligently display on the screen based on the location of the frame edge. The DropDownProvider does not do this... instead, it extends below the bottom of the frame, obscuring all of the choices.
This is true whether you are editing an existing row or adding a new row. This is particularly cumbersome when the Add New Row is at the bottom of the screen. It means that if I want to use a DropDownProvider, I have to include a ton of whitespace below the grid for the dropdown..
Screenshot and samples:
TestPage_Parent.aspx:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestPage_Parent.aspx.vb" Inherits="TestPage_Parent" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <ig:WebScriptManager ID="WebScriptManager1" runat="server"> </ig:WebScriptManager> <div> <h6>WebDataGrid in frame of WebTab:</h6> <ig:WebTab ID="WebTab1" runat="server" Height="300px" Width="500px" StyleSetName="IG"> <Tabs> <ig:ContentTabItem runat="server" Text="Tab 1" ScrollBars="Hidden" ContentUrl="TestPage.aspx" FrameScrolling="False"> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab 2"> </ig:ContentTabItem> </Tabs> </ig:WebTab> <h6>WebDataGrid in frame of WebSplitter:</h6> <ig:WebSplitter ID="WebSplitter1" runat="server" Height="300px" Width="500px" StyleSetName="IG"> <Panes> <ig:SplitterPane runat="server" Collapsed="False" Size="10" BackColor="#CCFFFF"> </ig:SplitterPane> <ig:SplitterPane runat="server" ScrollBars="Hidden" ContentUrl="TestPage.aspx" FrameScrolling="False"> </ig:SplitterPane> </Panes> </ig:WebSplitter> </div> </form></body></html>
TestPage.aspx:
<%@ Page Language="VB" CodeFile="TestPage.aspx.vb" Inherits="TestPage" %><%@ Register Assembly="Infragistics4.Web.v11.1, Version=11.1.20111.2020, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI.ListControls" TagPrefix="ig" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <style type="text/css"> html, body, form { width: 100%; height: 100%; margin: 0px; } </style></head><body> <form id="form1" runat="server"> <ig:WebScriptManager ID="WebScriptManager1" runat="server"> </ig:WebScriptManager> <ig:WebDataGrid ID="WebDataGrid1" runat="server" StyleSetName="IG" AutoGenerateColumns="False" DataKeyFields="datepickerprovider" Width="100%" Height="100%"> <Columns> <ig:BoundDataField DataFieldName="datepickerprovider" Key="datepickerprovider"> <Header Text="DatePickerProvider" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="dropdownprovider" Key="dropdownprovider"> <Header Text="DropdownProvider" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="monthcalendarprovider" Key="monthcalendarprovider"> <Header Text="MonthCalendarProvider" /> </ig:BoundDataField> </Columns> <EditorProviders> <ig:DatePickerProvider ID="WebDataGrid1_DatePickerProvider1"> <EditorControl ID="EditorControl1" runat="server" ClientIDMode="Predictable" StyleSetName="IG"> </EditorControl> </ig:DatePickerProvider> <ig:DropDownProvider runat="server" ID="WebDataGrid1_DropDownProvider1"> <EditorControl ClientIDMode="Predictable" DropDownContainerMaxHeight="200px" EnableAnimations="False" EnableDropDownAsChild="False" StyleSetName="IG" DropDownContainerWidth="125px"> <Items> <ig:DropDownItem Selected="False" Text="Item 1" Value="Item 1"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 2" Value="Item 2"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 3" Value="Item 3"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 4" Value="Item 4"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 5" Value="Item 5"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 6" Value="Item 6"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 7" Value="Item 7"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 8" Value="Item 8"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 9" Value="Item 9"> </ig:DropDownItem> </Items> </EditorControl> </ig:DropDownProvider> <ig:MonthCalendarProvider ID="WebDataGrid1_MonthCalendarProvider1"> <EditorControl ID="EditorControl2" runat="server" ClientIDMode="Predictable" StyleSetName="IG"> </EditorControl> </ig:MonthCalendarProvider> </EditorProviders> <Behaviors> <ig:EditingCore> <Behaviors> <ig:CellEditing> <EditModeActions MouseClick="Single" /> <ColumnSettings> <ig:EditingColumnSetting ColumnKey="datepickerprovider" EditorID="WebDataGrid1_DatePickerProvider1" /> <ig:EditingColumnSetting ColumnKey="dropdownprovider" EditorID="WebDataGrid1_DropDownProvider1" /> <ig:EditingColumnSetting ColumnKey="monthcalendarprovider" EditorID="WebDataGrid1_MonthCalendarProvider1" /> </ColumnSettings> </ig:CellEditing> <ig:RowAdding> <EditModeActions MouseClick="Single" /> <ColumnSettings> <ig:RowAddingColumnSetting ColumnKey="datepickerprovider" EditorID="WebDataGrid1_DatePickerProvider1" /> <ig:RowAddingColumnSetting ColumnKey="dropdownprovider" EditorID="WebDataGrid1_DropDownProvider1" /> <ig:RowAddingColumnSetting ColumnKey="monthcalendarprovider" EditorID="WebDataGrid1_MonthCalendarProvider1" /> </ColumnSettings> </ig:RowAdding> </Behaviors> </ig:EditingCore> <ig:RowSelectors> </ig:RowSelectors> </Behaviors> </ig:WebDataGrid> </form></body></html>
TestPage.aspx.vb:
Partial Class TestPage Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim tbl As New DataTable tbl.Columns.Add("datepickerprovider", GetType(Date)) tbl.Columns.Add("dropdownprovider") tbl.Columns.Add("monthcalendarprovider", GetType(Date)) Dim rnd As New Random() For i = 1 To 8 Dim rw As DataRow = tbl.NewRow rw("datepickerprovider") = Today.AddDays(i) rw("dropdownprovider") = "Item " & rnd.Next(1, 9) rw("monthcalendarprovider") = Today.AddDays(i + 45) tbl.Rows.Add(rw) Next Me.WebDataGrid1.DataSource = tbl End Sub End Class
Hello Rob,
You can try to set “EnableDropDownAsChild” property to “True” and to “False” in order to see if this will helping in display the dropdown container properly.
Other thing that you can do (especially for bottom rows like AddNewRow) is to change the dropdown container orientation (“DropDownOrientation” property) like shown in the following sample - http://samples.infragistics.com/aspnet/Samples/WebDropDown/Display/PropertyExplorer/Default.aspx?cn=drop-down&sid=783ab813-1eb5-4f37-b0d8-9db25d2c8ac2
This will let you to show the dropdown container in the parent element and not between the two elements on the page that have different Z-position or are in different frames.
Let me know if this can be helpful in your scenario.
Thanks for the helpful suggestions Alexander! I did not realize that the DropDownProvider had these properties.
I tried changing the EnableDropDownAsChild property, and neither value altered the behavior.
I also tried changing the orientation... but with mixed results. Changing the orientation to TopRight on the AddNewRow works well because I know it will always be at the bottom of the screen. But what about the other rows? The only way it works is if orientation is calculated at the moment of dropdown.
The last thing I want to ask about is the behavior of the drop-down calendars. They change their orientation automatically based on their proximity to the edge of the frame. Doesn't it stand to reason that the dropdown should behave the same way?
Dropping down the calendar from a row at the bottom of the page:
Dropping down the calendar from a row near the top of the page:
If you can provide me with the code that you use in the calendars to automatically switch orientation, I would be very appreciative. I can then use that code in all of my grids that use the dropdown. But it would be even better if you guys could incorporate the same code into the dropdown.
Thanks!
-Rob
Thank you for your feedback.
The dropdown container is rendered as a DIV element while the calendar container is rendered as a Table element. This is one of the possible reasons for this different behavior.
What you can do in this case is to handle the “InitializeRow” event, get the providers in each row (or use template column with “WebDropDown”s) and set their display position to default if they are on the top of the grid and to top if they are at the bottom.
If this solution is not useful I will research if some other approach is possible.
Hey Alex, thanks for the idea.
It sounds like a pain to build initialize events on every instance of a DropDownProvider in all of my grids. But it looks like there may not be an alternative ready solution.
I really feel like intelligent dropdown placement should be built in to the DropDownProvider.
The more I investigate, the more I become convinced that the DropDownProvider is not behaving the way the developers intended. Even on pages where there is not a frame, this issue causes the grid to misbehave in even more dramatic ways. For a more extreme example, try this...
Try replacing the TestPage.aspx page with this markup and opening it in its own window (without being in a ContentPane).
<%@ Page Language="VB" CodeFile="TestPage.aspx.vb" Inherits="TestPage" %><%@ Register Assembly="Infragistics4.Web.v11.1, Version=11.1.20111.2020, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI.ListControls" TagPrefix="ig" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <style type="text/css"> html, body, form { width: 99.5%; height: 99.5%; margin: 0px; } </style></head><body> <form id="form1" runat="server"> <ig:WebScriptManager ID="WebScriptManager1" runat="server"> </ig:WebScriptManager> <ig:WebDataGrid ID="WebDataGrid1" runat="server" StyleSetName="IG" AutoGenerateColumns="False" DataKeyFields="datepickerprovider" Width="99.5%" Height="99.5%"> <Columns> <ig:BoundDataField DataFieldName="datepickerprovider" Key="datepickerprovider"> <Header Text="DatePickerProvider" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="dropdownprovider" Key="dropdownprovider"> <Header Text="DropdownProvider" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="monthcalendarprovider" Key="monthcalendarprovider"> <Header Text="MonthCalendarProvider" /> </ig:BoundDataField> </Columns> <EditorProviders> <ig:DatePickerProvider ID="WebDataGrid1_DatePickerProvider1"> <EditorControl ID="EditorControl1" runat="server" ClientIDMode="Predictable" StyleSetName="IG"> </EditorControl> </ig:DatePickerProvider> <ig:DropDownProvider runat="server" ID="WebDataGrid1_DropDownProvider1" > <EditorControl ClientIDMode="Predictable" DropDownContainerMaxHeight="200px" EnableAnimations="False" EnableDropDownAsChild="False" StyleSetName="IG" DropDownContainerWidth="125px"> <Items> <ig:DropDownItem Selected="False" Text="Item 1" Value="Item 1"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 2" Value="Item 2"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 3" Value="Item 3"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 4" Value="Item 4"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 5" Value="Item 5"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 6" Value="Item 6"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 7" Value="Item 7"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 8" Value="Item 8"> </ig:DropDownItem> <ig:DropDownItem Selected="False" Text="Item 9" Value="Item 9"> </ig:DropDownItem> </Items> </EditorControl> </ig:DropDownProvider> <ig:MonthCalendarProvider ID="WebDataGrid1_MonthCalendarProvider1"> <EditorControl ID="EditorControl2" runat="server" ClientIDMode="Predictable" StyleSetName="IG"> </EditorControl> </ig:MonthCalendarProvider> </EditorProviders> <Behaviors> <ig:EditingCore> <Behaviors> <ig:CellEditing> <EditModeActions MouseClick="Single" /> <ColumnSettings> <ig:EditingColumnSetting ColumnKey="datepickerprovider" EditorID="WebDataGrid1_DatePickerProvider1" /> <ig:EditingColumnSetting ColumnKey="dropdownprovider" EditorID="WebDataGrid1_DropDownProvider1" /> <ig:EditingColumnSetting ColumnKey="monthcalendarprovider" EditorID="WebDataGrid1_MonthCalendarProvider1" /> </ColumnSettings> </ig:CellEditing> <ig:RowAdding> <EditModeActions MouseClick="Single" /> <ColumnSettings> <ig:RowAddingColumnSetting ColumnKey="datepickerprovider" EditorID="WebDataGrid1_DatePickerProvider1" /> <ig:RowAddingColumnSetting ColumnKey="dropdownprovider" EditorID="WebDataGrid1_DropDownProvider1" /> <ig:RowAddingColumnSetting ColumnKey="monthcalendarprovider" EditorID="WebDataGrid1_MonthCalendarProvider1" /> </ColumnSettings> </ig:RowAdding> </Behaviors> </ig:EditingCore> <ig:RowSelectors> </ig:RowSelectors> </Behaviors> </ig:WebDataGrid> </form></body></html>
if the dropdown extends below the bottom of viewable area, the page detects this and presents a page-level scrollbar. The appearance of the page level scrollbar then causes the grid to resize. This causes the dropdown to lose focus, causing it to then immediately collapse.
I can't imagine that any of this is how the developers intended the DropDownProvider to behave. I feel like we are trying to hack a solution to something that represents a bug or that should be built-in functionality.
Because this should be built-in, and because I have already committed a lot of time building sample pages for you guys (while I have my own clients waiting for me), I really need you guys to take ownership of this and find a solution.
Thanks again for the help,
I have contacted our Developers that are responsible for “WebDropDown” control with this question and they confirmed that in order to make this control to behave like date picker and calendar controls additional functionality should be added in our source code.
That is why I will log this as a Feature Request and will respond to this thread with the request ID once the process is completed.
Thank you.
Alex, thank you very much!
Thank you very much!
I have sent your feature request directly to our product management team.
Our product team chooses new feature requests for development based on popular feedback from our customer base.
If your feature is chosen for development, you will be notified at that time.
Your reference number for this feature request is FR13581 – “Auto change the dropdown container position when control is close to iframe or page boundaries”.
If you would like to follow up on your feature request at a later point, you may contact Developer Support management via email.
Please include the reference number of your feature request in the subject and body of your email message. You can reach Developer Support management through the following email address: dsmanager@infragistics.com
Thank you for your request.