[FIXED] [#89] [4.2.0] ForceFit=true is not honored when all leaf columns are under a parent column

  1. #1

    [FIXED] [#89] [4.2.0] ForceFit=true is not honored when all leaf columns are under a parent column

    This happens in Ext.Net 2.1.

    See the sample below. I modified Examples/GridPanel/Miscellaneous/ColumnHeaderGroup/Default.aspx page and I added price and change columns under the Company column.

    I also played with other permutations. If I leave a top leaf column then ForceFit=true is enforced, however the columns that have the Flex property are not stretched.

    In the latest version of Ext.Net which works with ExtJs 4.2 beta the behaviour is different, the ForceFit=true is enforced, the same with the columns that have flex=1 but the columns are not properly aligned. See the screenshot.

    <%@ 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)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Grouped Header Example - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
        
        <style>
            /* style rows on mouseover */
            .x-grid-row-over .x-grid-cell-inner {
                font-weight: bold;
            }
        </style>
    
        <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 + "%");
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <h1>Grouped Header Example</h1>
        <p>This example shows how to create a grid with column headers which are nested within category headers.</p>
        <p>Category headers do not reference Model fields via a <code>dataIndex</code>, rather they contain
        child header definitions (which may themselves either contain a <code>dataIndex</code> or more levels of headers).</p>
        
        <ext:GridPanel 
            ID="GridPanel1"
            runat="server" 
            Title="Grouped Header Grid" 
            Width="900" 
            ColumnLines="true"
            ForceFit="true"
            Height="350">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <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="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="60" Sortable="false" >
                      <Columns>
                            <ext:Column ID="Column1" runat="server" Text="Price" DataIndex="price"  Sortable="true" Flex="1">                  
                                <Renderer Format="UsMoney" />
                            </ext:Column>
                            <ext:Column ID="Column2" runat="server" Text="Change" DataIndex="change" Width="75" Sortable="true">
                                <Renderer Fn="change" />
                            </ext:Column>
                        
                      </Columns>
                    </ext:Column>
    
    <%--                <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" Sortable="false" />--%>
    
                    <ext:Column runat="server" Text="Stock Price" >
                        <Columns>
                            <ext:Column runat="server" Text="Price" DataIndex="price"  Sortable="true" Flex="1">                  
                                <Renderer Format="UsMoney" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Change" DataIndex="change" Width="75" Sortable="true">
                                <Renderer Fn="change" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Change %" DataIndex="pctChange" Width="75" Sortable="true">
                                <Renderer Fn="pctChange" />
                            </ext:Column>
                        </Columns>
                    </ext:Column>                
                    
    <%--                <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="85" Sortable="true" Format="dd/MM/yyyy" />--%>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>

    Click image for larger version. 

Name:	grid_panel_grouped_header.jpg 
Views:	143 
Size:	62.0 KB 
ID:	5305
    Last edited by fabricio.murta; Jan 08, 2017 at 5:58 PM.
  2. #2
    Hi @bogc,

    Here is a post regarding the ForceFit option.
    http://www.sencha.com/forum/showthre...l=1#post782887

    So, I would also recommend to use the Flex option for stretching columns.

    But it appears to be not working if a column contains inner columns. I reported it.
    http://www.sencha.com/forum/showthread.php?252333
  3. #3
    Sencha opened a bug ticket.

    We have opened our Issue to track this defect.
    https://github.com/extnet/Ext.NET/issues/89
  4. #4
    Daniil, i was gonna report the issue regarding using Flex on Grouped Header columns but i found this Thread that refers two different issues. Don't you think that we should separate these issues in two threads?
  5. #5
    Quote Originally Posted by RCN View Post
    Daniil, i was gonna report the issue regarding using Flex on Grouped Header columns but i found this Thread that refers two different issues. Don't you think that we should separate these issues in two threads?
    Hi Raphael,

    I marked this thread [OPEN] only for the issue when Flex doesn't work if a column contains inner columns.

    Regarding ForceFit. I would follow the Scott's suggestion to don't use ForceFit and Flex at the same time. So, I don't consider it a bug.

    I could change the thread's title if @bogc don't mind.
  6. #6
    Thank you Daniil.
  7. #7
    Hello!

    It's been a while, but Sencha claims the issue has been fixed in the release we just merged to Ext.NET (ExtJS 6.2.0/6.2.1, Ext.NET 4.2.0)!

    If you can still reproduce this issue after Ext.NET 4.2.0 release, please let us know!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 3
    Last Post: Apr 09, 2015, 2:34 PM
  2. Replies: 2
    Last Post: Mar 17, 2014, 6:29 AM
  3. [CLOSED] Difference between GridPanel ForceFit vs Column Flex?
    By jchau in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 23, 2013, 2:24 PM
  4. Replies: 13
    Last Post: Sep 13, 2011, 3:20 PM
  5. [CLOSED] Gridpanel gridview Forcefit and column width
    By ljankowski in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 12, 2010, 4:56 PM

Posting Permissions