|
|
Rank: Newbie
Groups: Member
Joined: 4/25/2012
Posts: 5
|
I have an EO:Grid with a custom column (Dropdown). I have coded as seen in your sample code. When the page is used from a PC browser (Chrome, FF and others) there is no problem. When I do the same from a tablet or phone device, I can select values from the dropdown, but if I scroll in the grid, it is no longer possible to select values from the dropdown, it is blocked after scrolling. I am using EO.Web 18.2.74.0 The problem is easy reproducable here: http://test.fscrm.ch/eogridtest.aspxIt is important to get a solution for that. Thanks.
Code: HTML/ASPX
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="EOGridTest.aspx.vb" Inherits="FSCRM.EOGridTest" %>
<%@ Register assembly="EO.Web" namespace="EO.Web" tagprefix="eo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function on_begin_edit(cell) {
var v = cell.getValue();
//Set the drop downbox's selectedIndex based on the
//current value
var dropDownBox = document.getElementById("ranking_dropdown");
for (var i = 0; i < dropDownBox.options.length; i++) {
if (dropDownBox.options[i].text == v) {
dropDownBox.selectedIndex = i;
return;
}
}
//No match has been found, display the "Please Select" item
dropDownBox.selectedIndex = 0;
}
function on_end_edit(cell) {
//Get the new value from the drop down box
var dropDownBox = document.getElementById("ranking_dropdown");
var selectedIndex = dropDownBox.selectedIndex;
if (selectedIndex > 0)
return dropDownBox.options[selectedIndex].text;
return null;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<eo:Grid ID="Grid1" runat="server" BorderColor="#828790" BorderWidth="1px"
ColumnHeaderAscImage="00050204" ColumnHeaderDescImage="00050205"
ColumnHeaderDividerImage="00050203" ColumnHeaderHeight="24"
FixedColumnCount="1" Font-Bold="False" Font-Italic="False" Font-Names="Verdana"
Font-Overline="False" Font-Size="11px" Font-Strikeout="False"
Font-Underline="False" GridLineColor="240, 240, 240" GridLines="Both"
Height="504px" Width="790px" ClientSideOnItemCommand="OnItemCommand" FullRowMode="False" ClientIDMode="AutoID">
<ItemStyles>
<eo:GridItemStyleSet>
<ItemStyle CssText="background-color: white" />
<ItemHoverStyle CssText="background-image: url(00050206); background-repeat: repeat-x" />
<SelectedStyle CssText="background-image: url(00050207); background-repeat: repeat-x" />
<CellStyle CssText="padding-left:8px;padding-top:2px;white-space:nowrap;" />
</eo:GridItemStyleSet>
</ItemStyles>
<ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:8px;padding-top:3px;" />
<ColumnHeaderHoverStyle CssText="background-image:url('00050202');padding-left:8px;padding-top:3px;" />
<Columns>
<eo:StaticColumn DataField="Id" HeaderText="id">
</eo:StaticColumn>
<eo:CustomColumn ClientSideBeginEdit="on_begin_edit" ClientSideEndEdit="on_end_edit" DataField="ranking" HeaderText="ranking" Width="150">
<EditorTemplate>
<select id="ranking_dropdown" style="width:150px;font-family:Courier New; font-size: 12px; color:#4a4a44;">
<option>-choose ranking-</option>
<asp:Repeater ID="ddRankings" Runat="server">
<ItemTemplate>
<option value='<%#DataBinder.Eval(Container.DataItem, "Ranking_No")%>'><%#DataBinder.Eval(Container.DataItem, "Ranking_Name")%></option>
</ItemTemplate>
</asp:Repeater>
</select>
</EditorTemplate>
<CellStyle CssClass="TextBoxDDGrid" />
</eo:CustomColumn>
</Columns>
<ColumnTemplates>
<eo:TextBoxColumn>
<TextBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8.75pt; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; FONT-FAMILY: Tahoma" />
</eo:TextBoxColumn>
<eo:DateTimeColumn>
<DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="19"
DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True"
SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon">
<PickerStyle CssClass="datePicker" />
<CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
<TitleArrowStyle CssText="cursor:hand" />
<MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" />
<DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" />
<DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
<TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
<SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
</DatePicker>
</eo:DateTimeColumn>
<eo:MaskedEditColumn>
<MaskedEdit ControlSkinID="None"
TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; font-family:Courier New;font-size:8pt;">
</MaskedEdit>
</eo:MaskedEditColumn>
</ColumnTemplates>
<FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
</eo:Grid>
</div>
</form>
</body>
</html>
Code: Visual Basic.NET
Public Class EOGridTest
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'some test data
Dim dt As DataTable = New DataTable("tblGridData")
dt.Columns.Add("Id", GetType(Integer))
dt.Columns.Add("Ranking", GetType(String))
For i As Integer = 1 To 100
dt.Rows.Add(i, String.Empty)
Next
Me.Grid1.DataSource = dt
Me.Grid1.DataBind()
'add ranking column
Dim customColNum As Integer = 1
Dim productColumn As EO.Web.CustomColumn = CType(Grid1.Columns(customColNum), EO.Web.CustomColumn)
Dim productRepeater As Repeater = CType(productColumn.EditorInstance.FindControl("ddRankings"), Repeater)
Dim dtRankings As DataTable = New DataTable("tblRankings")
dtRankings.Columns.Add("ranking_no", GetType(Integer))
dtRankings.Columns.Add("ranking_name", GetType(String))
dtRankings.Rows.Add(1, "A")
dtRankings.Rows.Add(2, "B")
dtRankings.Rows.Add(3, "C")
productRepeater.DataSource = dtRankings
productRepeater.DataBind()
End Sub
End Class
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,258
|
Hi,
Which type of device do you use? We tested it on an Andriod phone and it seems to work fine.
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 4/25/2012
Posts: 5
|
Hi,
I tested it on Android tablet and IPad and iPhone and I can reproduce the problem on these devices.
On my Android phone it works fine.
Regards
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,258
|
Hi,
We tested with iPad iOS 9.3.5 and it still works fine. What version/browser do you use?
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 4/25/2012
Posts: 5
|
Hi,
We tested with iPad iOS 11.3.1 and Safari, Chrome und Firefox. We updated all browsers to the lates update when testing.
Regards
|
|
Rank: Newbie
Groups: Member
Joined: 4/25/2012
Posts: 5
|
Hi,
Do you have a solution for the reported issue? It is a major issue in our software and we need to have the problem solved.
Thanks.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,258
|
Hi, We are not able to reproduce the problem here on Andriod devices. Currently we do not have an IOS 11.3.1 device to verify the problem. If you run our demo application do you see the same problem? You can also try to enable physical JavaScript files and see if it helps: https://www.essentialobjects.com/doc/web/installationanddeployment/deploy.aspxThanks!
|
|