[CLOSED] Model selection problem with lock and selected record after change page

**78fede78** · Oct 28, 2010, 8:14 AM

Model selection problem with lock and selected record.
I used this example:
https://examples1.ext.net/#/GridPane...rayWithPaging/

I have enabled in the grid SelectionMemory
I added a button to lock the selection:

 <ext:Button ID="Button1" runat="server" Text="Button #1">
  <Listeners>
         <Click Handler="#{GridPanel1}.getSelectionModel().lock();" />
   </Listeners>
</ext:Button>

Now I have done these steps:
1) I select a record(Figure 1)
2) Lock the selection (by clicking on the button 1)
3) Change page
4) Back to first page(Figure 2)

The selection is lost.

This is the complete 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.BindData();
        }
    }

    protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
    {
        this.BindData();   
    }

    private void BindData()
    {
        var store = this.GridPanel1.GetStore();
        
        store.DataSource = this.Data;
        store.DataBind(); 
    }

    private object[] Data
    {
        get
        {
            DateTime now = DateTime.Now;

            return new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
            };
        }
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value + "%");
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <h1>Array Grid with Paging and Remote Reloading</h1>
        
        <p>Demonstrates how to create a grid from Array data with Local Paging and Remote Reloading.</p>
        
        <p>Notice <b>Last Updated</b> column is revised with a new server-side DateTime stamp when the GridPanel "Refresh" button is clicked.<br />This demonstrates that when the GridPanel is refreshed, the Data is requested again from the server via an DirectEvent, but the Paging and Sorting is done completely client-side in the browser.</p>
        
        <ext:GridPanel
            ID="GridPanel1"
            runat="server" 
            StripeRows="true"
            SelectionMemory="Enabled"
            Title="Array Grid" 
            Width="600" 
            Height="290"
            AutoExpandColumn="Company">
            <Store>
                <ext:Store runat="server" OnRefreshData="MyData_Refresh">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="company" />
                                <ext:RecordField Name="price" Type="Float" />
                                <ext:RecordField Name="change" Type="Float" />
                                <ext:RecordField Name="pctChange" Type="Float" />
                                <ext:RecordField Name="lastChange" Type="Date" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:RowNumbererColumn />
                    <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" />
                    <ext:Column Header="Price" Width="75" DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column Header="Change" Width="75" DataIndex="change">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column Header="Change" Width="75" DataIndex="pctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
            <LoadMask ShowMask="true" />
            <BottomBar>
                 <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10">
                    <Items>
                        <ext:Label runat="server" Text="Page size:" />
                        <ext:ToolbarSpacer runat="server" Width="10" />
                        <ext:ComboBox runat="server" Width="80">
                            <Items>
                                <ext:ListItem Text="1" />
                                <ext:ListItem Text="2" />
                                <ext:ListItem Text="10" />
                                <ext:ListItem Text="20" />
                            </Items>
                            <SelectedItem Value="10" />
                            <Listeners>
                                <Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />
                            </Listeners>
                        </ext:ComboBox>
                    </Items>
                </ext:PagingToolbar>
            </BottomBar>
        </ext:GridPanel>
        
         <ext:Button ID="Button1" runat="server" Text="Button #1">
                <Listeners>
                    <Click Handler="#{GridPanel1}.getSelectionModel().lock();" />
                </Listeners>
            </ext:Button>

        
        
    </form>
</body>
</html>

**Vladimir** · Oct 28, 2010, 9:10 AM

Hi,

Why do you lock the selection? Lock doesn't allow restore the selection when you navigate between the grid's pages

**78fede78** · Oct 28, 2010, 9:27 AM

Block selection when I go to edit a record. This is a bug and should be resolved.

**78fede78** · Oct 28, 2010, 10:47 AM

I can also have the opinion of Daniil about this issue?

**Daniil** · Oct 28, 2010, 11:44 AM

Hi,

I'm not sure it's a bug.

Perhaps we should revise our mechanism of restoring selections through page - unlocking before restoring, then locking again if it was locked.

We'll notice you about the revision's result.

P.S. Vladimir is much more experienced than me in Ext.Net. So, anyway he or Geoffrey will say the last word it should be changed or not.

In all cases we'll solve this problem.

**Vladimir** · Oct 28, 2010, 11:58 AM

Hi,

Block selection when I go to edit a record. This is a bug and should be resolved.

If you edit a record then why do you navigate between the pages? Lock prevents any selection/deselection activity
Pure ExtJS doesn't support selection persisting between grid's pages therefore we save selections manually and restore after data loading (each grid page changing is data loading from memory proxy)

I am not sure that we should ignore lock in this case because you call 'lock' explicitly. I will investigate this case

In which cases you need to navigate between pages with locked selection?

**78fede78** · Oct 28, 2010, 12:33 PM

How to block page changes?

You are very kind and prepared.
Your service is excellent.
Vladimir I apologize if I offended.
I have problems with English

**Daniil** · Oct 28, 2010, 12:59 PM

Thank you very much for the kind words.

Don't worry about your English. It's enough to understand you. If no, we just ask to explain it one more time.

I can suggest you to override the GridPanel's memoryStateRestore method to achieve your requirement.

See comments in the code.

Example

<%@ 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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] { 
                                         new object[] {"test1"},
                                         new object[] {"test2"},
                                         new object[] {"test3"},
                                         new object[] {"test4"},
                                         new object[] {"test5"},
                                         new object[] {"test6"},
                                         new object[] {"test7"},
                                         new object[] {"test8"},
                                         new object[] {"test9"}
                                };
            store.DataBind();
        }
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
    <ext:ResourcePlaceHolder runat="server" />

    <script type="text/javascript">
        Ext.net.GridPanel.override({
            memoryRestoreState : function () {
                if (this.store !== null) {
                    var i = 0,
                        sel = [],
                        all = true,
                        silent = true;
                                        
                    this.store.each(function (rec) {
                            var id = this.getRecId(rec);
                            
                            if (!Ext.isEmpty(this.selectedIds[id])) {
                                sel.push(i);
                            } else {
                                all = false;
                            }

                            ++i;
                        }, this);

                    if (!Ext.isEmpty(this.fireSelectOnLoad)) {
                        silent = !this.fireSelectOnLoad;
                    }

                    if (sel.length > 0) {
                        if (silent) {
                            this.suspendEvents();
                            this.selModel.suspendEvents();
                        }
                        
                        //begin of overrode block
                        if (this.selModel.isLocked()) {
                            this.selModel.unlock();
                            this.selModel.selectRows(sel);
                            this.selModel.lock();
                        } else {
                            this.selModel.selectRows(sel);
                        }
                        //end of overrode block; 
                        //there was just
                        //this.selModel.selectRows(sel);
                        //instead of this block

                        if (silent) {
                            this.resumeEvents();
                            this.selModel.resumeEvents();
                        }
                    }

                    if (this.selModel.checkHeader) {
                        if (all) {
                            this.selModel.checkHeader();
                        } else {
                            this.selModel.uncheckHeader();
                        }
                    }
                }
            }
        });
    </script>

</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test1" DataIndex="test" />
            </Columns>
        </ColumnModel>
        <BottomBar>
            <ext:PagingToolbar runat="server" PageSize="3" />
        </BottomBar>
        <SelectionModel>
            <ext:RowSelectionModel />
        </SelectionModel>
    </ext:GridPanel>
    <ext:Button runat="server" Text="Lock">
        <Listeners>
            <Click Handler="GridPanel1.getSelectionModel().lock();" />
        </Listeners>
    </ext:Button>
    <ext:Button runat="server" Text="Unlock">
        <Listeners>
            <Click Handler="GridPanel1.getSelectionModel().unlock();" />
        </Listeners>
    </ext:Button>
    </form>
</body>
</html>

**Daniil** · Oct 28, 2010, 2:20 PM

Hi again,

The fix can be reduced by using the createInterceptor() and createSequence() functions.

Example

<%@ 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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] { 
                                         new object[] {"test1"},
                                         new object[] {"test2"},
                                         new object[] {"test3"},
                                         new object[] {"test4"},
                                         new object[] {"test5"},
                                         new object[] {"test6"},
                                         new object[] {"test7"},
                                         new object[] {"test8"},
                                         new object[] {"test9"}
                                };
            store.DataBind();
        }
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
    <ext:ResourcePlaceHolder runat="server" />

    <script type="text/javascript">
        Ext.onReady(function() {
            GridPanel1.memoryRestoreState = GridPanel1.memoryRestoreState.createInterceptor(function() {
                if (this.selModel.isLocked()) {
                    this.wasLocked = true;
                    this.selModel.unlock();
                }  
            });  
            GridPanel1.memoryRestoreState = GridPanel1.memoryRestoreState.createSequence(function() {
                if (this.wasLocked) {
                    this.selModel.lock();
                }    
            });      
        });
    </script>

</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test1" DataIndex="test" />
            </Columns>
        </ColumnModel>
        <BottomBar>
            <ext:PagingToolbar runat="server" PageSize="3" />
        </BottomBar>
        <SelectionModel>
            <ext:RowSelectionModel />
        </SelectionModel>
    </ext:GridPanel>
    <ext:Button runat="server" Text="Lock">
        <Listeners>
            <Click Handler="GridPanel1.getSelectionModel().lock();" />
        </Listeners>
    </ext:Button>
    <ext:Button runat="server" Text="Unlock">
        <Listeners>
            <Click Handler="GridPanel1.getSelectionModel().unlock();" />
        </Listeners>
    </ext:Button>
    </form>
</body>
</html>

**78fede78** · Oct 28, 2010, 3:20 PM

Thank you very much.
Exists some possibility that this change be made on the official release?

Thread: [CLOSED] Model selection problem with lock and selected record after change page

Thread Tools

Search Thread

Display

[CLOSED] Model selection problem with lock and selected record after change page

Similar Threads

How to change gridpanel selection model selection mode (single/multiple) from client side (javascript)?

HOW TO GET GRID PANEL SELECTED ROW VALUES WITH CHECKBOX SELECTION MODEL using server side code

how to get only last selected row from checkbox selection model multi selection

how to change gridpanel rowselection model to column selection

Selection Model only show selected rows in Grid Panel

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Model selection problem with lock and selected record after change page

[CLOSED] Model selection problem with lock and selected record after change page

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us