Welcome Guest Search | Active Topics | Sign In | Register

EO:Grid Custom Column (Dropdown) blocked after scrolling from mobile device Options
Stefan Koehli
Posted: Tuesday, September 4, 2018 10:50:22 AM
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.aspx

It 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
eo_support
Posted: Tuesday, September 4, 2018 8:42:04 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
Hi,

Which type of device do you use? We tested it on an Andriod phone and it seems to work fine.

Thanks!
Stefan Koehli
Posted: Thursday, September 13, 2018 3:13:27 AM
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
eo_support
Posted: Tuesday, September 18, 2018 4:07:13 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
Hi,

We tested with iPad iOS 9.3.5 and it still works fine. What version/browser do you use?

Thanks!
Stefan Koehli
Posted: Thursday, September 20, 2018 4:19:59 AM
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
Stefan Koehli
Posted: Wednesday, October 17, 2018 8:11:43 AM
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.
eo_support
Posted: Wednesday, October 17, 2018 10:15:30 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
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.aspx

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.