[OPEN] [#1579] [4.5.1] Gridpanel refresh problems with Firefox

  1. #1

    [OPEN] [#1579] [4.5.1] Gridpanel refresh problems with Firefox

    Hi,
    we have a problem when refreshing data in Firefox 52.6 ESR. It is working without a problem in Google Chrome.
    We are using Ext.NET 4.5.1.

    Scenario:
    - Some data is loaded in a Gridpanel, a scrollbar is shown.
    - A user scrolls down to the half of the page
    - A user clicks on the refresh button in the PagingToolbar.
    - The Gridpanel has a graphic issue (please have a look a the screenshot)
    Click image for larger version. 

Name:	2018-03-05_172740.jpg 
Views:	117 
Size:	72.4 KB 
ID:	25117
    - When the user clicks in the GridPanel or scroll down or up, the data is correctly shown again.

    I think it has something to do with the <ext:PageProxy. In another example without a PageProxy it is working in Firefox. But we need the PageProxy.

    Do you have any idea how to solve the problem?

    Many thanks for your help!

    Bye,
    Andreas



    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Page Language="C#" %>
    
    <script runat="server">
    
        [DirectMethod]
        public static object BindData()
        {
            return Data;
        }
    
        private static object[] Data
        {
            get
            {
                int count = 200;
                DateTime now = DateTime.Now;
                object[] data = new object[count];
    
                for (int i = 0; i < count; i++)
                {
                    data[i] = new object[] { "3m Co", 71.72, 0.02, 0.03, now };
                }
                return data;
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>PageProxy with DirectMethod - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
                <Items>
                    <ext:GridPanel
                        ID="GridPanel1"
                        runat="server"
                        Title="Array Grid"
                        Region="Center">
                        <Store>
                            <ext:Store ID="Store1" runat="server" PageSize="100">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="company" />
                                            <ext:ModelField Name="price" Type="Float" />
                                            <ext:ModelField Name="change" Type="Float" />
                                            <ext:ModelField Name="pctChange" Type="Float" />
                                            <ext:ModelField Name="lastChange" Type="Date" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                                <Proxy>
                                    <ext:PageProxy DirectFn="App.direct.BindData">
                                        <Reader>
                                            <ext:ArrayReader />
                                        </Reader>
                                    </ext:PageProxy>
                                </Proxy>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:RowNumbererColumn runat="server" Width="35" />
                                <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                                <ext:Column runat="server" Text="Price" Width="75" DataIndex="price">
                                    <Renderer Format="UsMoney" />
                                </ext:Column>
                                <ext:Column runat="server" Text="Change" Width="75" DataIndex="change">
                                    <Renderer Fn="change" />
                                </ext:Column>
                                <ext:Column runat="server" Text="Change" Width="75" DataIndex="pctChange">
                                    <Renderer Fn="pctChange" />
                                </ext:Column>
                                <ext:DateColumn runat="server" Text="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />
                            </Columns>
                        </ColumnModel>
                        <BottomBar>
                            <ext:PagingToolbar runat="server"></ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by ASchott; Mar 05, 2018 at 4:07 PM.
  2. #2
    Hello Andreas!

    I could reproduce this issue with your test case using Firefox v58.0.2 (equivalent to your 52.6 according to this table), and there's a simple workaround that would avoid the issue, provided you use the pager to allow shorter scrollbars.

    Just disable BufferedRenderer on the grid and it should work nice. Add BufferedRenderer="false" between lines 54 and 58 in your provided code to do so.

    The performance impact on your page should be minor, as the buffered renderer of rows really affects (positively) performance when you have many many rows (more than 100, maybe 1000) in a grid -- displayed in the same page.

    Anyway, this is indeed a bug, as firefox is supposed to be supported by Ext.NET, but this issue seems to come from the underlying ExtJS. We've logged the issue after #1579 and we will post an update here as soon as the issue is fixed.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio,

    our application works now like expected with BufferedRenderer="false". On a refresh the scrollbar is preserved in Firefox and Chrome and there are no graphic issues! Great :-)

    With BufferedRenderer="true" the scrollbar is not preserved in Chrome and in Firefox there is the graphic issue.

    Many thanks for your help!

    Bye,
    Andreas

Similar Threads

  1. Replies: 2
    Last Post: Sep 15, 2015, 6:46 AM
  2. [CLOSED] Display problems on Chrome and Firefox
    By Stefanaccio in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: May 18, 2011, 6:18 AM
  3. Problems with IE7/8 and FireFox
    By magisystem in forum 1.x Help
    Replies: 5
    Last Post: Jun 16, 2010, 10:29 AM
  4. Firefox problems
    By DasPhansom in forum 1.x Help
    Replies: 3
    Last Post: Mar 03, 2009, 5:39 AM
  5. [OPEN] GridPanel Width problems.
    By ljcorreia in forum Bugs
    Replies: 2
    Last Post: Nov 11, 2008, 5:52 AM

Tags for this Thread

Posting Permissions