Intersoft Solutions - Community - WebGrid Enterprise - WebGrid 9 Cell Display issue in Chrome

Community / WebGrid

Latest Development Blogs

Retrieving News

ForumPostTopic

WebGrid Enterprise

2138

8348

357

1383

430

1620

63

263

253

944

118

423

89

357

34

134

36

98

42

114

567

1861

305

768

366

1443

Browse By Tag

WebGrid 9 Cell Display issue in Chrome

4 replies. Last post: June 4, 2015 10:25 AM by leo Chandra

Tags :

(None)

Create New

New Discussion
New Question
New Product Feedback

Post Reply

Sun BennyMember

Posted: May 27, 2015 9:48 AM

Hi

I have intersoft grid and the other controls on my page. for the page, I found the following issues in chrome browser, but IE or firefox is works fine.

1. when the page shows with a scroll bar

When the page is first loaded, the page is normal. you can see the picture '1_After Loading(With Scroll).jpg'

When you click the cell in the 'Item Qty' column, the whole page is moved up, and the cell display is not normal. see picture '2_Click Cell(With Scroll).jpg'

As long as the scroll bar to live down, then pull up to return to normal

2. the page without scroll bar

you can see the picture '3_Normal Page(No Scroll).jpg', In this page, no matter you click on any cell, the page will not have exceptions.

Chrome version is 43.0.2357.65 m

webgrid version is 9.0.7200.1

This question has been bothering me for a long time. Please help me. Thank you.

<%@ Page Language="vb" AutoEventWireup="false" Inherits="ATOMNet.POLookupDetailPaged"
CodeBehind="POLookupDetailPaged.aspx.vb" %>

<%@ Register Assembly="ISNet.WebUI.WebDesktop" Namespace="ISNet.WebUI.WebDesktop"
TagPrefix="ISWebDesktop" %>
<%@ Register TagPrefix="cc1" Namespace="ATOMCustomControl" Assembly="ATOMCustomControl" %>
<%@ Register Assembly="ISNet.WebUI.WebGrid" Namespace="ISNet.WebUI.WebGrid" TagPrefix="ISWebGrid" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head id="Head1" runat="server">
    <title>POLookupDetail</title>

    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" />
    <meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE" />
    <meta content="JavaScript" name="vs_defaultClientScript" />
    <meta content="                        Font-Size="8pt" ForeColor="White">
                    </HeaderCaptionStyle>
                    <CommandDisabledStyle Font-Names="Segoe UI,Tahoma" Font-Size="8pt" ForeColor="DimGray">
                        <Padding Bottom="1px" Left="3px" Right="3px" Top="1px" />
                    </CommandDisabledStyle>
                    <HeaderButtonStyle>
                        <Normal BackColor="#2A66C9" Cursor="Hand" Font-Size="8pt" ForeColor="White" Width="13px">
                            <Padding Bottom="1px" Left="1px" Right="1px" Top="1px" />
                        </Normal>
                        <Over BackColor="#FFF2C8" BaseStyle="Normal" BorderColor="#316AC5" BorderStyle="Solid"
                            BorderWidth="1px" Cursor="Hand" ForeColor="Black">
                            <Padding Bottom="0px" Left="0px" Right="0px" Top="0px" />
                        </Over>
                        <Active BackColor="#FE9855" BaseStyle="Over" BorderColor="#4B4B6F" Cursor="Hand">
                        </Active>
                    </HeaderButtonStyle>
                    <CommandStyle>
                        <Normal Font-Names="Segoe UI,Tahoma" Font-Size="8pt" Overflow="Hidden" OverflowX="Hidden"
                            OverflowY="Hidden">
                            <Padding Bottom="1px" Left="3px" Right="3px" Top="1px" />
                        </Normal>
                        <Over BackColor="#FFF5CC" BackColor2="255, 219, 117" BorderColor="#FFBD69" BorderStyle="Solid"
                            BorderWidth="1px" Cursor="Default" Font-Names="Segoe UI,Tahoma" Font-Size="8pt"
                            GradientType="Vertical" Overflow="Hidden" OverflowX="Hidden" OverflowY="Hidden">
                            <Padding Bottom="0px" Left="2px" Right="2px" Top="0px" />
                        </Over>
                        <Active BackColor="#FE9855" BaseStyle="Over">
                        </Active>
                    </CommandStyle>
                    <SeparatorStyle>
                        <BorderSettings>
                            <Left Color="154, 198, 255" Style="solid" Width="1px" />
                        </BorderSettings>
                    </SeparatorStyle>
                    <HandleStyle BackColor="#E3EFFF" GradientType="Vertical" />
                    <BodyStyle BackColor="#E3EFFF" GradientType="Vertical" />
                    <OptionStyle BackColor="#D3E6FF" BackColor2="116, 161, 220" ForeColor="Black" GradientType="Vertical" />
                    <MenuStyleSettings BackgroundStripColor="233, 238, 238" BackgroundStripColor2=""
                        MenuAnimation="True" MenuWindowType="Normal">
                        <ItemStyle>
                            <Normal Font-Names="segoe ui,tahoma" Font-Size="8.25pt">
                            </Normal>
                            <Over BackColor="#FFE7A2" BaseStyle="Normal" BorderColor="#FFBD69" BorderStyle="Solid"
                                BorderWidth="1px">
                            </Over>
                        </ItemStyle>
                        <DisabledItemStyle>
                            <Normal Font-Names="segoe ui,tahoma" Font-Size="8.25pt" ForeColor="Silver">
                            </Normal>
                            <Over BackColor="WhiteSmoke" BaseStyle="Normal" BorderColor="#FFBD69" BorderStyle="Solid"
                                BorderWidth="1px" ForeColor="Gray">
                            </Over>
                        </DisabledItemStyle>
                        <CheckedItemStyle>
                            <Normal BackColor="#FFBD69" BorderColor="#FFAB3F" BorderStyle="Solid" BorderWidth="1px">
                            </Normal>
                            <Over BackColor="#FB8C3C" BorderColor="#FB8C3C" BorderStyle="Solid" BorderWidth="1px">
                            </Over>
                        </CheckedItemStyle>
                        <FrameStyle BackColor="White" BorderColor="#6593CF" BorderStyle="Solid" BorderWidth="1px">
                        </FrameStyle>
                        <SeparatorStyle>
                            <BorderSettings>
                                <Top Color="154, 198, 255" Style="solid" Width="1px" />
                            </BorderSettings>
                        </SeparatorStyle>
                    </MenuStyleSettings>
                </ISWebDesktop:WebToolBar>
            </td>
        </tr>
    </table>

    <ISWebGrid:WebGrid ID="WebGrid1" runat="server" Style="height: 92%; width: 100%" UseDefaultStyle="True" DefaultStyleMode="Elegant" >

                    <LayoutSettings GridLines="Vertical" AllowEdit="Yes" AutoWidth="True"   AllowBatchUpdate="True"
                        AllowColumnMove="Yes" AllowFilter="Yes" AllowSorting="Yes"
                        EditOnClick="True" ApplyChangesKey="Enter"
                        InProgressUIBehavior="ChangeCursorToHourGlass"
                        RestoreRowSelection="All">
                        <ClientSideEvents OnBatchUpdateSuccess="WebGrid1_OnBatchUpdateSuccess" />
                    </LayoutSettings>
                    <CustomEditors>
                        <ISWebGrid:WebGridCustomEditor ControlType="DHTMLClientControl"
                            JavascriptFiles="Calculator.js" Name="Calculator" Persistence="DesignerLevel"
                            ScriptFolder="EditorsPack1">
                            <Behavior DropdownButtonImageFile="CalcDD.gif" HasDropdownButton="True" />
                        </ISWebGrid:WebGridCustomEditor>
                        <ISWebGrid:WebGridCustomEditor ControlType="DHTMLClientControl"
                            JavascriptFiles="NumericUpDown.js" Name="NumericUpDown"
                            Persistence="DesignerLevel" ScriptFolder="EditorsPack1">
                            <Behavior HasDropdownButton="True" />
                        </ISWebGrid:WebGridCustomEditor>
                        <ISWebGrid:WebGridCustomEditor JavascriptFiles="RichTextBox.js"
                            Name="RichTextBox" Persistence="DesignerLevel" ScriptFolder="EditorsPack1"
                            ServerControlFullName="Telerik.WebControls.RadEditor">
                            <Behavior BaseEditorType="Custom" DropdownButtonType="Custom"
                                HasDropdownButton="True" />
                        </ISWebGrid:WebGridCustomEditor>
                        <ISWebGrid:WebGridCustomEditor JavascriptFiles="WebInputNET.js"
                            Name="WebInputNET" Persistence="DesignerLevel" ScriptFolder="WebInput"
                            ServerControlFullName="ISNet.WebUI.WebControls.WebInput">
                        </ISWebGrid:WebGridCustomEditor>
                        <ISWebGrid:WebGridCustomEditor ControlType="DHTMLClientControl"
                            JavascriptFiles="SlideBar.js" Name="Slidebar" Persistence="DesignerLevel"
                            ScriptFolder="EditorsPack2">
                            <Behavior DropdownButtonImageFile="SliderDD.gif" HasDropdownButton="True" />
                        </ISWebGrid:WebGridCustomEditor>
                        <ISWebGrid:WebGridCustomEditor ControlType="DHTMLClientControl"
                            JavascriptFiles="HtmlEditor.js" Name="HtmlEditor" Persistence="DesignerLevel"
                            ScriptFolder="EditorsPack2">
                            <Behavior BaseEditorType="Custom" />
                        </ISWebGrid:WebGridCustomEditor>
                        <ISWebGrid:WebGridCustomEditor ControlType="DHTMLClientControl"
                            DependencyFiles="SmartWebResources\S\WebScheduler_Calendar.js\301000"
                            JavascriptFiles="VistaCalendar.js;VistaCalendar.css" Name="VistaCalendar"
                            Persistence="DesignerLevel" ScriptFolder="EditorsPack3">
                            <Behavior DropdownButtonImageFile="VistaCalendar.gif" HasDropdownButton="True"
                                SupportElegantStyles="True" />
                        </ISWebGrid:WebGridCustomEditor>
                        <ISWebGrid:WebGridCustomEditor JavascriptFiles="WebTextEditor.js"
                            Name="WebTextEditor" Persistence="DesignerLevel" ScriptFolder="EditorsPack3"
                            ServerControlFullName="ISNet.WebUI.WebTextEditor.WebTextEditor">
                            <Behavior BaseEditorType="Custom" />
                        </ISWebGrid:WebGridCustomEditor>
                    </CustomEditors>
                    <FlyPostBackSettings PostInputControls="true" PostHiddenFields="true" />
                </ISWebGrid:WebGrid>

    <ISWebDesktop:WebDialogBox ID="wdbHandTools" runat="server" Height="250px" Width="500px"
        ContentScrollable="True" ShowOnLoad="false" ShadowColor="Gray" Location="200, 50"
        StartPosition="CenterParent">
        <WindowSettings ContentMode="UseIFrame">
            <CommandButtonStyle>
                <Active BackColor="#8A887B" BaseStyle="Normal" ForeColor="White">
                </Active>
                <Over BackColor="#C5C2AF" BaseStyle="Normal">
                </Over>
                <Normal BackColor="Control" BorderColor="ControlDarkDark" BorderStyle="Solid" BorderWidth="1px"
                    Font-Bold="False" Font-Italic="False" Font-Names="Tahoma" Font-Size="8pt" Font-Underline="False">
                </Normal>
            </CommandButtonStyle>
            <ContainerStyle BackColor="White" Font-Names="Tahoma" Font-Size="8pt" Height="100%"
                Width="100%">
                <Padding Bottom="4px" Left="4px" Right="4px" Top="4px" />
            </ContainerStyle>
            <WindowStyle>
                <Active BaseStyle="Normal" BorderColor="#B0CFF7">
                    <BorderSettings>
                        <Top Style="none" />
                    </BorderSettings>
                </Active>
                <Normal BackColor="White" BorderColor="#B0CFF7" BorderStyle="Solid" BorderWidth="1px"
                    Font-Names="Tahoma" Font-Size="8pt">
                </Normal>
            </WindowStyle>
            <CaptionStyle>
                <Active BackgroundImage="/CommonLibrary/Images/WebDesktop/o7/center_active.gif" BaseStyle="Normal"
                    ForeColor="Navy">
                    <Padding Bottom="6px" Left="5px" Top="4px" />
                </Active>
                <Normal BackColor="Gray" Cursor="Default" Font-Bold="False" Font-Names="segoe ui, tahoma"
                    Font-Size="10pt" ForeColor="White">
                    <Padding Bottom="2px" Left="2px" Right="2px" Top="2px" />
                </Normal>
            </CaptionStyle>
            <CaptionButtonStyle>
                <Active BaseStyle="Normal">
                    <BorderSettings>
                        <Top Color="Gray" />
                        <Left Color="Gray" />
                    </BorderSettings>
                </Active>
                <Over BaseStyle="Normal">
                    <BorderSettings>
                        <Bottom Color="Gray" />
                        <Right Color="Gray" />
                    </BorderSettings>
                </Over>
                <Normal BorderColor="#B0CFF7" BorderStyle="Solid" BorderWidth="1px" Height="17px"
                    Overflow="Hidden" OverflowX="Hidden" OverflowY="Hidden">
                    <Margin Bottom="0px" Right="4px" Top="2px" />
                </Normal>
            </CaptionButtonStyle>
            <CommandButtonDisabledStyle BackColor="Control" BackgroundImage="" BorderColor="ControlDarkDark"
                BorderStyle="Solid" BorderWidth="1px" CustomRules="" Font-Bold="False" Font-Italic="False"
                Font-Names="Tahoma" Font-Size="8pt" Font-Underline="False" ForeColor="Gray">
            </CommandButtonDisabledStyle>
        </WindowSettings>
    </ISWebDesktop:WebDialogBox>

    <ISWebDesktop:WebDialogBox ID="wdbTray" runat="server" Height="340px" Width="480px"
        ContentScrollable="True" ShowOnLoad="false" ShadowColor="Gray" Location="200, 0"
        StartPosition="CenterParent">
        <WindowSettings ContentMode="UseIFrame">
            <CommandButtonStyle>
                <Active BackColor="#8A887B" BaseStyle="Normal" ForeColor="White">
                </Active>
                <Over BackColor="#C5C2AF" BaseStyle="Normal">
                </Over>
                <Normal BackColor="Control" BorderColor="ControlDarkDark" BorderStyle="Solid" BorderWidth="1px"
                    Font-Bold="False" Font-Italic="False" Font-Names="Tahoma" Font-Size="8pt" Font-Underline="False">
                </Normal>
            </CommandButtonStyle>
            <ContainerStyle BackColor="White" Font-Names="Tahoma" Font-Size="8pt" Height="100%"
                Width="100%">
                <Padding Bottom="0px" Left="0px" Right="0px" Top="0px" />
            </ContainerStyle>
            <WindowStyle>
                <Active BaseStyle="Normal" BorderColor="#B0CFF7">
                    <BorderSettings>
                        <Top Style="none" />
                    </BorderSettings>
                </Active>
                <Normal BackColor="White" BorderColor="#B0CFF7" BorderStyle="Solid" BorderWidth="1px"
                    Font-Names="Tahoma" Font-Size="8pt">
                </Normal>
            </WindowStyle>
            <CaptionStyle>
                <Active BackgroundImage="/CommonLibrary/Images/WebDesktop/o7/center_active.gif" BaseStyle="Normal"
                    ForeColor="Navy">
                    <Padding Bottom="6px" Left="5px" Top="4px" />
                </Active>
                <Normal BackColor="Gray" Cursor="Default" Font-Bold="False" Font-Names="segoe ui, tahoma"
                    Font-Size="10pt" ForeColor="White">
                    <Padding Bottom="2px" Left="2px" Right="2px" Top="2px" />
                </Normal>
            </CaptionStyle>
            <CaptionButtonStyle>
                <Active BaseStyle="Normal">
                    <BorderSettings>
                        <Top Color="Gray" />
                        <Left Color="Gray" />
                    </BorderSettings>
                </Active>
                <Over BaseStyle="Normal">
                    <BorderSettings>
                        <Bottom Color="Gray" />
                        <Right Color="Gray" />
                    </BorderSettings>
                </Over>
                <Normal BorderColor="#B0CFF7" BorderStyle="Solid" BorderWidth="1px" Height="17px"
                    Overflow="Hidden" OverflowX="Hidden" OverflowY="Hidden">
                    <Margin Bottom="0px" Right="4px" Top="2px" />
                </Normal>
            </CaptionButtonStyle>
            <CommandButtonDisabledStyle BackColor="Control" BackgroundImage="" BorderColor="ControlDarkDark"
                BorderStyle="Solid" BorderWidth="1px" CustomRules="" Font-Bold="False" Font-Italic="False"
                Font-Names="Tahoma" Font-Size="8pt" Font-Underline="False" ForeColor="Gray">
            </CommandButtonDisabledStyle>
        </WindowSettings>
    </ISWebDesktop:WebDialogBox>

</form>
</body>
</html>

1_After Loading(With Scroll).jpg

2_Click Cell(With Scroll).jpg

3_Normal Page(No Scroll).jpg

Reply

Quick Reply

Quote

All Replies

Sun BennyMember

Posted: June 1, 2015 3:45 AM in response to Sun Benny

Any News?

leo ChandraMember

Posted: June 1, 2015 9:13 AM in response to Sun Benny

Hi Sun,

I have report this issue to WebGrid development team under 'ASPNET-172'. For a workaround, please attach below javascript to your webgrid OnEnterEditMode clientside event:

function EnterEditMode(controlId, tblName, editObject)
{
    if (IS.chrome)
    {
        var grid = ISGetObject(controlId)
        var element = editObject.element;
        if (editObject.element.GetFrameElement)
            element = editObject.element.GetFrameElement();
        var offsetTop = ISPosLib.getTopNonIE(grid.FrameObj) - ISPosLib.getTop(grid.FrameObj);
        var offsetLeft = ISPosLib.getLeftNonIE(grid.FrameObj) - ISPosLib.getLeft(grid.FrameObj);
        element.style.top = (parseInt(element.style.top) + (offsetTop)) + "px";
        element.style.left = (parseInt(element.style.left) + (offsetLeft)) + "px";
    }
}

Please infrom me whether this workaround work for you after you test it.

Best Regards,
Leo

Sun BennyMember

Posted: June 2, 2015 8:29 AM in response to leo Chandra

Thanks for replying. I have tried to test it, but it didnt work for me, is there a solution?

leo ChandraMember

Posted: June 4, 2015 10:25 AM in response to Sun Benny

Hi Benny,

I have attached a sample that have used the workaround that I proposed earlier. Please have it evaluated by adding it to webgrid sample included in installation folder and inform me whether my sample have replicated your issue. If my sample did not replicate the issue that you are facing, please modified the sample so that I could used it to observed this problematic behaviour.

Best Regards,
Leo

1 attachment

ChromeEditPositionIssue.rar

Error when add row by client side (SelfReferencing...

Changing the WebDialogBox in clientside

All times are GMT -5. The time now is 5:39 AM.

Previous Next