Problem with client side grid and selection

**jirihost** · Sep 13, 2021, 5:15 AM

Hello
I need to bind grid that has paging enabled with clientside data and my problem is that selectionModel returns only records on current page

I'm using this code

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);

     
		}

problematic line is probably grid.loadPage(1), hovewer if i remove the line, grid is not paged after loaded

full example is just little modified
https://examples5.ext.net/#/GridPane...rayWithPaging/

in order to reproduce problem click "load data" and then "get selection" button, Selection returns 1 even there are 3 reords selected

full code :

<%@ 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>
        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 getSelection() {
            var grid = <%= GridPanel1.ClientID %>;
            var selection = grid.getSelectionModel().getSelection();
            alert(selection.length); // returns 1 hovewer expected to return 3 as 3 records are selected (1,11,12)
        }

		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);

            grid.getSelectionModel().select(1, true);
            grid.getSelectionModel().select(11, true);
            grid.getSelectionModel().select(12,true);
            
            grid.getView().refresh();
		}
	</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="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="Get Selection" Icon="Printer" Handler="getSelection()" />
                        
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:GridPanel>
    </form>
</body>
</html>

**fabricio.murta** · Sep 14, 2021, 6:07 AM

Hello @jirihost!

Thanks for the straightforward test case, I am confident it's going to allow us provide you a good answer for your need!

So, having a paging toolbar, selection is really constrained to the current grid's "view". What keeps selection across pages is a feature called Selection Memory. And to pull yourself data from it, you can change your implementation of getSelection() into this:

function getSelection() {
    var grid = <%= GridPanel1.ClientID %>,
        selectionMemory = grid.getSelectionMemory(),
        memoryStore = selectionMemory.store,
        currentSelectedRecords = [];

    for (var recordId in selectionMemory.selectedIds) {
        currentSelectedRecords.push(memoryStore.getById(recordId));
    }

    alert(currentSelectedRecords.length);
}

If all you need is the selected ID's you can skip all getById() loop. selectionMemory.selectedIds is not an array, it is an object in which the keys are the ID of the record (however you set the idProperty in the store), but there's also an index within that structure, which you can use to just store.getAt(index) if your choice is to get data by the store's internal position instead of its "id" (could be faster for lots of data!).

Well, hope this helps!

**jirihost** · Sep 14, 2021, 8:05 AM

Ok thanks

Just explanation for my understanding - is there any reason why not to use "Selection Memory" feature for any grid selection retrieving?
means will it work if grid is paged on server ( means store with RemotePaging="true"), or if grid is bound using proxy ( for example PageProxy)?

or is your getSelection method in previous post "always working way" how to get grid selection, no matter how it was bound?
Thanks

**fabricio.murta** · Sep 14, 2021, 11:13 PM

Hello again, @jirihost!

Well, when we're talking about remote paging, while selection memory will be able to keep the ID's of what is selected (thus re-selecting as they are brought in to view), you won't be able to retrieve the actual records like the suggested function does (our last post). Simply because when it is remote paging, the data is not available client-side. You would be able to tell which position in the store or record's idProperty, but no other detailed information on the selected record unless it is available as local paging.

I believe you should be good with local paging up to some thousand records. Beyond that, it sounds reasonable to fetch from server details of the selected records no matter where they are.

Originally Posted by jirihost

or is your getSelection method in previous post "always working way" how to get grid selection, no matter how it was bound?

It should work for the scenario you provided but, as said above, it is likely to fail with memoryStore.getById() if that record is not loaded in the store.

Hope this helps!

**jirihost** · Sep 17, 2021, 12:03 PM

Hello

I created another sample, with remote data (client side paging) and local data ( as original sample)

It differs little differently, as soon as I start page my record

The remote data - on first page it display (in alert - using getselection ) 1 record, if I switch to second page it display 2 records, in any other page 3 records. Any explanation of logic behind that

<%@ 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 getSelection() {
            var grid = <%= GridPanel1.ClientID %>;
            var selection = grid.getSelectionModel().getSelection();


            alert(selection.length); // returns 1 hovewer expected to return 3 as 3 records are selected (1,11,12)
        }

        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.getSelectionModel().select(grid.store.getById(1), true);
			grid.getSelectionModel().select(grid.store.getById(11), true);
			grid.getSelectionModel().select(grid.store.getById(15), true);

            grid.store.loadPage(1);

          
            grid.getView().refresh();
        }

        function loadDataFromServer() {
            var grid = <%= GridPanel1.ClientID %>;
            
            grid.store.on('load',
	            function () {
		            grid.getSelectionModel().select(grid.store.getById(1), true);
					grid.getSelectionModel().select(grid.store.getById(11), true);
					grid.getSelectionModel().select(grid.store.getById(15), true);

                });

            grid.store.reload(null);
        }

		
	</script>
    
    <script runat="server">
        [DirectMethod]
	public static object[] DirectMethodLoad(string action, Dictionary<string, object> extraParams)
	{
		List<object> ret = new List<object>();
		for (var i = 0; i < 100; i++) {
			ret.Add( new {
				id= i,
				company= "Company" + i
			});
		}
		return ret.ToArray();
	}
    
    </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" AutoLoad="False" RemoteSort="false" RemotePaging="false">
                    <Model>
                        <ext:Model runat="server" IDProperty="id">
                            <Fields>
	                            <ext:ModelField Name="id" />
                                <ext:ModelField Name="company" />
                               
                            </Fields>
                        </ext:Model>
                    </Model>
	                <Proxy>
		                <ext:PageProxy DirectFn="Ext.net.DirectMethods.DirectMethodLoad" />
	                </Proxy>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <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 Client" Icon="Printer" Handler="loadData()" />
	                    <ext:Button runat="server" Text="Load Data Server" Icon="Printer" Handler="loadDataFromServer()" />
                        <ext:Button runat="server" Text="Get Selection" Icon="Printer" Handler="getSelection()" />
	                    
	                    
                        
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:GridPanel>
    </form>
</body>
</html>

Thanks

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

Hello @Jirihost!

Just by looking to your updated code sample I don't see attempts to use the SelectionMemory concept we highlighter earlier. Have you had no luck using the SelectionMemory to keep selection? Perhaps you drafted that same sample code using SelectionMemory and it didn't work? If so, would you mind sharing how you tried it?

Your goal here is still the same, right? In other words, the goal is, with remote paging, bring the selection from a persistence (cookie/database/cache), and get the records selected as you page around. Is that correct?

Thread: Problem with client side grid and selection

Thread Tools

Search Thread

Display

Problem with client side grid and selection

Similar Threads

GridPanel looses selection when updating row on client side

MultiCombo - Determine if Selection Client Side

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

GridPanel - Set Selection client side based upon store value?

[CLOSED] [1.0] Colorpalette client-side color selection

Posting Permissions

Sitemap

Downloads

Resources

Thread: Problem with client side grid and selection

Problem with client side grid and selection

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us