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