GridPanel looses selection when updating row on client side

  1. #1

    GridPanel looses selection when updating row on client side

    Hi, I noticed that if I update a selected row's data using client side script more than once the grid will clear the selection.

    Sample code:
    var idx = Grid.getSelectionModel().selected.items[0].index;//Get the selected row index
    Grid.getStore().getAt(idx).set('Name', 'New Name');//Works ok, data updated and row still selected
    Grid.getStore().getAt(idx).set('Type', 'New Type');//After this code the row won't be selected anymore
    Is this a bug? If not then is there a better method of updating the selected row's data?
    Any idea?
    Thanks
  2. #2
    I cannot reproduce it, please provide test case
  3. #3
    Quote Originally Posted by Vladimir View Post
    I cannot reproduce it, please provide test case
    here's a perfect sample taken from the examples, click the button bellow the grid:

    <%@ 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.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
    
        private object[] Data
        {
            get
            {
                return 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" }
                };
            }
        }       
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head id="Head1" runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
    
    
        <style>
            .x-grid-row-over .x-grid-cell-inner {
                font-weight : bold;
            }
        </style>
    
    
        <script>
            function runMe()
            {
                var grid = Ext.getCmp("GridPanel1");
                
                if (grid.getSelectionModel().selected.length == 1)
                {
                    var idx = grid.getSelectionModel().selected.items[0].index;//Get the selected row index
                    grid.getStore().getAt(idx).set('company', 'New company');//Works ok, data updated and row still selected
                    grid.getStore().getAt(idx).set('price', '999');//After this code the row won't be selected anymore
                }
                else {
                    alert("Select one row.");
                }
            }
    
    
            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>Simple Array Grid</h1>
        
        <ext:GridPanel 
            ID="GridPanel1"
            runat="server" 
            Title="Array 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>
                <Columns>
                    <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">                  
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" />
                </Columns>            
            </ColumnModel>       
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
            </SelectionModel>
        </ext:GridPanel>
        <hr />
        <ext:Button runat="server" Text="Click Me">
            <Listeners>
                <Click Handler="runMe()"></Click>
            </Listeners>
        </ext:Button>
    </body>
    </html>
  4. #4
    To sum it up I can't re-select the row using a script because row is still selected but the selection is not visible which leads to think it is not selected.

    This code won't work when the issue above happens:
    grid.getSelectionModel().select(grid.getSelectionModel().getLastSelected().index)
  5. #5
    Still cannot reproduce it. What version do you use? Did you try with Ext.Net 2.2.0?
  6. #6
    Quote Originally Posted by Vladimir View Post
    Still cannot reproduce it. What version do you use? Did you try with Ext.Net 2.2.0?
    I'm using 2.1, haven't tried with 2.2 yet.
    Attached demonstration images.
    Attached Thumbnails Click image for larger version. 

Name:	01.jpg 
Views:	27 
Size:	50.1 KB 
ID:	6104   Click image for larger version. 

Name:	02.jpg 
Views:	30 
Size:	50.1 KB 
ID:	6105  
    Last edited by paul-2011; Apr 25, 2013 at 3:18 PM.
  7. #7
    Quote Originally Posted by Vladimir View Post
    Still cannot reproduce it. What version do you use? Did you try with Ext.Net 2.2.0?
    Confirmed to be a glitch on 2.1, works on 2.2.
    It sucks that I need to update to 2.2 now cause it might break a number of other things on my code that I'm still not even aware of.
    Thanks
    Attached Thumbnails Click image for larger version. 

Name:	01.jpg 
Views:	25 
Size:	55.6 KB 
ID:	6106  

Similar Threads

  1. [CLOSED] client side filtering in gridpanel
    By EddieJensen in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 11, 2013, 9:03 AM
  2. MultiCombo - Determine if Selection Client Side
    By Tbaseflug in forum 2.x Help
    Replies: 1
    Last Post: Oct 12, 2012, 11:56 PM
  3. Replies: 3
    Last Post: Oct 05, 2012, 11:44 AM
  4. Replies: 2
    Last Post: Dec 29, 2011, 10:05 PM
  5. [CLOSED] [1.0] Colorpalette client-side color selection
    By betamax in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 09, 2010, 2:51 PM

Tags for this Thread

Posting Permissions