Locking grid column bug. Different height of cells.

[myaso]

Hi everybody,

If I add CommandColumn to Grid from sample of Locking Grid Column then get different height of cells for locked column and unlocked and because of this there is some shift of rows.

Please take a look


I add next simple code for CommandColumn

                <ext:CommandColumn ID="CommandColumn1" runat="server">
                    <Commands>
                        <ext:GridCommand Icon="NoteEdit">
                            <Menu>
                                <Items>
                                    <ext:MenuCommand Text="menu1"/>
                                </Items>
                            </Menu>
                        </ext:GridCommand>
                    </Commands>
                </ext:CommandColumn>

Please say, can it be avoided somehow?
Thanks

[RCN]

Unfortunately i was not able to reproduce the issue when tested against the latest version (SVN), it is rendered properly, as shown below:



But it's possible to see that there is a difference when it is compared with the Example Explorer's example:
https://examples2.ext.net/#/GridPane...g_Grid_Column/

The RowNumbererColumn appears as the first column.

Daniil and Baidaly, is this the expected behaviour?

[myaso]

Unfortunately i was not able to reproduce the issue

thanks for reproducing, if you are able then please try next source code

<%@ 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.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 GridView - 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 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>
    
    <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" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" />
                <ext:Column ID="Column1" runat="server" Text="Company<br>Name" DataIndex="company" Width="200" Locked="true" Sortable="false" />
                <ext:CommandColumn ID="CommandColumn1" runat="server">
                    <Commands>
                        <ext:GridCommand Icon="NoteEdit">
                            <Menu>
                                <Items>
                                    <ext:MenuCommand Text="menu1"/>
                                </Items>
                            </Menu>
                        </ext:GridCommand>
                    </Commands>
                </ext:CommandColumn>
                <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:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" Width="135"/>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>          
</body>
</html>

For me it is not rendered properly, as shown below

[RCN]

It may be because the height of the image "column", which taller than text columns.

Anyway, i'll test it tomorrow morning and be sure that i'll keep you posted.

[RCN]

As i said to you before, it's due the Command Column. The Menu Command's height is greater than fixed columns' height. They are two "separated" grids.

To overcome this issue, please add the following CSS style to your page:

<style type="text/css">
    .x-grid-cell-inner
    {
        height: 20px;
    }
</style>

Let me know whether it helps

[myaso]

Let me know whether it helps

Thanks. It's helped.

[RCN]

Can we mark this thread as closed?

[myaso]

Can we mark this thread as closed?

yeah, of course

[RCN]

Daniil and Baidaly, i would like to know what do you think about this approach. Do you think that it is a workaround, that the "locked" columns should calculate their height based on non locked columns?