Problem with removing records from grid

**jirihost** · Sep 17, 2021, 7:40 AM

Hello

I'm posting in fact 3 issues in single one, but I think the bottom line problem is the same for all.

In short - I have grid that gets records in javascript and as well I need to remove the records sometimes

I have problem removing records that are not in the current page of the grid

Here is full code ( mostly borrowed from your examples)

In order to reproduce, click "load Data" and then one of remove buttons

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


<!DOCTYPE html>

<html>
<head runat="server">
    <title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />

    <script>
	

		function removeData() {
			var grid = <%= GridPanel1.ClientID %>;

			var toRemove = [];
            for (var i = 0; i < grid.store.getCount(); i++) {
	            var record = grid.store.getById(i);
	            toRemove.push(record);
            }
            grid.store.remove(toRemove);

            
            grid.store.loadPage(1);
            alert('expected number of record 0, displayed 90, why store.getCount() equals to 10 and not 100?')
        }

		function removeData2() {
			var grid = <%= GridPanel1.ClientID %>;

			var allRecords = [];
            grid.store.each(function(record) {
	            allRecords.push(record);
            });

            for (var i = 0; i < allRecords.length; i++) {
	            grid.store.remove(allRecords[i]);
            }

            grid.store.loadPage(1);

            alert('expected number of record 0, displayed 90')


		}

		function removeData3() {
            var grid = <%= GridPanel1.ClientID %>;

            var record = grid.store.getById(20);
            grid.store.remove(record);

            record = grid.store.getById(5);
            grid.store.remove(record);

            grid.store.loadPage(1);

            alert('expected number of record is 98, displayed 99')
		}

		function loadData() {
            var grid = <%= GridPanel1.ClientID %>;

			var data = [];
			for (var i = 0; i < 100; i++) {
				data.push({
					id: i,
					company: 'Company' + i
				});
			}
			grid.store.add(data);

			grid.store.loadPage(1);
		}
	</script>
    

   
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" Namespace="" />
       
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Array Grid"
            Width="800">
            <Store>
                <ext:Store ID="Store1" runat="server" PageSize="10">
                    <Model>
                        <ext:Model runat="server" IDProperty="id">
                            <Fields>
	                            <ext:ModelField Name="id" />
                                <ext:ModelField Name="company" />
                               
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
	                <ext:Column runat="server" Text="id" DataIndex="id" Flex="1" />
                    <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" Mode="Multi" />
            </SelectionModel>
            <View>
                <ext:GridView runat="server" StripeRows="true" />
            </View>
            <BottomBar>
                 <ext:PagingToolbar runat="server">
                  
                </ext:PagingToolbar>
            </BottomBar>
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
	                    <ext:Button runat="server" Text="Load Data" Icon="Printer" Handler="loadData()" />
                        <ext:Button runat="server" Text="Remove Data" Icon="Printer" Handler="removeData()" />
	                    <ext:Button runat="server" Text="Remove Data 2" Icon="Printer" Handler="removeData2()" />
	                    <ext:Button runat="server" Text="Remove Data 3" Icon="Printer" Handler="removeData3()" />
                        
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:GridPanel>
    </form>
</body>
</html>

Thanks for help

**fabricio.murta** · Sep 20, 2021, 3:33 PM

Hello Jirihost!

I apologize for the delay, we are on your issue now and will respond today with something of help!

**fabricio.murta** · Sep 21, 2021, 5:36 PM

Hello again, @Jirihost!

Sorry yet again for the delay!\

You are getting just "10" records instead of the total because you're looking at the "paged" store. From it, you'd need to get to the "non paged store" then you'll be able to remove the data regardless of the page. This applies to "local paging" (or "client-side paging).

We'll try to review your example in such a way that the records are displayed and will post back soon!

**jirihost** · Sep 23, 2021, 1:51 PM

Hello

Not sure whether you are still working on example - just for my understanding, what you mean by "you'd need to get to the "non paged store" " part of reply?

Thanks

**fabricio.murta** · Sep 23, 2021, 8:02 PM

Hello again, @jirihost!

Originally Posted by jirihost

what you mean by "you'd need to get to the "non paged store" " part of reply?

I mean that, when you are doing "client side paging", there will be, under the hood, a "paged store" that displays only what's in the current grid's page. But then, to sustain paging on client side, there's the need of a "non-paged" store, holding all entries, and simulating the remote data similiarly -- except it's getting data from another store in the page.

Not sure this clears out a bit, hopefully with the reviewed example it will be clearer.

**jirihost** · Sep 23, 2021, 8:16 PM

Ok - well - it's not too clear :-)
so can I look foward to update example from your side please?

**fabricio.murta** · Sep 24, 2021, 1:33 AM

Hello again, @jirihost!

Here's the example, then I'll point some parts of the changes:

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

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
    <script>
		function removeData() {
            var grid = <%= GridPanel1.ClientID %>;

            grid.store.clearAllData();

            grid.store.loadPage(1);
            Ext.toast('All data removed via store.clearAllData().')
        }

		function removeData2() {
            var grid = <%= GridPanel1.ClientID %>,
                allData = grid.store.allData;

            var allRecords = [];
            allData.items.forEach(el => allRecords.push(el));

            allData.items = allData.items.filter(function (entry) {
                for (var i = 0; i < allRecords.length; i++) {
                    if (entry === allRecords[i]) {
                        return false;
                    }
                }
                return true;
            });

            grid.store.loadPage(1);

            Ext.toast('Every record removed via loop.')
		}

		function removeData3() {
            var grid = <%= GridPanel1.ClientID %>,
                allData = grid.store.allData;

            var curcnt = allData.items.length;

            var record = grid.store.getAtAll(grid.store.indexOfIdAll(20));

            allData.items = allData.items.filter(entry => entry !== record);

            record = grid.store.getAtAll(grid.store.indexOfIdAll(5));
            allData.items = allData.items.filter(entry => entry !== record);

            grid.store.loadPage(1);

            var newcnt = allData.items.length;

            if ((curcnt - newcnt) == 2) {
                Ext.toast('removed records 5 and 20.');
            } else {
                Ext.toast('expected number of record is ' + (curcnt - 2) + ', displayed ' + curcnt);
            }
		}

		function loadData() {
            var grid = <%= GridPanel1.ClientID %>;

			var data = [];
			for (var i = 0; i < 100; i++) {
				data.push({
					id: i,
					company: 'Company' + i
				});
			}
			grid.store.add(data);

			grid.store.loadPage(1);
		}
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" Namespace="" />
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Array Grid"
            Width="800">
            <Store>
                <ext:Store ID="Store1" runat="server" PageSize="10">
                    <Model>
                        <ext:Model runat="server" IDProperty="id">
                            <Fields>
	                            <ext:ModelField Name="id" />
                                <ext:ModelField Name="company" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
	                <ext:Column runat="server" Text="id" DataIndex="id" Flex="1" />
                    <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" Mode="Multi" />
            </SelectionModel>
            <View>
                <ext:GridView runat="server" StripeRows="true" />
            </View>
            <BottomBar>
                 <ext:PagingToolbar runat="server" />
            </BottomBar>
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
	                    <ext:Button runat="server" Text="Load Data" Icon="Printer" Handler="loadData()" />
                        <ext:Button runat="server" Text="Remove Data" Icon="Printer" Handler="removeData()" />
	                    <ext:Button runat="server" Text="Remove Data 2" Icon="Printer" Handler="removeData2()" />
	                    <ext:Button runat="server" Text="Remove Data 3" Icon="Printer" Handler="removeData3()" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:GridPanel>
    </form>
</body>
</html>

So, first the "non-paged store" is not actually a store like I said, but just a structure that holds the full set of records, and it has a limited set of functionalities. The grid traverses this structure as the grid is paged from the client, as if it were pulling data from the server. So if you change this array, then the changes will reflect when store.loadPage() is called.

As a side note, this approach in your original test case is a little dangerous:

for (var i = 0; i < grid.store.getCount(); i++) {
    var record = grid.store.getById(i);

You are following an array index for the count of elements and trying to get the record by ID (getById()) instead of getting the record by its index position (getAt()); this is not only slower, but only works because you are using sequential IDs that coincide with the index. If you used IdProperty="company", the code would match no record at all. Although it is enough to understand your needs in the test case, do pay atention not to rely in this assumption in your production algorithm, to be in the safe side.

There won't be nice "remove" method to manipulate the "non paged" data (all data), and JavaScript array functions are used instead.

Hope this helps and clarifies your questions.

Thread: Problem with removing records from grid

Thread Tools

Search Thread

Display

Problem with removing records from grid

Similar Threads

How to select one record out of 4 selected records and drag from one grid to sec grid (without un select of 3 records).

[CLOSED] problem to removing column in code behind

How to drag grid rows onto a tree without removing the row from the grid

Re-number a 'RowNumbererColumn' after removing records from a store

[CLOSED] Problem with showing and removing Mask on Portlet

Posting Permissions

Sitemap

Downloads

Resources

Thread: Problem with removing records from grid

Problem with removing records from grid

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us