[CLOSED] Locked Grid Layout

  1. #1

    [CLOSED] Locked Grid Layout

    For my locked grid, I want to set a minimum width to the normal (not locked) side of the grid, so that it is always at least partially visible. If too many columns end up on the locked side, it's no longer possible to access the normal side. I know I can set a MaxWidth on the LockedGridConfig to an absolute pixel amount but this is not ideal because on larger resolutions the grid may be very wide and I would want the locked portion to be able to expand. I thought it would work to just set a MinWidth to the NormalGridConfig, but this seems to have no effect. I am willing to set a different layout to the grid, just not sure how to get it to work.

    See example below, the normal part of the grid is not accessible until you unlock a column.

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.GridPanel1.Store.Primary.DataSource = 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" }
                };
    
                this.GridPanel1.Store.Primary.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>GridPanel with Locking Columns - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <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>GridPanel with Locking Columns</h1>
    
        <p>This example shows how to achieve "freeze pane" locking functionality similar to Excel.</p>
        <p>Columns may be locked or unlocked by dragging them across into the opposite side, or by using the column's header menu.</p>
        <p>The "Price" column is not lockable, and may not be dragged into the locked side, or locked using the header menu.</p>
        <p>It is not possible to lock <i>all</i> columns using the user interface. The unlocked side must always contain at least one column.</p>
    
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Locking Grid"
            Width="600"
            Height="350"  >
            <LockedGridConfig  runat="server"></LockedGridConfig>
            <NormalGridConfig  MinWidth="100" runat="server"></NormalGridConfig>
            <Store>
                <ext:Store 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>
                <Columns>
                    <ext:RowNumbererColumn runat="server" />
                    <ext:Column runat="server" Text="Company<br>Name" DataIndex="company" Width="200" Locked="true" Sortable="false" />
                    <ext:Column runat="server" Text="Price" DataIndex="price" Width="125" Locked="true">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="change" Width="125" Locked="true">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column runat="server" Text="% Change" DataIndex="pctChange" Width="125" Locked="true">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:Column runat="server" Text="% Change 2" DataIndex="pctChange" Width="125">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="135" Lockable="false"/>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>
    Last edited by fabricio.murta; Aug 24, 2017 at 8:23 PM.
  2. #2
    Hello @tylert

    I'm afraid there's not much that can be helped here. If you have an arbitrary number of columns getting into the locking grid best you could do would be deduce each columns' width so that the sum of the columns are within your acceptable change.

    To start with, the code below will trim columns of the exceeding width when they get into the locking view, keeping at least 200 pixels free in the normal view:

    var handleAfterLayout = function (normalGrid) {
        var me = this,
            grid = normalGrid.ownerGrid,
            lockGrid = grid.lockedGrid,
            minNormWid = 200,
            deltaWid, columns, colDelta, curCol;
    
        if (!me.fixingWidth) {
            deltaWid = grid.getWidth() - lockGrid.getWidth();
    
            if (deltaWid < minNormWid) {
                me.fixingWidth = true;
                columns = lockGrid.getColumns();
    
                colDelta = (minNormWid - deltaWid) / columns.length;
                for (var i = 0; i < columns.length; i++) {
                    curCol = columns[i];
                    curCol.setWidth(curCol.getWidth() - colDelta)
                }
    
                me.fixingWidth = false;
            }
        }
    }
    This is meant to be called by the grid panel's after layout event:

    <AfterLayout Fn="handleAfterLayout" />
    I hope this helps. Unfortunately I'm afraid there's no builtin feature to keep that up for you.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks for your help here. Instead of resizing the columns, what I want to do is just set the maxWidth of the locked grid so that it is less than the total width of the grid. This modification of your script seems to do the trick:

    var handleAfterLayout = function (normalGrid) {
                var me = this,
                    grid = normalGrid.ownerGrid,
                    lockGrid = grid.lockedGrid,
                    minNormWid = 200,
                    deltaWid;
                deltaWid = grid.getWidth() - lockGrid.getWidth();
                lockGrid.setMaxWidth(grid.getWidth()-minNormWid);
            };
  4. #4
    Hello @tylert!

    Yes, the problem with that is, once you specify the width of the locked view pane, it will no longer adapt to the added/removed columns, and you end up having to scroll the locked view and/or resize/move the locked columns, and if you remove most locked columns, the space will still be the same. So more and more checks would be necessary to maintain that width.

    Well, but if this way works for you, that's it. :)
    Fabrício Murta
    Developer & Support Expert
  5. #5
    That's why I'm specifying maxWidth not width. I'm not seeing the issue you describe.
  6. #6
    Alright, I'll be marking this as closed then. Glad the test method helped you make it work the way you need, and thanks for sharing back the outcome. We really appreciate it!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 3
    Last Post: Aug 18, 2017, 7:07 PM
  2. Replies: 6
    Last Post: Feb 25, 2017, 3:51 AM
  3. Replies: 3
    Last Post: Mar 11, 2015, 7:28 PM
  4. Replies: 3
    Last Post: Feb 04, 2015, 5:08 PM
  5. [CLOSED] Basic Layout question for Layout Fit / AutoHeight
    By macap in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 07, 2010, 11:57 AM

Posting Permissions