Strange behavior with GridPanel combined w/ RowEditing plugin

  1. #1

    Strange behavior with GridPanel combined w/ RowEditing plugin

    When using the RowEditing plugin with GridPanel instances, double-clicking on any given column, having a Text field, within any row leads to what looks like blurry text, or double instances of the same text; this makes it difficult to edit and/or select the text using the mouse cursor. This only happens when creating GridPanel instances and enclosing them within TabPanels. If one selects another row via single-click, the blurriness disappears, and one can then properly highlight the text within the selected column.

    One can resolve this by not enclosing GridPanels within TabPanels, but rather adds the GridPanel to a Container instead.

    Any thoughts on how this may be resolved? It will be great to use GridPanels within TabPanels without this behavior.


    Thank you
    Attached Thumbnails Click image for larger version. 

Name:	double-text-gridpanel.PNG 
Views:	54 
Size:	4.5 KB 
ID:	24355  
  2. #2
    Hi @knknj,

    Welcome to the Ext.NET forums!

    It looks like I've never seen such behavior. Could you, please, provide a test case to reproduce?

    Specifying a browser and Ext.NET versions you are testing with is also appreciated.
  3. #3
    Thank you for your time + effort in advance.

    Please note the rowediting plugin's behavior when attempting to edit any of the three rows (any column) within the second gridpanel.

    I've stripped the example below down as much as possible. The gridpanels are generated dynamically.

    It will be great to hear your thoughts.

    Thank you

    <%@ Page Language="C#" ValidateRequest="false" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> 
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.Collections.ObjectModel" %>
    <%@ Import Namespace="System.Data" %> 
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                TabPanel tabMaster = new TabPanel
                {
                    ID = "tabMaster",
                    Width = 600,
                    Frame = false,
                    Height = 400,
                    DeferredRender = true
                };
    
                GridPanel xp = createDynamicGrid();
                xp.ClientIDMode = System.Web.UI.ClientIDMode.Static;
                xp.ID = "GridPanel1x";
                tabMaster.Items.Add(xp);
    
                GridPanel xp2 = createDynamicGrid2();
                xp2.ClientIDMode = System.Web.UI.ClientIDMode.Static;
                xp2.ID = "GridPanel2";
                tabMaster.Items.Add(xp2);
    
                this.frmGrid.Items.Add(tabMaster);
            }
        }
    
        private GridPanel createDynamicGrid()
        {
            Store store1 = new Store();
            store1.ID = "gridPanelVisit1";
            DataSorter ds = new DataSorter();
            ds.ID = "ds1";
            ds.Property = "Start";
            ds.Direction = Ext.Net.SortDirection.DESC;
            store1.Sorters.Add(ds);
    
            GridPanel grid = new GridPanel();
            grid.ID = "GridPanel1x";
            grid.Frame = true;
            grid.Title = "Records";
            grid.Height = 200;
            grid.Width = 800;
            grid.Scroll = ScrollMode.Both;
    
            Ext.Net.RowEditing re1 = new Ext.Net.RowEditing();
            re1.ID = "rowed1";
            re1.ClicksToMoveEditor = 1;
            re1.AutoCancel = false;
            grid.Plugins.Add(re1);
    
            Ext.Net.Model model = new Model();
            for (int i = 0; i < 3; i++)
            {
                ModelField modelField = new ModelField();
                if (i == 0)
                {
                    modelField.Name = "ID1";
                    modelField.ServerMapping = "ID";
                    modelField.Type = ModelFieldType.String;
                }
                else if (i == 1)
                {
                    modelField.Name = "Name1";
                    modelField.ServerMapping = "Name";
                    modelField.Type = ModelFieldType.String;
                }
                else if (i == 2)
                {
                    modelField.Name = "Start1";
                    modelField.ServerMapping = "Start";
                    modelField.Type = ModelFieldType.Date;
                }
                model.Fields.Add(modelField);
            }
            store1.Model.Add(model);
            store1.DataSource = new List<object>
            {
                new 
                { 
                    ID = "1",
                    Name = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. " ,
                    Start = new DateTime(2015, 2, 5)
                },
                new 
                {
                    ID = "2",                
                    Name = "Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet." ,
                    Start = new DateTime(2015, 1, 14)
                },
                new 
                {
                    ID = "3",
                    Name = "Class aptent taciti sociosqu ad litora torquent per conubia nostra.",
                    Start = new DateTime(2015, 4, 3) 
                } 
            };
            //store1.DataBind();
    
            grid.Store.Add(store1);
            grid.SelectionModel.Add(new RowSelectionModel { Mode = SelectionMode.Single });
            grid.ColumnModel.Columns.Add(new ColumnBase[] { 
                new Column 
                {
                    Text = "ID",
                    DataIndex = "ID1",
                    Width= 20,                
                    Editor = {
                        new TextField {
                        AllowBlank=false
                        }
                    }
                },
                new Column 
                {
                    Text = "Name",
                    DataIndex = "Name1",
                    Flex = 1,
                    Editor = {
                        new TextField {
                        AllowBlank=false
                        }
                    }
                },
                new DateColumn
                {
                    Text = "Entry Date",
                    DataIndex = "Start1",
                    Format="MM/dd/yyyy",
                    Editor = {
                        new DateField
                        { 
                            SelectedDate=DateTime.Now,
                            Format="MM/dd/yyyy",
                            MinDate=new DateTime(2006, 1, 1),
                            MinText="Please enter a reasonable date" ,
                            MaxDate=DateTime.Now,
                            AutoDataBind=true,
                            AllowBlank=false
                        }
                    }    
                }
            });
            return grid;
        }
    
        private GridPanel createDynamicGrid2()
        {
    
            Store store1 = new Store();
            store1.ID = "gridPanelVisit2";
            DataSorter ds = new DataSorter();
            ds.Property = "Start";
            ds.Direction = Ext.Net.SortDirection.DESC;
            store1.Sorters.Add(ds);
    
            GridPanel grid = new GridPanel();
            grid.ID = "GridPanel2";
            grid.Frame = true;
            grid.Title = "Records";
            grid.Height = 200;
            grid.Width = 800;
            grid.Scroll = ScrollMode.Both;
    
            Ext.Net.RowEditing re = new Ext.Net.RowEditing();
            re.ClicksToMoveEditor = 1;
            re.AutoCancel = false;
            grid.Plugins.Add(re);
    
            Ext.Net.Model model = new Model();
            model.ID = "tempmodel";
            for (int i = 0; i < 3; i++)
            {
                ModelField modelField = new ModelField();
                if (i == 0)
                {
                    modelField.Name = "ID";
                    modelField.ServerMapping = "ID";
                    modelField.Type = ModelFieldType.String;
                }
                else if (i == 1)
                {
                    modelField.Name = "Name";
                    modelField.ServerMapping = "Name";
                    modelField.Type = ModelFieldType.String;
                }
                else if (i == 2)
                {
                    modelField.Name = "Start";
                    modelField.ServerMapping = "Start";
                    modelField.Type = ModelFieldType.Date;
                }
                model.Fields.Add(modelField);
            }
            store1.Model.Add(model);
            store1.DataSource = new List<object>
                {
                    new 
                    { 
                        ID = "1",
                        Name = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. " ,
                        Start = new DateTime(2015, 2, 5)
                    },
                    new 
                    {
                        ID = "2",                
                        Name = "Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet." ,
                        Start = new DateTime(2015, 1, 14)
                    },
                    new 
                    {     ID = "3",
                        Name = "Class aptent taciti sociosqu ad litora torquent per conubia nostra.",
                        Start = new DateTime(2015, 4, 3) 
                    } 
                };
    
            grid.Store.Add(store1);
            grid.SelectionModel.Add(new RowSelectionModel { Mode = SelectionMode.Single });
            grid.ColumnModel.Columns.Add(new ColumnBase[] { 
                new Column 
                {
                    Text = "ID",
                    DataIndex = "ID",
                    Width= 20,                
                    Editor = {
                        new TextField {
                        AllowBlank=false
                        }
                    }
                },
                new Column 
                {
                    Text = "Name",
                    DataIndex = "Name",
                    Flex = 1,
                    Editor = {
                        new TextField {
                        AllowBlank=false
                        }
                    }
                },
                new DateColumn
                {
                    Text = "Entry Date",
                    DataIndex = "Start",
                    Format="MM/dd/yyyy",
                    Editor = {
                        new DateField { 
                            SelectedDate=DateTime.Now,
                            Format="MM/dd/yyyy",
                            MinDate=new DateTime(2006, 1, 1),
                            MinText="Please enter a reasonable date" ,
                            MaxDate=DateTime.Now,
                            AutoDataBind=true,
                            AllowBlank=false
                        }    
                    }
                }
            });
            return grid;
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <ext:XScript runat="server">
            <script> 
            </script>
        </ext:XScript>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:FormPanel Width="800" ID="frmGrid" runat="server">
                <Items>
                </Items>
            </ext:FormPanel>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Dec 30, 2015 at 5:42 PM.
  4. #4
    Affected browsers include:
    -Chrome 46.0.2490.86
    -IE 10.0.9

    Ext.Net version:
    -3.0.0.37775

    Thank you
  5. #5
    Thank you for the test case.

    I could not reproduce with Ext.NET 3.2.1. Could you, please, try with 3.2.1 as well?

    I should say that 3.0.0 is quite outdated already. I would recommend to consider a possibility to upgrade to the latest.
  6. #6
    Hi Daniil,

    Thank you for taking the time and effort to attempt to reproduce this for us.

    Indeed, you are correct. After replacing our existing Ext.Net library files with the latest as of today (3.2.1), the problem appears to have been resolved. Strange but true.

    Thanks again
  7. #7
    Well, there is a lot of fixes in 3.2.1 since 3.0.0.
  8. #8
    Great news is that using the latest build resolves the issue with the RowEditing plugin and the GridPanel component, however, using the latest build leads to issues with the ItemSelector.

    Will open up a new thread regarding this.

Similar Threads

  1. Replies: 12
    Last Post: Dec 29, 2015, 12:00 AM
  2. [CLOSED] Numberfield / strange behavior
    By tMp in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 08, 2015, 4:51 PM
  3. Strange behavior after nuget
    By bovo13 in forum 2.x Help
    Replies: 7
    Last Post: Oct 17, 2013, 1:21 PM
  4. Replies: 5
    Last Post: Nov 30, 2012, 2:18 PM
  5. Strange behavior of buttons and itextsharp
    By bovo13 in forum 1.x Help
    Replies: 3
    Last Post: Dec 22, 2011, 6:53 AM

Tags for this Thread

Posting Permissions