[CLOSED] Column alignment with scrollbars in GridPanel

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Column alignment with scrollbars in GridPanel



    The problem happens within a GridPanel... to reproduce the problem, have say 4 or 5 ext:Column(s) too wide for the viewable area, ie. larger column width than the "Width" property of the GridPanel itself, thus producing a horizontal scroll bar at the bottom. Then, have more items in the list than the viewable area (or height), producing a vertical scroll bar, so both scroll bars are visible.


    What happens next, scroll to the right, as you hit the end of the last column on the far right "headers" -> the "items" in the list will be shoved to the left out of position/alignment about exactly the width of the vertical scroll bar.
  2. #2

    RE: [CLOSED] Column alignment with scrollbars in GridPanel

    Hi,

    Can you update from SVN and retest again?
    Last edited by geoffrey.mcgill; Apr 26, 2016 at 1:22 AM.
  3. #3

    RE: [CLOSED] Column alignment with scrollbars in GridPanel

    I did that, now I have 0.8.0 I hope you guys push to get a public release of the latest because of the new dependencies on Coolite.Utilities.dll, etc. and what is Newtonsoft.Json? Is it freeware/licensed/included within your license?

    By the way it is still doing the same column craziness, it only happens on the far right, then when you scroll back it readjusts itself again (it is the width of the vertical scroll bar)... here's some code, just insert into a basic html page:

    <script type="text/javascript"></p>
    
    
    var customDate = function(value) {</p>
    
    
    if (value == 'Tue Jan 1 00:00:00 EST 1901') { </p>
    
    
    return '';</p>
    
    
    } else {</p>
    
    
    return Ext.util.Format.date(value, 'd/m/Y');</p>
    
    
    }</p>
    
    
    }</p>
    
    
    var customLongDate = function(value) {</p>
    
    
    if (value == 'Tue Jan 1 00:00:00 EST 1901') { </p>
    
    
    return '';</p>
    
    
    } else {</p>
    
    
    return Ext.util.Format.date(value, 'd/m/Y');</p>
    
    
    }</p>
    
    
    }</p>
    
    
    </script></p>
    
    
    
    <script runat="server"></p>
    
    
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load</p>
    
    
    If (Ext.IsAjaxRequest = False) Then</p>
    
    
    </p>
    
    
    stoPostingType.DataSource = New Object() { _</p>
    
    
    New Object() {"G", "C", "2009-01-27T00:00:00", "", "General", "G?n?ral", "", "bmagyar", "2009-01-27T10:05:09"}, _</p>
    
    
    New Object() {"S", "C", "2009-01-27T00:00:00", "", "Specific Course", "Reli? ? un cours", "", "bmagyar", "2009-01-27T13:05:09"}, _</p>
    
    
    New Object() {"R", "C", "2009-01-27T00:00:00", "", "Research", "Recherche", "", "bmagyar", "2009-01-27T13:05:09"}, _</p>
    
    
    New Object() {"R", "A", "2009-01-27T00:00:00", "", "Regular", "R?gulier", "", "bmagyar", "2009-01-27T13:05:09"}, _</p>
    
    
    New Object() {"I", "A", "2009-01-27T00:00:00", "", "Irregular", "Irr?gulier", "", "bmagyar", "2009-01-27T13:05:09"}, _</p>
    
    
    New Object() {"E", "A", "2009-01-27T00:00:00", "", "Emergency", "Urguence", "", "bmagyar", "2009-01-27T13:05:09"} _</p>
    
    
    }</p>
    
    
    Me.stoPostingType.DataBind()</p>
    
    
    </p>
    
    
    
    </p>
    
    </p>
    
    
    </p>End If
    
    </p>
    
    
    End Sub</p>
    
    
    </script> </p>
    
    
    
    
    <ext:ScriptManager ID="ScriptManager1" runat="server" /></p>
    
    
    </p>
    
    
    <ext:Store ID="stoPostingType" runat="server"></p>
    
    
    <Reader></p>
    
    
    <ext:ArrayReader ReaderID="ID"></p>
    
    
    <Fields></p>
    
    
    <ext:RecordField Name="PostingTypeCode" /></p>
    
    
    <ext:RecordField Name="FormCode" /></p>
    
    
    <ext:RecordField Name="StartDate" Type="Date" /></p>
    
    
    <ext:RecordField Name="EndDate" Type="Date" /></p>
    
    
    <ext:RecordField Name="EnglishDescription" /></p>
    
    
    <ext:RecordField Name="FrenchDescription" /></p>
    
    
    <ext:RecordField Name="BilingualDescription" /></p>
    
    
    <ext:RecordField Name="UpdateUserID" /></p>
    
    
    <ext:RecordField Name="UpdateTimestamp" Type="Date" /></p>
    
    
    </Fields></p>
    
    
    </ext:ArrayReader></p>
    
    
    </Reader></p>
    
    
    </ext:Store></p>
    
    
    
    
    <ext:GridPanel runat="server" ID="GridPanel3" Title="Posting Types" Frame="true" </p>
    
    
    StoreID="stoPostingType" Height="200" Width="250"></p>
    
    
    <ColumnModel ID="ColumnModel3" runat="server"></p>
    
    
    <Columns></p>
    
    
    <ext:Column ColumnID="PostingTypeCode" Header="Posting Type" Width="70" DataIndex="PostingTypeCode" /></p>
    
    
    <ext:Column ColumnID="FormCode" Header="Form Code" Width="70" DataIndex="FormCode" /></p>
    
    
    <ext:Column DataIndex="EnglishDescription" Header="English" Width="100" /></p>
    
    
    <ext:Column ColumnID="StartDate" Header="Effective" Width="70" DataIndex="StartDate"></p>
    
    
    <Renderer Fn="customDate" /></p>
    
    
    </ext:Column></p>
    
    
    <ext:Column ColumnID="EndDate" Header="Expires" Width="70" DataIndex="EndDate"></p>
    
    
    <Renderer Fn="customDate" /></p>
    
    
    </ext:Column></p>
    
    
    <ext:Column DataIndex="FrenchDescription" Header="French" Width="100" /></p>
    
    
    <ext:Column DataIndex="BilingualDescription" Header="Bilingual" Width="100" /></p>
    
    
    <ext:Column DataIndex="UpdateUserID" Header="User" Width="50" /></p>
    
    
    <ext:Column ColumnID="UpdateTimestamp" Header="Last Updated" Width="90" DataIndex="UpdateTimestamp"></p>
    
    
    <Renderer Fn="customLongDate" /></p>
    
    
    </ext:Column></p>
    
    
    </Columns></p>
    
    
    </ColumnModel></p>
    
    
    </ext:GridPanel>
    Last edited by geoffrey.mcgill; Apr 26, 2016 at 1:23 AM.
  4. #4

    RE: [CLOSED] Column alignment with scrollbars in GridPanel

    ... the new dependencies on Coolite.Utilities.dll, etc.
    The dependency on Coolite.Utilties.dll and Newtonsoft.Json.dll have been in the project since day one.


    Geoffrey McGill
    Founder
  5. #5

    RE: [CLOSED] Column alignment with scrollbars in GridPanel

    Well it compiled and worked for me with V0.7 without having those files in the same directory at all... so I dont know if they were maybe built-in to Coolite.Ext.Web.dll before? oh well, its not that important... please let me know if you solve the "column arrangement/positioning" issue
  6. #6

    RE: [CLOSED] Column alignment with scrollbars in GridPanel

    Hi jsemple,

    Can you try another SVN update. We might have committed the fix just after you svn updated.

    I just double checked and your sample appears to work correctly with the latest code, whereas it did not work correctly before the fix we just committed.
    Last edited by geoffrey.mcgill; Apr 26, 2016 at 1:23 AM.
    Geoffrey McGill
    Founder
  7. #7

    RE: [CLOSED] Column alignment with scrollbars in GridPanel

    Here's the code sample provided above converted to C#.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if(!Ext.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { "G", "C", "2009-01-27T00:00:00", "", "General", "G?n?ral", "", "bmagyar", "2009-01-27T10:05:09" },
                    new object[] { "S", "C", "2009-01-27T00:00:00", "", "Specific Course", "Reli? ? un cours", "", "bmagyar", "2009-01-27T13:05:09" },
                    new object[] { "R", "C", "2009-01-27T00:00:00", "", "Research", "Recherche", "", "bmagyar", "2009-01-27T13:05:09" }, 
                    new object[] { "R", "A", "2009-01-27T00:00:00", "", "Regular", "R?gulier", "", "bmagyar", "2009-01-27T13:05:09" },
                    new object[] { "I", "A", "2009-01-27T00:00:00", "", "Irregular", "Irr?gulier", "", "bmagyar", "2009-01-27T13:05:09" },
                    new object[] { "E", "A", "2009-01-27T00:00:00", "", "Emergency", "Urguence", "", "bmagyar", "2009-01-27T13:05:09" }
                };
                this.Store1.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <script type="text/javascript">
                var customDate = function(value) {
                    if (value == 'Tue Jan 1 00:00:00 EST 1901') {
                        return '';
                    } else {
                        return Ext.util.Format.date(value, 'd/m/Y');
                    }
                }
    
                var customLongDate = function(value) {
                    if (value == 'Tue Jan 1 00:00:00 EST 1901') {
                        return '';
                    } else {
                        return Ext.util.Format.date(value, 'd/m/Y');
                    }
                }
            </script>
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader ReaderID="ID">
                        <Fields>
                            <ext:RecordField Name="PostingTypeCode" />
                            <ext:RecordField Name="FormCode" />
                            <ext:RecordField Name="StartDate" Type="Date" />
                            <ext:RecordField Name="EndDate" Type="Date" />
                            <ext:RecordField Name="EnglishDescription" />
                            <ext:RecordField Name="FrenchDescription" />
                            <ext:RecordField Name="BilingualDescription" />
                            <ext:RecordField Name="UpdateUserID" />
                            <ext:RecordField Name="UpdateTimestamp" Type="Date" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                Title="Posting Types" 
                Frame="true"
                StoreID="Store1" 
                Height="200" 
                Width="250">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="PostingTypeCode" Header="Posting Type" Width="70" DataIndex="PostingTypeCode" />
                        <ext:Column ColumnID="FormCode" Header="Form Code" Width="70" DataIndex="FormCode" />
                        <ext:Column DataIndex="EnglishDescription" Header="English" Width="100" />
                        <ext:Column ColumnID="StartDate" Header="Effective" Width="70" DataIndex="StartDate">
                            <Renderer Fn="customDate" />
                        </ext:Column>
                        <ext:Column ColumnID="EndDate" Header="Expires" Width="70" DataIndex="EndDate">
                            <Renderer Fn="customDate" />
                        </ext:Column>
                        <ext:Column DataIndex="FrenchDescription" Header="French" Width="100" />
                        <ext:Column DataIndex="BilingualDescription" Header="Bilingual" Width="100" />
                        <ext:Column DataIndex="UpdateUserID" Header="User" Width="50" />
                        <ext:Column ColumnID="UpdateTimestamp" Header="Last Updated" Width="90" DataIndex="UpdateTimestamp">
                            <Renderer Fn="customLongDate" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Geoffrey McGill
    Founder
  8. #8

    RE: [CLOSED] Column alignment with scrollbars in GridPanel

    I did an SVN checkout today about noon, so if you commited after that, then yes... it probably works. I am going to leave it for now, I need to keep a semi-stable working environment... I noticed a couple of other things were working better in IE7 on my boss' machine!! Layouts, labels/rendering worked alot better with the latest code!!! :)
  9. #9

    RE: [CLOSED] Column alignment with scrollbars in GridPanel

    Ok, no problem.

    I'm going to mark this thread as [CLOSED], just to check it off our list. When you get a chance to update, please post a quick status report here. If the bug is still causing problems, we'll open things up again and investigate further.

    Geoffrey McGill
    Founder
  10. #10

    RE: [CLOSED] Column alignment with scrollbars in GridPanel

    Not solved with new SVN update today.

    I see the exact same problem within your examples.ext.net page under GridPanel -> DataSource Update -> SqlDataSource

    Load the example and scroll to the far right, notice how the columns become unaligned at the right-hand side? (it is always about the width of the vertical scroll bar) I am using IE 6.0.2900 (XP SP2)

    Some behavior that fixes it, is to re-adjust one of the column widths, then it "auto-aligns" the scroll bar to the proper width and the problem goes away. If you could do that "auto-alignment" upon loading the GridPanel, maybe that would work?

    I hope you can fix it, it looks really bad and the users eyes will bug out I'm sure if they see it happen. Attached is a screenshot...
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Grid column alignment + row expander
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 14, 2012, 12:50 PM
  2. [CLOSED] GridPanel Column Header Alignment
    By ArcadisUS in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 08, 2011, 2:51 PM
  3. [CLOSED] Locked column and row alignment
    By Stefanaccio in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 20, 2010, 12:14 PM
  4. [CLOSED] [1.0] GridPanel issue with Grouping and Column Alignment
    By schimkem in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 30, 2010, 2:09 PM
  5. [CLOSED] GridPanel scrollbars
    By danielg in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: May 21, 2009, 1:01 AM

Posting Permissions