[CLOSED] Grey box in the Top right corner of grid with roweditor when RTL is true and vertical scroll

  1. #1

    [CLOSED] Grey box in the Top right corner of grid with roweditor when RTL is true and vertical scroll

    Hello,

    I have a gridpanel with a roweditor, if this grid has a vertical scroll a Grey box in the top right corner of the grid appears while adding a new instance and a tooltip appears in the middle of the grid. This case is in chrome, IE, Edge.
    Please check this Test case 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>
            var addEmployee = function () {
                var grid = App.GridPanel1,
                    store = grid.getStore();
    
                grid.editingPlugin.cancelEdit();
    
                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, {
                    name: 'New Guy',
                    email: 'new@ext.net',
                    start: Ext.Date.clearTime(new Date()),
                    salary: 50000,
                    active: true
                });
    
                grid.editingPlugin.startEdit(0, 0);
            };
    
            var removeEmployee = function () {
                var grid = App.GridPanel1,
                    sm = grid.getSelectionModel(),
                    store = grid.getStore();
    
                grid.editingPlugin.cancelEdit();
                store.remove(sm.getSelection());
    
                if (store.getCount() > 0) {
                    sm.select(0);
                }
            };
        </script>
    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" ID="ResourceManager1" >
            </ext:ResourceManager>
    
            <ext:Viewport runat="server" ID="VP1" RTL="true" Layout="BorderLayout" >
                 <Items>
                      
             <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Frame="true"
                 Region="Center">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Sorters>
                            <ext:DataSorter Property="salary" />
                        </Sorters>
                        <Model>
                            <ext:Model runat="server" Name="Employee">
                                <Fields>
                                    <ext:ModelField Name="name" ServerMapping="Name" Type="String" />
                                    <ext:ModelField Name="email" ServerMapping="Email" Type="String" />
                                    <ext:ModelField Name="start" ServerMapping="Start" Type="Date" />
                                    <ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
                                    <ext:ModelField Name="active" ServerMapping="Active" Type="Boolean" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Plugins>
                    <ext:RowEditing runat="server" ClicksToMoveEditor="1" AutoCancel="false" />
                </Plugins>
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Add Employee" Icon="UserAdd">
                                <Listeners>
                                    <Click Fn="addEmployee" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button
                                ID="btnRemoveEmployee"
                                runat="server"
                                Text="Remove Employee"
                                Icon="UserDelete"
                                Disabled="true">
                                <Listeners>
                                    <Click Fn="removeEmployee" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <ColumnModel>
                    <Columns>
                        <ext:RowNumbererColumn runat="server" Width="25" />
                        <ext:Column runat="server"
                            Text="Name"
                            DataIndex="name"
                            Flex="1">
                            <Editor>
                                <ext:TextField runat="server" AllowBlank="false" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" Text="Email" DataIndex="email" Width="160">
                            <Editor>
                                <ext:TextField runat="server" AllowBlank="false" Vtype="email" />
                            </Editor>
                        </ext:Column>
                        <ext:DateColumn runat="server"
                            Text="Start Date"
                            DataIndex="start"
                            Format="MM/dd/yyyy"
                            Width="100">
                            <Editor>
                                <ext:DateField
                                    runat="server"
                                    AllowBlank="false"
                                    Format="MM/dd/yyyy"
                                    MinDate="01.01.2006"
                                    MinText="Can not have a start date before the Company existed."
                                    MaxDate="<%# DateTime.Now %>"
                                    AutoDataBind="true"
                                    />
                            </Editor>
                        </ext:DateColumn>
                        <ext:NumberColumn
                            runat="server"
                            Text="Salary"
                            DataIndex="salary"
                            Format="$0,0"
                            Align="Center">
                            <Editor>
                                <ext:NumberField
                                    runat="server"
                                    AllowBlank="false"
                                    MinValue="1"
                                    MaxValue="150000"
                                    />
                            </Editor>
                        </ext:NumberColumn>
                        <ext:CheckColumn
                            runat="server"
                            Text="Active?"
                            DataIndex="active"
                            Width="75">
                            <Editor>
                                <ext:Checkbox runat="server" Cls="x-grid-checkheader-editor" />
                            </Editor>
                        </ext:CheckColumn>
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <SelectionChange Handler="App.btnRemoveEmployee.setDisabled(!selected.length);" />
                </Listeners>
            </ext:GridPanel>
                </Items>
            </ext:Viewport>
            
    
          
        </form>
    
    
    </body>
    </html>
     protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                    Store store = this.GridPanel1.GetStore();
    
                    store.DataSource = new List<object>
                {
                    new {
                        Name = "Bill Foot",
                        Email = "bill.foot@ext.net",
                        Start = new DateTime(2007, 2, 5),
                        Salary = 37000,
                        Active = true
                    },
                    new {
                        Name = "Bill Little",
                        Email = "bill.little@ext.net",
                        Start = new DateTime(2009, 6, 13),
                        Salary = 53000,
                        Active = true
                    },
                    new {
                        Name = "Bob Jones",
                        Email = "bob.jones@ext.net",
                        Start = new DateTime(2008, 10, 6),
                        Salary = 70000,
                        Active = true
                    },
                    new {
                        Name = "Bob Train",
                        Email = "bob.train@ext.net",
                        Start = new DateTime(2009, 5, 5),
                        Salary = 68000,
                        Active = true
                    },
                    new {
                        Name = "Chris Johnson",
                        Email = "chris.johnson@ext.net",
                        Start = new DateTime(2009, 1, 25),
                        Salary = 47000,
                        Active = true
                    },
                     new {
                        Name = "Bill Foot",
                        Email = "bill.foot@ext.net",
                        Start = new DateTime(2007, 2, 5),
                        Salary = 37000,
                        Active = true
                    },
                    new {
                        Name = "Bill Little",
                        Email = "bill.little@ext.net",
                        Start = new DateTime(2009, 6, 13),
                        Salary = 53000,
                        Active = true
                    },
                    new {
                        Name = "Bob Jones",
                        Email = "bob.jones@ext.net",
                        Start = new DateTime(2008, 10, 6),
                        Salary = 70000,
                        Active = true
                    },
                    new {
                        Name = "Bob Train",
                        Email = "bob.train@ext.net",
                        Start = new DateTime(2009, 5, 5),
                        Salary = 68000,
                        Active = true
                    },
                    new {
                        Name = "Chris Johnson",
                        Email = "chris.johnson@ext.net",
                        Start = new DateTime(2009, 1, 25),
                        Salary = 47000,
                        Active = true
                    },
                     new {
                        Name = "Bill Foot",
                        Email = "bill.foot@ext.net",
                        Start = new DateTime(2007, 2, 5),
                        Salary = 37000,
                        Active = true
                    },
                    new {
                        Name = "Bill Little",
                        Email = "bill.little@ext.net",
                        Start = new DateTime(2009, 6, 13),
                        Salary = 53000,
                        Active = true
                    },
                    new {
                        Name = "Bob Jones",
                        Email = "bob.jones@ext.net",
                        Start = new DateTime(2008, 10, 6),
                        Salary = 70000,
                        Active = true
                    },
                    new {
                        Name = "Bob Train",
                        Email = "bob.train@ext.net",
                        Start = new DateTime(2009, 5, 5),
                        Salary = 68000,
                        Active = true
                    },
                    new {
                        Name = "Chris Johnson",
                        Email = "chris.johnson@ext.net",
                        Start = new DateTime(2009, 1, 25),
                        Salary = 47000,
                        Active = true
                    },
                     new {
                        Name = "Bill Foot",
                        Email = "bill.foot@ext.net",
                        Start = new DateTime(2007, 2, 5),
                        Salary = 37000,
                        Active = true
                    },
                    new {
                        Name = "Bill Little",
                        Email = "bill.little@ext.net",
                        Start = new DateTime(2009, 6, 13),
                        Salary = 53000,
                        Active = true
                    },
                    new {
                        Name = "Bob Jones",
                        Email = "bob.jones@ext.net",
                        Start = new DateTime(2008, 10, 6),
                        Salary = 70000,
                        Active = true
                    },
                    new {
                        Name = "Bob Train",
                        Email = "bob.train@ext.net",
                        Start = new DateTime(2009, 5, 5),
                        Salary = 68000,
                        Active = true
                    },
                    new {
                        Name = "Chris Johnson",
                        Email = "chris.johnson@ext.net",
                        Start = new DateTime(2009, 1, 25),
                        Salary = 47000,
                        Active = true
                    },
                     new {
                        Name = "Bill Foot",
                        Email = "bill.foot@ext.net",
                        Start = new DateTime(2007, 2, 5),
                        Salary = 37000,
                        Active = true
                    },
                    new {
                        Name = "Bill Little",
                        Email = "bill.little@ext.net",
                        Start = new DateTime(2009, 6, 13),
                        Salary = 53000,
                        Active = true
                    },
                    new {
                        Name = "Bob Jones",
                        Email = "bob.jones@ext.net",
                        Start = new DateTime(2008, 10, 6),
                        Salary = 70000,
                        Active = true
                    },
                    new {
                        Name = "Bob Train",
                        Email = "bob.train@ext.net",
                        Start = new DateTime(2009, 5, 5),
                        Salary = 68000,
                        Active = true
                    },
                    new {
                        Name = "Chris Johnson",
                        Email = "chris.johnson@ext.net",
                        Start = new DateTime(2009, 1, 25),
                        Salary = 47000,
                        Active = true
                    },
                     new {
                        Name = "Bill Foot",
                        Email = "bill.foot@ext.net",
                        Start = new DateTime(2007, 2, 5),
                        Salary = 37000,
                        Active = true
                    },
                    new {
                        Name = "Bill Little",
                        Email = "bill.little@ext.net",
                        Start = new DateTime(2009, 6, 13),
                        Salary = 53000,
                        Active = true
                    },
                    new {
                        Name = "Bob Jones",
                        Email = "bob.jones@ext.net",
                        Start = new DateTime(2008, 10, 6),
                        Salary = 70000,
                        Active = true
                    },
                    new {
                        Name = "Bob Train",
                        Email = "bob.train@ext.net",
                        Start = new DateTime(2009, 5, 5),
                        Salary = 68000,
                        Active = true
                    },
                    new {
                        Name = "Chris Johnson",
                        Email = "chris.johnson@ext.net",
                        Start = new DateTime(2009, 1, 25),
                        Salary = 47000,
                        Active = true
                    },
                     new {
                        Name = "Bill Foot",
                        Email = "bill.foot@ext.net",
                        Start = new DateTime(2007, 2, 5),
                        Salary = 37000,
                        Active = true
                    },
                    new {
                        Name = "Bill Little",
                        Email = "bill.little@ext.net",
                        Start = new DateTime(2009, 6, 13),
                        Salary = 53000,
                        Active = true
                    },
                    new {
                        Name = "Bob Jones",
                        Email = "bob.jones@ext.net",
                        Start = new DateTime(2008, 10, 6),
                        Salary = 70000,
                        Active = true
                    },
                    new {
                        Name = "Bob Train",
                        Email = "bob.train@ext.net",
                        Start = new DateTime(2009, 5, 5),
                        Salary = 68000,
                        Active = true
                    },
                    new {
                        Name = "Chris Johnson",
                        Email = "chris.johnson@ext.net",
                        Start = new DateTime(2009, 1, 25),
                        Salary = 47000,
                        Active = true
                    },
                     new {
                        Name = "Bill Foot",
                        Email = "bill.foot@ext.net",
                        Start = new DateTime(2007, 2, 5),
                        Salary = 37000,
                        Active = true
                    },
                    new {
                        Name = "Bill Little",
                        Email = "bill.little@ext.net",
                        Start = new DateTime(2009, 6, 13),
                        Salary = 53000,
                        Active = true
                    },
                    new {
                        Name = "Bob Jones",
                        Email = "bob.jones@ext.net",
                        Start = new DateTime(2008, 10, 6),
                        Salary = 70000,
                        Active = true
                    },
                    new {
                        Name = "Bob Train",
                        Email = "bob.train@ext.net",
                        Start = new DateTime(2009, 5, 5),
                        Salary = 68000,
                        Active = true
                    },
                    new {
                        Name = "Chris Johnson",
                        Email = "chris.johnson@ext.net",
                        Start = new DateTime(2009, 1, 25),
                        Salary = 47000,
                        Active = true
                    },
                     new {
                        Name = "Bill Foot",
                        Email = "bill.foot@ext.net",
                        Start = new DateTime(2007, 2, 5),
                        Salary = 37000,
                        Active = true
                    },
                    new {
                        Name = "Bill Little",
                        Email = "bill.little@ext.net",
                        Start = new DateTime(2009, 6, 13),
                        Salary = 53000,
                        Active = true
                    },
                    new {
                        Name = "Bob Jones",
                        Email = "bob.jones@ext.net",
                        Start = new DateTime(2008, 10, 6),
                        Salary = 70000,
                        Active = true
                    },
                    new {
                        Name = "Bob Train",
                        Email = "bob.train@ext.net",
                        Start = new DateTime(2009, 5, 5),
                        Salary = 68000,
                        Active = true
                    },
                    new {
                        Name = "Chris Johnson",
                        Email = "chris.johnson@ext.net",
                        Start = new DateTime(2009, 1, 25),
                        Salary = 47000,
                        Active = true
                    }
                };
                }
            }

    Thank you
    Attached Thumbnails Click image for larger version. 

Name:	Capture.jpg 
Views:	80 
Size:	98.6 KB 
ID:	24963   Click image for larger version. 

Name:	Capture2.PNG 
Views:	116 
Size:	98.9 KB 
ID:	24964  
    Last edited by fabricio.murta; Jul 14, 2017 at 5:15 PM. Reason: no feedback from the user in 7+ days
  2. #2
    Hello @Geovision!

    Sorry for this one more problem with RTL.

    Can you check adding the following to your page and let us know if it solves your problem? I couldn't reproduce that glitch in the middle of the page from your second shot.

    Ext.define('Ext.grid.plugin.RowEditing', {
        override: 'Ext.grid.plugin.RowEditing',
        startEdit: function (record, columnHeader) {
            var me = this;
    
            me.callParent(arguments);
    
            me.getEditor().setX(1);
        }
    });
    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello,

    I tried to add the override method but it didn't solve the case. you can check it in the sample code. and If you click on this grey box you will see the tooltip in the middle of the grid. it may be not clear enough in this example but in my application as shown in the screenshot it is clear to the user.
    But I remarked that now it is appearing only on first time when you click add, second time it will not appear.

    Thank you.
    Attached Thumbnails Click image for larger version. 

Name:	Capture2.PNG 
Views:	68 
Size:	21.8 KB 
ID:	24967   Click image for larger version. 

Name:	Capture.PNG 
Views:	108 
Size:	99.8 KB 
ID:	24968  
  4. #4
    Hello @Geovision!

    The override provided should move the row editor left from the scrollbar instead of showing it over the scrollbar. It is very strange it didn't work for you. Maybe you added the override to the wrong place and it is not being executed at all?

    As for the strange pop up, I still can't reproduce it. No matter how I click, hover, or pass the mouse by the first column, row numberer, it does not trigger any tooltip, pop-up, nor any artifact close or far to the row editor's 'update/cancel' buttons, not anywhere at all.

    There must be something else that's triggering this. I suggest you use your test case on a clean project. I see by your screenshots that you have some custom settings on your Web.config that at least changes the default theme, so in potential there may be other settings biasing the results I get from the ones you do.

    As for the override, here's an example with where you should add them. This is basically the same example, I just shortened the code with the sample data inside a loop and removed some page artifacts I deemed unrelated to the issue (at least you didn't mention using them at any point here).

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
    
                var data = new List<object>();
    
                for (var i = 1; i <= 50; i++)
                {
                    data.Add(new
                    {
                        Name = "Name " + i.ToString(),
                        Email = "mail" + i.ToString() + "@ext.net",
                        Start = DateTime.Now.AddDays(i * (-1)).AddMonths(i * (-1)),
                        Salary = 1234 * ( (i%6) + 1 ),
                        Active = (i%7 == 0) ? true : false
                    });
                };
    
                Store1.DataSource = data;
            }
        }
    </script>
    
    <!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>
            Ext.define('Ext.grid.plugin.RowEditing', {
                override: 'Ext.grid.plugin.RowEditing',
                startEdit: function (record, columnHeader) {
                    var me = this;
    
                    me.callParent(arguments);
    
                    me.getEditor().setX(1);
                }
            });
        </script>
    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" ID="ResourceManager1" />
    
            <ext:Viewport runat="server" ID="VP1" RTL="true" Layout="FitLayout">
                <Items>
                    <ext:GridPanel
                        ID="GridPanel1"
                        runat="server"
                        Frame="true"
                        >
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Sorters>
                                    <ext:DataSorter Property="salary" />
                                </Sorters>
                                <Model>
                                    <ext:Model runat="server" Name="Employee">
                                        <Fields>
                                            <ext:ModelField Name="name" ServerMapping="Name" Type="String" />
                                            <ext:ModelField Name="email" ServerMapping="Email" Type="String" />
                                            <ext:ModelField Name="start" ServerMapping="Start" Type="Date" />
                                            <ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
                                            <ext:ModelField Name="active" ServerMapping="Active" Type="Boolean" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ViewConfig runat="server" RTL="true" />
                        <Plugins>
                            <ext:RowEditing runat="server" ClicksToMoveEditor="1" AutoCancel="false" />
                        </Plugins>
                        <ColumnModel>
                            <Columns>
                                <ext:RowNumbererColumn runat="server" Width="25" />
                                <ext:Column runat="server"
                                    Text="Name"
                                    DataIndex="name"
                                    Flex="1">
                                    <Editor>
                                        <ext:TextField runat="server" AllowBlank="false" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column runat="server" Text="Email" DataIndex="email" Width="160">
                                    <Editor>
                                        <ext:TextField runat="server" AllowBlank="false" Vtype="email" />
                                    </Editor>
                                </ext:Column>
                                <ext:DateColumn runat="server"
                                    Text="Start Date"
                                    DataIndex="start"
                                    Format="MM/dd/yyyy"
                                    Width="100">
                                    <Editor>
                                        <ext:DateField
                                            runat="server"
                                            AllowBlank="false"
                                            Format="MM/dd/yyyy"
                                            MinDate="01.01.2006"
                                            MinText="Can not have a start date before the Company existed."
                                            MaxDate="<%# DateTime.Now %>"
                                            AutoDataBind="true" />
                                    </Editor>
                                </ext:DateColumn>
                                <ext:NumberColumn
                                    runat="server"
                                    Text="Salary"
                                    DataIndex="salary"
                                    Format="$0,0"
                                    Align="Center">
                                    <Editor>
                                        <ext:NumberField
                                            runat="server"
                                            AllowBlank="false"
                                            MinValue="1"
                                            MaxValue="150000" />
                                    </Editor>
                                </ext:NumberColumn>
                                <ext:CheckColumn
                                    runat="server"
                                    Text="Active?"
                                    DataIndex="active"
                                    Width="75">
                                    <Editor>
                                        <ext:Checkbox runat="server" Cls="x-grid-checkheader-editor" />
                                    </Editor>
                                </ext:CheckColumn>
                            </Columns>
                        </ColumnModel>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Please check this, preferably in a clean, fresh project, and let us know if you still have the same problems. At least from that you should get screenshots reflecting what I also see here. If a specific theme is required to reproduce the issue, please specify it on the ResourceManager block.
    Last edited by fabricio.murta; Jun 01, 2017 at 6:25 PM. Reason: clean up the test case
  5. #5
    Hello @Geovision!

    In the case you are using the Gray theme, this override should work better for you:

    Ext.define('Ext.grid.RowEditor', {
        override: 'Ext.grid.RowEditor',
        startEdit: function (record, columnHeader) {
            var me = this;
    
            me.callParent(arguments);
    
            if (me.rtl && me.view) {
                var scroller = me.view.getScrollable();
    
                if (scroller && scroller.getMaxPosition().y > 0) {
                    me.wrapEl.setStyle('left', '22px');
                    me.el.setStyle('clip', '');
                }
            }
        }
    });
    But still, I don't see the tooltip in the middle of the grid. There should be something in particular that needs to be done in order for that to display...
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Hello @geovision!

    It's been some time since we last posted here and still no feedback from you... Any thoughts about how could we reproduce your issue with the gray box? We tried several ways for no avail. Have you had the chance to test the provided code sample in a clean project and see if the block appears? Maybe the override provided fixes that as well, but hard to say, your feedback would be essential for us to determine the issue here.

    Well, but if you no longer need assistance with this, let us know. We may mark this thread as closed if you provide no feedback in 7+ days from now, but that will not prevent you from posting a follow-up when you are able to.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Data Grid vertical scroll problem on Chrome
    By Geovision in forum 4.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 14, 2016, 9:38 PM
  2. Grid with vertical scroll in single column
    By Sangeeta in forum 2.x Help
    Replies: 0
    Last Post: Apr 23, 2015, 5:39 AM
  3. Replies: 8
    Last Post: Jun 06, 2013, 1:42 PM
  4. [CLOSED] Vertical scroll bar issue in Tree grid for FireFox only
    By Aparna_B in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 25, 2013, 9:52 AM
  5. Replies: 6
    Last Post: Mar 13, 2012, 11:30 AM

Posting Permissions