The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[CLOSED] Locking Grid out of sync...

  1. #1

    [CLOSED] Locking Grid out of sync...

    We use locking grids and ALOT of client side code and renderers. We find the locking is always out of sync. We constantly add items to our records in client side. We find that it is worse also when you call App.grid.getView().refreshNode on the row and then it is permanently out of sync until you refresh it.
    in example, just click the NOTE icon on any row. the client side renderer updates the div and the locking grid cant compensate.
    currently ext3. we expect to move to ext4 in 4-8 weeks.
    /Z

    <%@ 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 id="Head1" runat="server">
        <title>GridPanel with Locking Columns - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    
        <script>
            var count = 0;
            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 + "%");
            };
    
    
    
    
            var alertResponsehift = function (curSelection) {
                count = 4;
                curSelection.beginEdit();
                curSelection.set('price', 1);
                curSelection.endEdit();
            };
    
    
            var myRenderer = function (value, metaData, record, rowIndex, colIndex, store) {
    
    
                var result="";  
                for (i = 0; i < count; i++) {
                    result += "<div><span>TEST</span><BR/></div>";
                }
                return result;
            };
    
    
            var commandHandler = function (cmd, record, obj, grid) {
                alertResponsehift(record);
            };
    
    
    
    
    
    
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" 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">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" 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" />
                                <ext:ModelField Name="day0Events" Type="Auto" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Width="35">
                        <Commands>
                            <ext:ImageCommand Icon="NoteEdit" CommandName="MessageEdit">
                                <ToolTip Text="Edit Message" />
                            </ext:ImageCommand>
                        </Commands>
                        <Listeners>
                            <Command Handler="commandHandler(command, record);" />
                        </Listeners>  
                    </ext:ImageCommandColumn>
    
    
                    <ext:Column ID="Column1" runat="server" Text="Company<br>Name" DataIndex="company" Width="200" Locked="true" Sortable="false" />
                    <ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price" Width="125" Lockable="false">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change" Width="125">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column ID="Column4" runat="server" Text="% Change" DataIndex="pctChange" Width="125">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:Column runat="server" DataIndex="day0Events">
                        <Renderer Fn = "myRenderer" />
                    </ext:Column>
    
    
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>
    Last edited by fabricio.murta; Jun 12, 2017 at 11:15 AM.
  2. #2
    Hello @Z!

    Well, in this case you are going beyond the grid's wits on handling row height changes and syncing them. If you do low-level grid formatting like custom renderers and expect them to change the line height, you should be also calling syncRowHeights() if it applies.

    To your provided code, try changing the following lines like this:

    lines 94-96, replace by this script:
    var commandHandler = function (cmd, record, obj, grid) {
        alertResponsehift(record);
        if (grid.syncRowHeight) {
            grid.syncRowHeights();
        }
    };
    Line 149:
    <Command Handler="commandHandler(command, record, undefined, item.gridRef.ownerGrid);" />
    I believe in general terms, you would be needing to re-call the syncRowHeights() method for the grid every time you do a change like this, as it can't keep checking for changes and syncing rows (which would probably be reasonably cpu-intensive), so the need for you to call it from your layout customizations. Preferably defer its calling, for example, if a change affects several cells and/or rows, just once after all is done.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello @Z!

    It's been some time since we replied your inquiry here and still no feedback from you. Do you still need help with this issue?
    Fabrício Murta
    Developer & Support Expert
  4. #4
    ok. we are moving to v4 so all issues will be posted there.
    /Z

Similar Threads

  1. Replies: 6
    Last Post: Sep 15, 2017, 3:04 AM
  2. [CLOSED] Locking Grid not perfectly aligned.
    By Z in forum 3.x Premium Help
    Replies: 5
    Last Post: Apr 22, 2016, 4:05 AM
  3. Replies: 0
    Last Post: Sep 24, 2015, 8:51 PM
  4. [CLOSED] Drag drop (grid to grid) store.sync() problem
    By siyahgul in forum 2.x Premium Help
    Replies: 3
    Last Post: Feb 17, 2015, 11:58 AM
  5. [CLOSED] Locking Grid and AddColumn
    By paulc in forum 1.x Premium Help
    Replies: 1
    Last Post: Feb 23, 2011, 11:05 AM

Posting Permissions