[FIXED] [1.6] Header Group Column layout bug

Page 1 of 2 12 LastLast
  1. #1

    [FIXED] [1.6] Header Group Column layout bug

    Attached Thumbnails Click image for larger version. 

Name:	Header bug.jpg 
Views:	365 
Size:	80.6 KB 
ID:	4415  
    Last edited by Daniil; Jul 12, 2012 at 11:36 AM. Reason: [FIXED] [1.6]
  2. #2
    Hi,

    Seems there was such fixed bug some time ago. It was reproducible under Chrome only.

    What Ext.NET sources do you use? What browsers is the issue reproducible in?
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    Seems there was such fixed bug some time ago. It was reproducible under Chrome only.

    What Ext.NET sources do you use? What browsers is the issue reproducible in?


    I'm using sources version 1.3.0
    Release Date 2012-02-29 and Google chrome 20.0.1132.47 m
  4. #4
    Seems it has been fixed after v1.3 release. Are you able to test with v1.4?
  5. #5
    Quote Originally Posted by Daniil View Post
    Seems it has been fixed after v1.3 release. Are you able to test with v1.4?
    Can I try, but there are many differences between these versions?
  6. #6
    Quote Originally Posted by Daniil View Post
    Seems it has been fixed after v1.3 release. Are you able to test with v1.4?
    Hi, I tried using version 1.4 release, but still did not solve the bug

    I have attached the image of the resultClick image for larger version. 

Name:	bug_with_version_1.4.jpg 
Views:	236 
Size:	101.8 KB 
ID:	4437
  7. #7
    Confirm. Here is a simplified example to reproduce.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!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 runat="server">
        <title>Ext.NET Example</title>
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
        <script type="text/javascript" src="resources/js/ColumnHeaderGroup.js"></script>
    </head>
    <body>
        <ext:ResourceManager runat="server"  />
        
        <ext:GridPanel ID="GridPanel1" runat="server" Height="340">
            <Store>
                <ext:Store runat="server" />
            </Store>
            <View>
                <ext:GridView runat="server" ForceFit="true">
                    <HeaderGroupRows>
                        <ext:HeaderGroupRow>
                            <Columns>
                                <ext:HeaderGroupColumn Header="Group" ColSpan="1" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="2" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="2" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="2" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="2" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="2" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="1" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="6" />
                            </Columns>
                        </ext:HeaderGroupRow>
                    </HeaderGroupRows>
                </ext:GridView>
            </View>
            <ColumnModel>
                <Columns>
                    <ext:Column Header="1" DataIndex="test" />
                    <ext:Column Header="2" DataIndex="test" />
                    <ext:Column Header="3" DataIndex="test" />
                    <ext:Column Header="4" DataIndex="test" />
                    <ext:Column Header="5" DataIndex="test" />
                    <ext:Column Header="6" DataIndex="test" />
                    <ext:Column Header="7" DataIndex="test" />
                    <ext:Column Header="8" DataIndex="test" />
                    <ext:Column Header="9" DataIndex="test" />
                    <ext:Column Header="10" DataIndex="test" />
                    <ext:Column Header="11" DataIndex="test" />
                    <ext:Column Header="12" DataIndex="test" />
                    <ext:Column Header="13" DataIndex="test" />
                    <ext:Column Header="14" DataIndex="test" />
                    <ext:Column Header="15" DataIndex="test" />
                    <ext:Column Header="16" DataIndex="test" />
                    <ext:Column Header="17" DataIndex="test" />
                    <ext:Column Header="18" DataIndex="test" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>
    The fix has been committed to SVN, revision #4197.

    The fix will also appear in v1.6.

    Here is the fix to add into the page <head>.

    Fix
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
    <script type="text/javascript">
        Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupStyle = function (group, gcol) {
            var width = 0, hidden = true;
            for (var i = gcol, len = gcol + group.colspan; i < len; i++) {
                if (!this.cm.isHidden(i)) {
                    var cw = this.cm.getColumnWidth(i);
                    if (typeof cw == 'number') {
                        width += cw;
                    }
                    hidden = false;
                }
            }
    
            return {
                width: (Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2 && !Ext.isChrome) ? width : Math.max(width - this.borderWidth, 0)) + 'px',
                hidden: hidden
            };
        }
    </script>
    Thanks for the report!
  8. #8
    Quote Originally Posted by ascsolutions View Post
    Can I try, but there are many differences between these versions?
    Not too many. All changes are listed in the changelog.
  9. #9
    Quote Originally Posted by Daniil View Post
    Confirm. Here is a simplified example to reproduce.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!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 runat="server">
        <title>Ext.NET Example</title>
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
        <script type="text/javascript" src="resources/js/ColumnHeaderGroup.js"></script>
    </head>
    <body>
        <ext:ResourceManager runat="server"  />
        
        <ext:GridPanel ID="GridPanel1" runat="server" Height="340">
            <Store>
                <ext:Store runat="server" />
            </Store>
            <View>
                <ext:GridView runat="server" ForceFit="true">
                    <HeaderGroupRows>
                        <ext:HeaderGroupRow>
                            <Columns>
                                <ext:HeaderGroupColumn Header="Group" ColSpan="1" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="2" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="2" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="2" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="2" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="2" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="1" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="6" />
                            </Columns>
                        </ext:HeaderGroupRow>
                    </HeaderGroupRows>
                </ext:GridView>
            </View>
            <ColumnModel>
                <Columns>
                    <ext:Column Header="1" DataIndex="test" />
                    <ext:Column Header="2" DataIndex="test" />
                    <ext:Column Header="3" DataIndex="test" />
                    <ext:Column Header="4" DataIndex="test" />
                    <ext:Column Header="5" DataIndex="test" />
                    <ext:Column Header="6" DataIndex="test" />
                    <ext:Column Header="7" DataIndex="test" />
                    <ext:Column Header="8" DataIndex="test" />
                    <ext:Column Header="9" DataIndex="test" />
                    <ext:Column Header="10" DataIndex="test" />
                    <ext:Column Header="11" DataIndex="test" />
                    <ext:Column Header="12" DataIndex="test" />
                    <ext:Column Header="13" DataIndex="test" />
                    <ext:Column Header="14" DataIndex="test" />
                    <ext:Column Header="15" DataIndex="test" />
                    <ext:Column Header="16" DataIndex="test" />
                    <ext:Column Header="17" DataIndex="test" />
                    <ext:Column Header="18" DataIndex="test" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>
    The fix has been committed to SVN, revision #4197.

    The fix will also appear in v1.6.

    Here is the fix to add into the page <head>.

    Fix
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
    <script type="text/javascript">
        Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupStyle = function (group, gcol) {
            var width = 0, hidden = true;
            for (var i = gcol, len = gcol + group.colspan; i < len; i++) {
                if (!this.cm.isHidden(i)) {
                    var cw = this.cm.getColumnWidth(i);
                    if (typeof cw == 'number') {
                        width += cw;
                    }
                    hidden = false;
                }
            }
    
            return {
                width: (Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2 && !Ext.isChrome) ? width : Math.max(width - this.borderWidth, 0)) + 'px',
                hidden: hidden
            };
        }
    </script>
    Thanks for the report!


    Ok, I tested your code and now it works perfectly when there is no definition in any column width

    Please, take this test:

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!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>Ext.NET Example</title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
        <script type="text/javascript">
            Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupStyle = function (group, gcol) {
                var width = 0, hidden = true;
                for (var i = gcol, len = gcol + group.colspan; i < len; i++) {
                    if (!this.cm.isHidden(i)) {
                        var cw = this.cm.getColumnWidth(i);
                        if (typeof cw == 'number') {
                            width += cw;
                        }
                        hidden = false;
                    }
                }
    
                return {
                    width: (Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2 && !Ext.isChrome) ? width : Math.max(width - this.borderWidth, 0)) + 'px',
                    hidden: hidden
                };
            }
    </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server"  />
         
        <ext:GridPanel ID="GridPanel1" runat="server" Height="340">
            <Store>
                <ext:Store ID="Store1" runat="server" />
            </Store>
            <View>
                <ext:GridView ID="GridView1" runat="server" ForceFit="true">
                    <HeaderGroupRows>
                        <ext:HeaderGroupRow>
                            <Columns>
                                <ext:HeaderGroupColumn Header="Group" ColSpan="1" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="2" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="2" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="2" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="2" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="2" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="1" />
                                <ext:HeaderGroupColumn Header="Group" ColSpan="6" />
                            </Columns>
                        </ext:HeaderGroupRow>
                    </HeaderGroupRows>
                </ext:GridView>
            </View>
            <ColumnModel>
                <Columns>
                    <ext:Column Header="1" DataIndex="test" Width="300" />
                    <ext:Column Header="2" DataIndex="test" />
                    <ext:Column Header="3" DataIndex="test" />
                    <ext:Column Header="4" DataIndex="test" />
                    <ext:Column Header="5" DataIndex="test" />
                    <ext:Column Header="6" DataIndex="test" />
                    <ext:Column Header="7" DataIndex="test" />
                    <ext:Column Header="8" DataIndex="test" />
                    <ext:Column Header="9" DataIndex="test" />
                    <ext:Column Header="10" DataIndex="test" />
                    <ext:Column Header="11" DataIndex="test" />
                    <ext:Column Header="12" DataIndex="test" />
                    <ext:Column Header="13" DataIndex="test" />
                    <ext:Column Header="14" DataIndex="test" />
                    <ext:Column Header="15" DataIndex="test" />
                    <ext:Column Header="16" DataIndex="test" />
                    <ext:Column Header="17" DataIndex="test" />
                    <ext:Column Header="18" DataIndex="test" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>
    Note that I took his example and set a width in the first column. The problem happened again.
    : (

    Thank you
  10. #10
    I am able to reproduce the problem in Chrome only. Can you confirm?
Page 1 of 2 12 LastLast

Similar Threads

  1. Customizing Header Group Style
    By karthik.arian03 in forum 1.x Help
    Replies: 4
    Last Post: Apr 01, 2011, 3:09 PM
  2. [CLOSED] Change text in header group column.
    By pdcase in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 09, 2011, 3:44 PM
  3. [CLOSED] [1.0] Grid column header group - span multiple rows
    By Neil_Walters in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 14, 2011, 11:11 PM
  4. Gridpanel + Group Header plugin
    By Birgit in forum 1.x Help
    Replies: 2
    Last Post: Nov 11, 2010, 9:31 AM
  5. ContextMenu on GridPanel Group header
    By Cester in forum 1.x Help
    Replies: 0
    Last Post: Apr 21, 2009, 9:12 AM

Posting Permissions