What's New?

Deleting record on non active page

  1. #1
    Apr 25, 2023, 2:08 PM

    Deleting record on non active page

    Hello

    Is there a way how to remove record from store, that is on page not visible in a grid??

    Example is just little modified example of https://forums.ext.net/showthread.ph...eleting-record

    Note that grid could be filtered as well ( but in some cases not), for simplicity so far I have not included filtering 

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

<script runat="server">
   
	[DirectMethod(RethrowException = true)]
	public static object[] LoadData(string action, Dictionary<string, object> extraParams)
    {
            DateTime now = DateTime.Now;

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

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>

    <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 + "%");
        };

		function simulateProblem(){
			var grid = Ext.getCmp('GridPanel1')

			//grid.store.remove(grid.store.getById(1)); // this works fine
            
            grid.store.remove(grid.store.getById(29));
		}
	</script>

 
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" Namespace="" />

		<ext:Button runat="server" OnClientClick="simulateProblem()" Text="Simulate problem" ></ext:Button>

        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Array Grid"
            Width="800">
            <Store>
                <ext:Store ID="Store1" runat="server"  AutoLoad="True" PageSize="10" RemoteSort="false" RemotePaging="false">
                    <Model>
                        <ext:Model runat="server" IDProperty="id">
                            <Fields>
	                            <ext:ModelField Name="id" />
                                <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" />
                            </Fields>
                        </ext:Model>
                    </Model>
	                <Proxy>
		                <ext:PageProxy DirectFn="Ext.net.DirectMethods.LoadData">
		                </ext:PageProxy>
	                </Proxy>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:RowNumbererColumn runat="server" Width="35" />
                    <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column runat="server" Text="Price" Width="75" DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" Width="75" DataIndex="change">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" Width="75" DataIndex="pctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:DateColumn runat="server" Text="Last Updated" Width="125" DataIndex="lastChange" Format="H:mm:ss" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" Mode="Multi" />
            </SelectionModel>
            <View>
                <ext:GridView runat="server" StripeRows="true" />
            </View>
            <BottomBar>
                 <ext:PagingToolbar runat="server">
                   
                </ext:PagingToolbar>
            </BottomBar>
        </ext:GridPanel>
    </form>
</body>
</html>
  2. #2
    Apr 26, 2023, 6:05 PM
    Hello, @jirihost!

    For that, you need to remove the records from the store's allData structure.

    See if this works for you:

    Ext.define('forumThread63352', {
    override: 'Ext.data.PagingStore',
    remove: function (records) {
        var removed_list = this.callParent(arguments);

        if (records.isModel && removed_list.length < 1) {
            for (var i = 0; i < this.allData.items.length; i++) {
                if (this.allData.items[i].id == records.id) {
                    removed_list.push(this.allData.items.splice(i, 1)[0]);
                    break;
                }
            }
        } else {
            var records_left = [];
            for (var i = 0; i < records.length; i++) {
                var found = false;
                for (var j = 0; j < removed_list.length; j++) {
                    if (removed_list[j].id == records[i].id) {
                        found = true;
                        break;
                    }
                }

                if (!found) records_left.push(records[i]);
            }

            for (var i = 0; i < this.allData.items.length; i++) {
                // Re-check the current index every time we find a match
                // as effectively removing one item brings the next in.
                var found = true;
                while (found) {
                    found = false;
                    for (var j = 0; j < records_left.length; j++) {
                        if (this.allData.items[i].id == records_left[j].id) {
                            removed_list.push(this.allData.items.splice(i, 1)[0]);
                            records_left.splice(j, 1);
                            found = true;
                            break;
                        }
                    }
                }
            }
        }

        if (removed_list.length > 0) this.loadPage(this.currentPage);

        return removed_list;
    }
});
    Then you can test what happens removing multiple records with:
    grid.store.remove([grid.store.getById(1), grid.store.getById(23), grid.store.getById(22), grid.store.getById(24)]);
    Repeat these removals while at page 1, 2 and 3 to see how the contents are updated to conform the changes.

    I tested this in your test case and I hope I was able to corner all edge cases. If anything went unnoticed in that implementation, shouldn't be too hard to spot.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. Strange behavior of paging when deleting record
    By jirihost in forum 5.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 14, 2023, 4:18 AM
  2. Deleting record from Ext.net store at client side.
    By velusoft in forum 2.x Help
    Replies: 0
    Last Post: Jun 20, 2016, 11:35 AM
  3. Change tabpanel active tab from inner page
    By sskapci in forum 2.x Help
    Replies: 2
    Last Post: Mar 18, 2014, 7:29 AM
  4. [CLOSED] Record with column active
    By Quico in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 11, 2013, 11:01 AM
  5. Deleting record from Grid is not working
    By latif in forum 1.x Help
    Replies: 1
    Last Post: Dec 25, 2009, 12:18 PM

Posting Permissions