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
Thank you very much!
Hello Rob,
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.
Alex, thank you very much!
-Rob
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.
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,