[CLOSED] horizontale scroll in gridpanel when viewport RTL true

**Geovision** · Aug 22, 2016, 1:57 PM

Hello,
If I have a gridpanel in a viewport with RTL property set to TRUE. when trying to resize a column the alignment will be affected. the columns and teh data are not aligned anymore to each other untill clicking on the horizontal scroll bar.
is There any way to solve this.
Thank You.
(N.B): this issue was posted in a thread with an example but I cannot find my old posts.

**fabricio.murta** · Aug 22, 2016, 7:46 PM

Hello @Geovision!

When we determine a thread is a bug, we attach the issue id to the issue title and move it out to the Bugs thread.

I believe you are talking exactly about the same issue reported here on june 20th: GridPanel Horizontal scroll on columns resizing with RTL orientation Chrome Only.

We should concentrate updates on that thread. I'm sorry it was not solved yet, also sorry this way to organize threads and bug reports was confuse for you. I hope it is clearer now.

**Geovision** · May 30, 2017, 7:38 AM

Hello, this problem still persists in the two versions 4.2.0 and 4.2.1,

Please check this test case.


<%@ 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

**fabricio.murta** · May 30, 2017, 8:12 PM

Hello @geovision!

when trying to resize a column the alignment will be affected. the columns and teh data are not aligned anymore to each other untill clicking on the horizontal scroll bar.

Tried to resize columns behind and beyond viewport width, scrolled horizontally, and no issues here. Is there any additional instructions we shall follow in order to reproduce the issue?

**Geovision** · May 31, 2017, 6:14 AM

Hello,
The problem here is that the horizontal scroll on load of the gridpanel is on the left, it must be on the right because RTL true.
Please find attached the snapshot of this issue and note that it appears on Chrome only
Thank you

**fabricio.murta** · May 31, 2017, 7:13 PM

Hello @geovision!

The problem reported and covered on this forum thread is related to column header misalignment while scrolling. The problem you are pointing seems to be related to the RTL concept but does not affect columns alignment, just the initial grid scrollbar position.

I believe we can help you with this issue, but would ask you to open a new thread specific for this case so we keep the threads tidy. Hope you understand.

Thread: [CLOSED] horizontale scroll in gridpanel when viewport RTL true

Thread Tools

Search Thread

Display

[CLOSED] horizontale scroll in gridpanel when viewport RTL true

Problem persists in version 4.2.0 and 4.2.1

Similar Threads

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

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

ViewPort with Panel Chart and Scroll-Bar only in IE?

[CLOSED] Viewport with AutoScroll=True, doesn't draw GridPanel properly after a scroll (Chrome & Firefox only?)

[CLOSED] How to get Vertical scroll in GridPanel which is in Viewport with fit layout

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] horizontale scroll in gridpanel when viewport RTL true

[CLOSED] horizontale scroll in gridpanel when viewport RTL true

Problem persists in version 4.2.0 and 4.2.1

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us