[CLOSED] Locking Grid not perfectly aligned.

[Z]

When there is a complex grid, the locking is off by a pixel or two. it gets worse the more complex the grid and it becomes a problem. only seems an issue on IE11. Chrome seems fine.
I think it is caused by the image in the template. On our grid, it is much worse and can be 10-20 pixels the locking is off.

This is just an example showing off by a single pixel. To test, just load and scroll down once.

Thanks,
/Z

<%@ Page Language="C#" %>


<%@ Import Namespace="System.Collections.Generic" %>


<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
     {
         this.Store1.DataSource = new List<Project> 
         { 
            new Project(100, "Ext Forms: Field Anchoring", 112, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, new DateTime(2007, 06, 24)),
            new Project(100, "Ext Forms: Field Anchoring", 113, "Implement AnchorLayout", 4, 150, 0, new DateTime(2007, 06, 25)),
            new Project(100, "Ext Forms: Field Anchoring", 114, "Add support for multiple types of anchors", 4, 150, 0, new DateTime(2007, 06, 27)),
            new Project(100, "Ext Forms: Field Anchoring", 115, "Testing and debugging", 8, 0, 0, new DateTime(2007, 06, 29)),
            new Project(101, "Ext Grid: Single-level Grouping", 101, "Add required rendering \"hooks\" to GridView", 6, 100, 0, new DateTime(2007, 07, 01)),
            new Project(101, "Ext Grid: Single-level Grouping", 102, "Extend GridView and override rendering functions", 6, 100, 0, new DateTime(2007, 07, 03)),
            new Project(101, "Ext Grid: Single-level Grouping", 103, "Extend Store with grouping functionality", 4, 100, 0, new DateTime(2007, 07, 04)),
            new Project(101, "Ext Grid: Single-level Grouping", 121, "Default CSS Styling", 2, 100, 0, new DateTime(2007, 07, 05)),
            new Project(101, "Ext Grid: Single-level Grouping", 104, "Testing and debugging", 6, 100, 0, new DateTime(2007, 07, 06)),
            new Project(102, "Ext Grid: Summary Rows", 105, "Ext Grid plugin integration", 4, 125, 0, new DateTime(2007, 07, 01)),
            new Project(102, "Ext Grid: Summary Rows", 106, "Summary creation during rendering phase", 4, 125, 0, new DateTime(2007, 07, 02)),
            new Project(102, "Ext Grid: Summary Rows", 107, "Dynamic summary updates in editor grids", 6, 125, 0, new DateTime(2007, 07, 05)),
            new Project(102, "Ext Grid: Summary Rows", 108, "Remote summary integration", 4, 125, 0, new DateTime(2007, 07, 05)),
            new Project(102, "Ext Grid: Summary Rows", 109, "Summary renderers and calculators", 4, 125, 0, new DateTime(2007, 07, 06)),
            new Project(102, "Ext Grid: Summary Rows", 110, "Integrate summaries with GroupingView", 10, 125, 0, new DateTime(2007, 07, 11)),
            new Project(102, "Ext Grid: Summary Rows", 1111, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 2111, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 31111, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 4111, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 5111, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 6111, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 7111, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 8111, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 9111, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1211, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1311, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1411, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1511, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1611, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1711, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1811, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1911, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1121, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1131, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1141, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1151, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1161, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1171, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1181, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1191, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1112, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1113, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1114, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1115, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1116, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1117, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1118, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15)),
            new Project(102, "Ext Grid: Summary Rows", 1119, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15))
         };


        this.Store1.DataBind();
    }


    public class Project
    {
        public Project(int projectId, string name, int taskId, string description, int estimate, double rate, double cost, DateTime due)
        {
            this.ProjectID = projectId;
            this.Name = name;
            this.TaskID = taskId;
            this.Description = description;
            this.Estimate = estimate;
            this.Rate = rate;
            this.Due = due;
        }


        public int ProjectID { get; set; }
        public string Name { get;set; }
        public int TaskID { get; set; }
        public string Description { get;set; }
        public int Estimate { get;set; }
        public double Rate { get; set; }
        public double Cost { get; set; }
        public DateTime Due { get; set; }
    }
</script>


<!DOCTYPE html>


<html>
<head id="Head1" runat="server">
    <title>Locking, Cell Editing Summary Grid - Ext.NET Examples</title>
    
    <link href="/resources/css/examples.css" rel="stylesheet" />
   
    <style>
        .x-grid-body .x-grid-cell-Cost {
            background-color : #f1f2f4;
        }
         
        .x-grid-row-summary .x-grid-cell-Cost .x-grid-cell-inner{
            background-color : #e1e2e4;
        }    


        .task .x-grid-cell-inner {
            padding-left: 15px;
        }


        .x-grid-row-summary .x-grid-cell-inner {
            font-weight: bold;
            font-size: 11px;
            background-color : #f1f2f4;
        } 
    </style>


    <script>
        var showSummary = true;


        var totalCost = function (records) {
            var i = 0,
                length = records.length,
                total = 0,
                record;


            for (; i < length; ++i) {
                record = records[i];
                total += record.get('Estimate') * record.get('Rate');
            }
            return total;
        };


        var toggleSummary = function (b) {


            var grid = b.up('gridpanel'),
                view = grid.lockedGrid.getView();
            var rowIndex = 2;
            var record = grid.getStore().getAt(rowIndex);
          
            var newRecord = {
                ProjectID: 0,
                Name: "TEST NEW ROW",
                TaskID:-1,
                Description: "TEST NEW ROW",
                Estimate: 0,
                Rate: 0.0,
                Cost: 0.0,
                Due: ""
            };


            var groupField = grid.getStore().groupField;
            newRecord[groupField] = record.get(groupField);


            //persisted and dirty!
            grid.getStore().add(newRecord);


            var recordAdded = grid.store.getById(newRecord.TaskID);
            recordAdded.set('', 0);
            recordAdded.commit();
        };
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server"/>        
        
        <h1>Locking, Cell Editing Summary Grid Example</h1>


        <p>It is not possible to lock or unlock <i>all</i> columns using the user interface. Each side, locked or unlocked must always contain at least one column.</p>


        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            Frame="true"            
            Title="Sponsored Projects"                         
            Icon="ApplicationViewColumns"
            Width="1000"
            Height="600">
            <Store>
                <ext:Store ID="Store1" runat="server" GroupField="Name">
                    <Sorters>
                        <ext:DataSorter Property="Due" Direction="ASC" />
                    </Sorters>
                    <Model>
                        <ext:Model ID="Model1" runat="server" IDProperty="TaskID">
                            <Fields>
                                <ext:ModelField Name="ProjectID" Type="Int" />
                                <ext:ModelField Name="Name" />
                                <ext:ModelField Name="TaskID" Type="Int" />
                                <ext:ModelField Name="Description" />
                                <ext:ModelField Name="Estimate" Type="Int" />
                                <ext:ModelField Name="Rate" Type="Float" />
                                <ext:ModelField Name="Cost" Type="Float" />
                                <ext:ModelField Name="Due" Type="Date" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Plugins>
                <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
            </Plugins>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:TemplateColumn ID="Column1"                        
                        runat="server"
                        Locked="true"
                        TdCls="task"
                        Text="Task"                       
                        Sortable="true"
                        Hideable="false"
                        SummaryType="Count"
                        Width="300">
                        <Template runat ="server">
                            <Html>
                                {Name}&nbsp;<IMG title="User schedule for period is posted" vertical-align="bottom" HEIGHT="16" WIDTH="16" SRC="/ta/Resources/images/notificationMessages/information.png"/>
                            </Html>
                        </Template>
                        <SummaryRenderer Handler="return ((value === 0 || value > 1) ? '(' + value +' Tasks)' : '(1 Task)');" />                            
                    </ext:TemplateColumn>
                     
                    <ext:Column ID="Column2" runat="server" Text="Project" DataIndex="Name" Width="180" />
                     
                    <ext:DateColumn ID="DateColumn1"
                        runat="server"
                        Width="130"
                        Text="Due Date"
                        Sortable="true"
                        DataIndex="Due"
                        SummaryType="Max"
                        Format="MM/dd/yyyy">
                        <Editor>
                            <ext:DateField ID="DateField1" runat="server" Format="MM/dd/yyyy" />
                        </Editor>
                    </ext:DateColumn>
 
                    <ext:Column ID="Column3"
                        runat="server"  
                        Width="130"
                        Text="Estimate"
                        Sortable="true"
                        DataIndex="Estimate"
                        SummaryType="Sum">
                        <Renderer Handler="return value +' hours';" />
                        <Editor>
                            <ext:NumberField ID="NumberField1" 
                                runat="server" 
                                AllowBlank="false" 
                                MinValue="0" 
                                StyleSpec="text-align:left" 
                                />
                        </Editor>
                    </ext:Column>
                     
                    <ext:Column ID="Column4"
                        runat="server"
                        Width="130"
                        Text="Rate"
                        Sortable="true"
                        DataIndex="Rate"
                        SummaryType="Average">
                        <Renderer Format="UsMoney" />
                        <SummaryRenderer Fn="Ext.util.Format.usMoney" />
                         <Editor>
                            <ext:NumberField ID="NumberField2" 
                                runat="server" 
                                AllowBlank="false" 
                                MinValue="0" 
                                StyleSpec="text-align:left" 
                                />
                        </Editor>
                    </ext:Column>
                                         <ext:Column
                        runat="server"
                        Width="130"
                        ID="Column5"
                        Text="Description"
                        Sortable="false"
                                             CellWrap="true"
                        Groupable="false"
                        DataIndex="Description">
                    </ext:Column>
                    <ext:Column
                        runat="server"
                        Width="130"
                        ID="Cost"
                        Text="Cost"
                        Sortable="false"
                        Groupable="false"
                        DataIndex="Cost"
                        CustomSummaryType="totalCost">
                        <Renderer Handler="return Ext.util.Format.usMoney(record.data.Estimate * record.data.Rate);" />
                        <SummaryRenderer Fn="Ext.util.Format.usMoney" />
                    </ext:Column>
                </Columns>                
            </ColumnModel>           
            <Features>               
                <ext:GroupingSummary 
                    ID="group" 
                    runat="server" 
                    GroupHeaderTplString="{name}" 
                    HideGroupedHeader="true" 
                    EnableGroupingMenu="false" 
                    />                   
            </Features>
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" 
                            runat="server" 
                            Text="TEST. PRESS ME" 
                            ToolTip="Toggle the visibility of summary row" 
                            EnableToggle="true" 
                            Pressed="true">
                            <Listeners>
                                <Click Fn="toggleSummary" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button ID="Button2" 
                            runat="server" 
                            Text="TEST. REGROUP TO FIX" 
                            ToolTip="Toggle the visibility of summary row" 
                            EnableToggle="true" 
                            Pressed="true">
                            <Listeners>
                                <Click Handler="App.Store1.setGroupField('ProjectID');App.Store1.setGroupField('Name');" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <SelectionModel>
                <ext:CellSelectionModel ID="CellSelectionModel1" runat="server" />
            </SelectionModel>
        </ext:GridPanel>
    </form>
  </body>
</html>

[fabricio.murta]

Hello @Z!

I couldn't reproduce your issue with the sample you provided! Tried in the Crisp and Gray themes here.

Below the results on Gray theme:
1. Using the 'test' button you provided


2. Scrolling down (after a fresh reload!)


Are you using Ext.NET 3.3.0 stock (from NuGet or downloaded) or have you freshly built Ext.NET from sources? I have tested here with stock NuGet. Will test with latest SVN and update here if I can reproduce the issue on that version!

[Z]

Using stock 3.2.1

[fabricio.murta]

Well, as I forgot to share the IE11 version used to test against:


Hello, I tried again and could reproduce the issue... Actually the shift is cumulative to scrolling down several times, and as I get near the bottom of the page I can see it gets shifted quite far.

This seems to be a problem specific to the Gray theme as I couldn't reproduce it using the Crisp one.

Investigating the issue now. Hope to be back soon with good news!

[fabricio.murta]

Hello!

It seems this is an issue with the image tag you are adding inside the cell! Different browsers treat it differently, so you get the result broken on IE11 and good on Chrome.

You can use one of these approaches to avoid the layout from breaking:
- use a Height value below or equal to 10 in your IMG tag
- set the CSS property position to absolute (it may crop the bottom of the image in the cells, but will support fine any height you give the image)

I hope one of the alternatives is acceptable for you. It seems to be a browser limitation, because I read line heights the same in both locked/normal grids if I fiddle them from console.

EDIT: please, if the solution options above don't work for you on 3.2.1, try them in a 3.3.0 project at least to ensure they don't work, sometimes we can't pinpoint issues on legacy versions of Ext.NET and we have no means to provide accurate fixes, as our test beds are limited to latest stable (NuGet/stock) and latest SVN/git release.

[Z]

used the size 10 solution and it was much better aligned.
/Z