[CLOSED] Reset Grid state on client

  1. #1

    [CLOSED] Reset Grid state on client

    Hello
    is there a way how to reset grid state to initial state (columns) of the grid?
    I tried couple of ways from forum and none worked for me

    I'm using

      function resetState() {
    	        var grid = <%= GridPanel1.ClientID %>
    	        Ext.state.Manager.clear(grid.stateId);
    			grid.reconfigure(grid.getStore(), grid.getColumns());
    		}

    full source here:

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
            }
        }
    
        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 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>
            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 + "%");
            };
    
            Ext.onReady(function () {
    		
    	        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
            });
            function resetState() {
    	        var grid = <%= GridPanel1.ClientID %>
    	        Ext.state.Manager.clear(grid.stateId);
    			grid.reconfigure(grid.getStore(), grid.getColumns());
    		}
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <h1>Simple Array Grid</h1>
    
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Array Grid"
            Width="700"
    		StateID="gridID"
    		Stateful="True"
            Height="350">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model 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 runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column runat="server" Text="Price" DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="change">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="120" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
            <BottomBar>
                <ext:Toolbar runat="server">
                    <Items>
    	                
    	                <ext:Button runat="server" Text="Reset State" Icon="Printer" Handler="resetState();" />
                        <ext:Button runat="server" Text="Print" Icon="Printer" Handler="this.up('grid').print();" />
                    </Items>
                </ext:Toolbar>
            </BottomBar>
        </ext:GridPanel>
    </body>
    </html>
    Thanks
    Last edited by fabricio.murta; Jun 14, 2018 at 9:30 PM.
  2. #2
    Hello @jirihost!

    In the example you provided I don't see it saving state so, every time I reload the page its setup is not retained at all. So there's nothing actually to save.

    Sate saving/resuming makes sense in a context where you set up the component the way you want, then navigate outside the page and back, and the component's setup is retained as you left last time.

    Something like this example (it does not provide a means to clear its state though): Drag and Drop with State.

    Further investigating your example I found two issues:

    1. You do not init the state manager by the time the grid panel is rendered. You wait everything to render before you load state manager. This means the grid is never going to restore its saved state. Unwrap the Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); call from the Ext.onReady() context. Call it straight from the js block itself. Yes, that's that simple, just call it at once without waiting onReady(), it must be set after Ext.NET resources are added but before page is rendered. Ext.NET resources (in the example you provided) will be injected before that <script></script> block.

    2. You'd better passing grid's initial config, else you will just be passing the actual columns with their saved state, so no change ever happens. To do so, change the reconfigure line to: grid.reconfigure(grid.getStore(), grid.getInitialConfig().columns.items); (notice the 'columns.items', not just 'columns').

    With that, I'm pretty confident we could get to the behavior you wanted.

    Hope this helps!

    EDIT: in the first paragraph I wanted to say "I don't see the grid restoring the state anywhere". So there was no way to really see if the state saving was working at all.
  3. #3
    this code

    grid.getInitialConfig().columns.items)
    solved my problem, thanks

    (And I apologize for creating not fully working sample, in our live app it's of course setup correctly)
  4. #4
    Hello @jirihost!

    Alright, glad you could address the issue you were having, thank you very much for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Reset Grid
    By CanopiusApplications in forum 2.x Premium Help
    Replies: 5
    Last Post: Jan 17, 2014, 11:54 AM
  2. [CLOSED] how reset a combobox to the default state
    By tobros in forum 2.x Premium Help
    Replies: 1
    Last Post: Jun 13, 2013, 3:34 AM
  3. [CLOSED] Reset GridPanel columns to initial state
    By jmcantrell in forum 1.x Premium Help
    Replies: 12
    Last Post: Jul 18, 2011, 6:21 PM
  4. [CLOSED] Change toggle state form server or client side
    By caha76 in forum 1.x Premium Help
    Replies: 2
    Last Post: Feb 19, 2011, 9:46 PM
  5. Reset Grid Pager
    By kumarxlnt in forum 1.x Help
    Replies: 2
    Last Post: Jan 08, 2010, 6:01 AM

Posting Permissions