[FIXED] [#1490] [4.3.0] horizontale scroll bar always left when RTL is true (Chrome Only)

  1. #1

    [FIXED] [#1490] [4.3.0] horizontale scroll bar always left when RTL is true (Chrome Only)

    Hello,

    I have a page that contains viewport with RTL true and a gridpanel, when loading the page,the horizontal scroll bar of the page is always on left but it should be on right when RTL is true. this issue appears only in chrome,
    Here is a sample code and attached screenshots.


    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title></title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
          <style>
             .x-column-header {
               font       :bold 14px 'Tahoma',Times, serif !important;
               text-align:center !important;
               vertical-align:middle !important;
               height:38px;
            }
               
        </style>
    
       
        <script type="text/javascript">
    
           
    
    
        </script>
    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" ID="ResourceManager1" >
                <Listeners>
                    <DocumentReady Handler="App.direct.BindGridPanel();" />
                </Listeners>
            </ext:ResourceManager>
    
            <ext:Viewport runat="server" ID="VP1" RTL="true" Layout="BorderLayout" >
                 <Items>
                      
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Region="Center"
                >
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="id" Type="Int" />
                                    <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" DateFormat="M/d hh:mmtt" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="company"  Width="350"/>
                        <ext:Column runat="server" Text="Price" Width="350" DataIndex="price" />
                        <ext:Column runat="server" Text="Change" Width="350" DataIndex="change" />
                        <ext:Column runat="server" Text="Pct.Change" Width="350" DataIndex="pctChange" />
                        <ext:DateColumn runat="server" Text="Last Updated" Width="350" DataIndex="lastChange" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" Mode="Single" />
                </SelectionModel>
                <View>
                    <ext:GridView runat="server" />
                </View>
                 <Plugins>
                    <ext:GridFilters runat="server"/>
                     <ext:RowExpander runat="server" ID="RowExpander1">
                    
                     </ext:RowExpander>
                </Plugins>
                <BottomBar>
                     <ext:PagingToolbar ID="PagingToolbar1" runat="server"  HideRefresh="true" >
                       <Plugins>
                            <ext:ProgressBarPager ID="ProgressBarPager1"  runat="server"/>
                        </Plugins>
                        <Items>
                            <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="15"/>
                        </Items>
                    </ext:PagingToolbar>
                </BottomBar>  
            </ext:GridPanel>
                </Items>
            </ext:Viewport>
            
    
          
        </form>
    
    
    </body>
    </html>

    
    protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                   
                }
            }
    
         
            [DirectMethod]
            public void BindGridPanel()
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { 1, "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { 2, "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { 3, "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { 4, "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { 5, "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { 6, "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { 7, "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { 8, "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { 9, "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { 10, "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { 11, "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { 12, "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { 13, "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { 14, "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { 15, "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { 16, "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { 17, "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { 18, "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { 19, "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { 20, "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { 21, "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                    new object[] { 22, "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                    new object[] { 23, "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                    new object[] { 24, "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                    new object[] { 25, "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                    new object[] { 26, "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { 27, "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                    new object[] { 28, "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                    new object[] { 29, "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
    
                this.Store1.DataBind();
                GridPanel1.Render();
            }

    Thank you
    Attached Thumbnails Click image for larger version. 

Name:	Capture.PNG 
Views:	26 
Size:	46.1 KB 
ID:	24966  
    Last edited by fabricio.murta; Jun 02, 2017 at 10:39 AM.
  2. #2
    Hello @geovision!

    Thank you very much for taking your time to create the thread! We really appreciate it.

    The following would be a solution for the time being, and it is far from best. We'll give it a deeper thought and share any better solution we can get for this in the short term if we find anything. There must be something specific to chrome to be triggering this "scroll to end" after the grid is loaded.

    The palliative solution would be to add this listener to the Grid Panel (not the grid view):

    <AfterLayout Handler="item.getView().setScrollX(0);" />

    I found that removing both the paging toolbar component and row expander plug in stops the issue on chrome. So this is probably triggering due to the DOM changes they do to the page. I couldn't step by Ext.NET code that triggers the scrolling (in fact, it seems to occur in code I can't step-in with the debugger).

    We've logged this under #1490 and will update here as soon as the issue has any update or fix for it.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again!

    We've just fixed this issue and this problem should no longer happen if you build Ext.NET from sources that you can get from Github!

    We're looking forward to your feedback regarding this issue and the other (with adding a row to the grid), but we're very confident the fix addressed the issue for good.

    EDIT: this fix is expected to go public as of Ext.NET 4.3.0 release we have planned for the next few months to come.
  4. #4

    Github latest updated Package Link

    Dear fabricio,

    Please can you provide the latest EXT.NET source link from GitHub because we found that version 4.2.1 is updated 5 days ago.
    please confirm the path https://github.com/extnet/Archives .

    Thank you
  5. #5
    Hello @geovision!

    The archives repo stores only publicly released versions of Ext.NET.

    To get access to the latest sources you should get Ext.NET thru its main github repository. Information regarding it as URLs and access clearance should have been emailed to you at the time you purchased Ext.NET license. If you don't have these emails anymore, please mail us at support@ext.net so we can further help you getting access to the sources!

    In case you already have the github repo with Ext.NET sources cloned on your machine, all you have to do is a git pull then rebuild the project (either in debug or release mode -- notice when you build in Release mode it will take some more time to build as it will also build NuGet packages of the just-built version).

    Hope this helps!
    Last edited by fabricio.murta; Jun 02, 2017 at 11:16 AM.
  6. #6
    Dear Support,

    Kindly we are still waiting The SVN access permissions in order to Download the Above Fix.
    please your support is needed

    http://svn.ext.net/premium/trunk/
    Last edited by Geovision; Jun 06, 2017 at 8:03 AM.
  7. #7
    Hello @Geovision!

    Ext.NET 4 is not available in SVN. GitHub only. Besides, as per this forum thread, it seems you already have this issue sorted out, right?
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Hello,

    Thanks the problem is solved.
  9. #9
    Hello @Geovision!

    Awesome! Thank you very much for the feedback! We are very excited to hear that it worked well for you! Thanks for reporting the issue. We hope there's no more outstanding issues on your project regarding Ext.NET. But if there's, let us know, and we'll do our best to make it work!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] horizontale scroll in gridpanel when viewport RTL true
    By Geovision in forum 4.x Legacy Premium Help
    Replies: 5
    Last Post: May 31, 2017, 7:13 PM
  2. Replies: 2
    Last Post: Jan 13, 2017, 3:47 AM
  3. Replies: 1
    Last Post: Aug 26, 2015, 6:55 AM
  4. Replies: 5
    Last Post: Sep 30, 2013, 5:15 AM
  5. Replies: 5
    Last Post: Oct 17, 2012, 4:55 AM

Posting Permissions