[FIXED] [#1281] [3.3.0] [4.0.0-beta] GridPanel with Row Editor Horizontal Scroll when RTL is true

**Geovision** · Mar 09, 2016, 1:55 PM

Hello,

I have a GridPanel with direction from right to left (RTL="true") with Row Editor.
When begin editing a row, a weird behavior of the GridPanel horizontal scroll is appeared, the columns are fixed and the Rows are not fixed to the columns.
Please see the attached picture to know the problem.

**fabricio.murta** · Mar 10, 2016, 12:50 PM

Hello @Geovision!

I couldn't reproduce your issue just by adding a RowEditor to a RTL grid. Can you provide a test case reproducing your issue so we can advice you how to deal with the problem, or determine if there's something you are using that triggers a bug?

**Geovision** · Mar 10, 2016, 1:14 PM

hello,

here is a test case and please find attached screenshots before scrolling and after scrolling horizontally

aspx page:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

  <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 + "%");
      }




      //Add a new empty row to the grid and starts editing from the first field.
      var addEmployee = function () {

                          var grid = App.GridPanel1;
                          store = grid.getStore();


                          store.getSorters().removeAll(); // We have to remove sorting to avoid auto-sorting on insert
                          grid.getView().headerCt.setSortState(); // To update columns sort UI

                          store.insert(0, {});

                          grid.editingPlugin.startEdit(0, 0);
                  

      };
      //End addEmployee


      //Remove selected roe from the grid
      var removeEmployee = function () {

          var grid = App.GridPanel1,
       sm = grid.getSelectionModel();

          grid.editingPlugin.cancelEdit();
          grid.store.remove(sm.getSelection());
          if (grid.store.getCount() > 0) {
              sm.select(0);
          }

      };
      //End removeEmployee

    </script>
</head>
<body>
    <form id="form1" runat="server">
     <ext:ResourceManager ID="ResourceManager1" runat="server" ShowWarningOnAjaxFailure="false"/>


            <ext:GridPanel ID="GridPanel1" runat="server" RTL="true" AutoScroll="true" Title="Grid Row Editor" InvalidateScrollerOnRefresh="false"  >
               <Store>
                <ext:Store ID="Store1" runat="server" PageSize="15">
                    <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="Size" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                <ext:ModelField Name="industry" />
                                <ext:ModelField Name="desc" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column ID="CompanyColumn" runat="server" Text="Company" DataIndex="company" Width="400">
                            <Filter>
                                <ext:StringFilter />
                            </Filter>
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" Text="Price" DataIndex="Price" Width="250">
                            <Renderer Format="UsMoney" />
                            <Filter>
                                <ext:NumberFilter />
                            </Filter>
                            <Editor>
                                <ext:NumberField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" DataIndex="change" Width="250">
                        <Renderer Fn="change" />
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" Text="Size" DataIndex="Size" Width="250">
                            <Filter>
                                <ext:ListFilter DataIndex="Size"/>
                            </Filter>
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:DateColumn runat="server" Text="Date" DataIndex="lastChange" Align="Center" Format="M/d hh:mmtt" Width="250">
                            <Filter>
                                <ext:DateFilter>
                                    <DatePickerOptions runat="server" TodayText="Now" />
                                </ext:DateFilter>
                            </Filter>
                            <Editor>
                                <ext:DateField runat="server" />
                            </Editor>
                        </ext:DateColumn>
                           <ext:Column runat="server" Text="industry" DataIndex="industry" Width="250">
                            <Filter>
                                <ext:ListFilter DataIndex="industry"/>
                            </Filter>
                               <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:GridFilters runat="server" />
                    <ext:RowEditing runat="server" ClicksToMoveEditor="1" AutoCancel="false" />
                </Plugins>
                <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Add" Icon="UserAdd">
                            <Listeners>
                                <Click Fn="addEmployee" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button ID="btnRemoveEmployee" runat="server" Text="Delete" Icon="UserDelete" >
                            <Listeners>
                                <Click Fn="removeEmployee" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>      
                <BottomBar>
                    <ext:PagingToolbar runat="server"  RefreshHandler="App.direct.RefreshGrid();">
            
                    </ext:PagingToolbar>
                </BottomBar>
            </ext:GridPanel>


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

code behind page (cs)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;

namespace FFMS
{
    public partial class FilterTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, "Large", "9/1 12:00am", "Manufacturing" },
                new object[] { "Alcoa Inc", 29.01, 0.42, "Extra-Large", "9/1 12:00am", "Manufacturing" },
                new object[] { "Altria Group Inc", 83.81, 0.28, "small", "9/1 12:00am", "Manufacturing" },
                new object[] { "American Express Company", 52.55, 0.01, "Large", "9/1 12:00am", "Finance" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, "Large", "9/1 12:00am", "Services" },
                new object[] { "AT&T Inc.", 31.61, -0.48, "small", "9/1 12:00am", "Services" },
                new object[] { "Boeing Co.", 75.43, 0.53, "Large", "9/1 12:00am", "Manufacturing" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, "Large", "9/1 12:00am", "Services" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, "Extra-Large", "9/1 12:00am", "Finance" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, "Extra-Large", "9/1 12:00am", "Manufacturing" },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, "small", "9/1 12:00am", "Manufacturing" },
                new object[] { "General Electric Company", 34.14, -0.08, "small", "9/1 12:00am", "Manufacturing" },
                new object[] { "General Motors Corporation", 30.27, 1.09, "Large", "9/1 12:00am", "Automotive" },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, "small", "9/1 12:00am", "Computer" },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, "medium", "9/1 12:00am", "Manufacturing" },
                new object[] { "Intel Corporation", 19.88, 0.31, "Large", "9/1 12:00am", "Computer" },
                new object[] { "International Business Machines", 81.41, 0.44, "medium", "9/1 12:00am", "Computer" },
                new object[] { "Johnson & Johnson", 64.72, 0.06, "small", "9/1 12:00am", "Medical" },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, "small", "9/1 12:00am", "Finance" },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, "Large", "9/1 12:00am", "Food" },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, "Large", "9/1 12:00am", "Medical" },
                new object[] { "Microsoft Corporation", 25.84, 0.14, "medium", "9/1 12:00am", "Computer" },
                new object[] { "Pfizer Inc", 27.96, 0.4, "Large", "9/1 12:00am", "Medical" },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, "Large", "9/1 12:00am", "Food" },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, "Large", "9/1 12:00am", "Retail" },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, "small", "9/1 12:00am", "Manufacturing" },
                new object[] { "United Technologies Corporation", 63.26, 0.55, "medium", "9/1 12:00am", "Computer" },
                new object[] { "Verizon Communications", 35.57, 0.39, "Large", "9/1 12:00am", "Services" },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, "Large", "9/1 12:00am", "Retail" }
            };

                this.Store1.DataBind();
            }
        }



        [DirectMethod]
        public void RefreshGrid()
        {
             this.Store1.DataSource = new object[]
            {
                new object[] { "New Company 1", 11.52, 0.1, "Large", "9/1 12:00am", "Manufacturing" },
                new object[] { "New Company 2", 71.72, 0.02, "small", "9/1 12:00am", "Computer" },
                new object[] { "New Company 3", 54.72, 5.4, "Extra-Large", "9/1 12:00am", "Manufacturing" },
                new object[] { "3m Co", 71.72, 0.02, "Large", "9/1 12:00am", "Manufacturing" },
                new object[] { "Alcoa Inc", 29.01, 0.42, "Extra-Large", "9/1 12:00am", "Manufacturing" },
                new object[] { "Altria Group Inc", 83.81, 0.28, "small", "9/1 12:00am", "Manufacturing" },
                new object[] { "American Express Company", 52.55, 0.01, "Large", "9/1 12:00am", "Finance" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, "Large", "9/1 12:00am", "Services" },
                new object[] { "AT&T Inc.", 31.61, -0.48, "small", "9/1 12:00am", "Services" },
                new object[] { "Boeing Co.", 75.43, 0.53, "Large", "9/1 12:00am", "Manufacturing" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, "Large", "9/1 12:00am", "Services" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, "Extra-Large", "9/1 12:00am", "Finance" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, "Extra-Large", "9/1 12:00am", "Manufacturing" },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, "small", "9/1 12:00am", "Manufacturing" },
                new object[] { "General Electric Company", 34.14, -0.08, "small", "9/1 12:00am", "Manufacturing" },
                new object[] { "General Motors Corporation", 30.27, 1.09, "Large", "9/1 12:00am", "Automotive" },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, "small", "9/1 12:00am", "Computer" },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, "medium", "9/1 12:00am", "Manufacturing" },
                new object[] { "Intel Corporation", 19.88, 0.31, "Large", "9/1 12:00am", "Computer" },
                new object[] { "International Business Machines", 81.41, 0.44, "medium", "9/1 12:00am", "Computer" },
                new object[] { "Johnson & Johnson", 64.72, 0.06, "small", "9/1 12:00am", "Medical" },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, "small", "9/1 12:00am", "Finance" },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, "Large", "9/1 12:00am", "Food" },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, "Large", "9/1 12:00am", "Medical" },
                new object[] { "Microsoft Corporation", 25.84, 0.14, "medium", "9/1 12:00am", "Computer" },
                new object[] { "Pfizer Inc", 27.96, 0.4, "Large", "9/1 12:00am", "Medical" },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, "Large", "9/1 12:00am", "Food" },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, "Large", "9/1 12:00am", "Retail" },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, "small", "9/1 12:00am", "Manufacturing" },
                new object[] { "United Technologies Corporation", 63.26, 0.55, "medium", "9/1 12:00am", "Computer" },
                new object[] { "Verizon Communications", 35.57, 0.39, "Large", "9/1 12:00am", "Services" },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, "Large", "9/1 12:00am", "Retail" }
            };

                this.Store1.DataBind();
            
        }


    }
}

**fabricio.murta** · Mar 10, 2016, 3:44 PM

Hello @Geovision!

Thanks for awesome test case! I could reproduce the issue here on Chrome. If using Internet Explorer, the issue does not happen.

When I was first researching your report I found an open issue on the underlying ExtJS framework open since december 2014 but wasn't sure it was the case. It turned out your problem is pretty much that one, unfortunately!

Maybe a good idea for now is stick with cell editor plugin, we don't have a workaround for the issue right now, and it will require some investigation as for why it does not work just in chrome and works well in IE11.

More details on the issue we opened under #1281 in our bug tracker.

**fabricio.murta** · Apr 28, 2016, 7:15 PM

Hello!

I have just noticed that, in your sample code, if you surrounded your gridPanel (in your actual page any Ext.NET components will have to be inside this!) in a ViewPort, then it will work fine!

<ext:Viewport runat="server" RTL="true" Layout="FitLayout">
    <Items>
        (your gridpanel and components here)
    </Items>
</ext:Viewport>

That is valid for the latest Ext.NET version though - we tested this on the upcoming Ext.NET 4.1.0.

As for Ext.NET 3.3.0, using this same approach improves the result -- as the column header now will follow the columns correctly when horizontal scrolling. But the editor fields will still scroll in the wrong direction.

We will be analyzing if it is feasible to bring the 4.x fix back to 3.x versions, but if breaking changes are required, this could mean a problem for everyone.

**Daniil** · Apr 28, 2016, 9:57 PM

@Geovision, to fix the problem with Ext.NET v3 please add this override into the page's <head>:

<script>
    Ext.scroll.Scroller.override({
        privates: {
            onPartnerScroll: function (partner, x, y) {
                var axis = partner._partners[this.getId()].axis;

                if (axis) {
                    if (axis === 'x') {
                        y = null;
                    } else if (axis === 'y') {
                        x = null;
                    }
                }

                // Workaround for RTL RowEditor
                if (this.component instanceof Ext.grid.RowEditor && this.component.rtl) {
                    this.getElement().dom.scrollLeft = x;

                    return;
                }

                this.doScrollTo(x, y, false, true);
            }
        }
    });
</script>

**Geovision** · Jun 02, 2016, 12:20 PM

Hello,
By upgrading to 4.1 if you test this example without using the scroll overide function and click add new row you will see that the horizontal scroll is fixed but not aligned correctly to header.
Otherwise by adding the scroll override function you will notice that the horizontale scroll is crashing even without adding a new row.
Please test the same example given in the previous reply.

Thank you

**fabricio.murta** · Jun 02, 2016, 3:49 PM

Hello @Geovision!

I'm sorry but although the new version improved a little the handling of this feature, it still does not fix it, and seems there's no current fix nor workaround for this, unfortunately.

**Geovision** · Jun 03, 2016, 9:39 AM

Dear Support,

what are you suggesting , the problem is serious and this will affect our production deployment.
Knowing that this issue do not appear on IE.

whats the difference between IE and Chrome?

Thank You

**fabricio.murta** · Jun 03, 2016, 3:00 PM

Hello @Geovision!

Sorry about the urgent matter, but although it may sound contradictory, different browsers really treat same things differently. Unfortunately there are not just one but several parts of Ext.NET where specialized code must be run depending on the current client browser.

It seems the problem is not easy to be fixed and may require a major change in the code (or may not!). So far we couldn't come up with a workaround to make it work for you at least, until a final fix is released, but we will update here as soon as we have news to share about this defect.

Thread: [FIXED] [#1281] [3.3.0] [4.0.0-beta] GridPanel with Row Editor Horizontal Scroll when RTL is true

Thread Tools

Search Thread

Display

[FIXED] [#1281] [3.3.0] [4.0.0-beta] GridPanel with Row Editor Horizontal Scroll when RTL is true

Critical Issue

Similar Threads

[FIXED] [#1347] [3.3.0] [4.1.0] GridPanel Horizontal scroll on columns resizing with RTL orientation Chrome Only

[CLOSED] Reply to thread: GridPanel with Row Editor Horizontal Scroll when RTL is true

[FIXED] [#385] [2.x] there is a horizontal scroll bar in nested gridpanel ?

[FIXED] [#1290] [3.3.0/4.0.0-beta] Maintain GridPanel Scroll position after refresh

No Horizontal Scroll bar in GridPanel

Posting Permissions

Sitemap

Downloads

Resources

Thread: [FIXED] [#1281] [3.3.0] [4.0.0-beta] GridPanel with Row Editor Horizontal Scroll when RTL is true

[FIXED] [#1281] [3.3.0] [4.0.0-beta] GridPanel with Row Editor Horizontal Scroll when RTL is true

Critical Issue

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us