[CLOSED] Reset GridPanel columns to initial state

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Reset GridPanel columns to initial state

    After resizing, moving, sorting, etc, is there a way to reset a GridPanel's columns to the way they were when the page was initially loaded?
    Last edited by Daniil; Jul 25, 2011 at 9:57 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Well, there is no such functionality to revert all changes.

    I can suggest you to isolate a grid into a user control and re-render it from server side when needed.
  3. #3
    Do you have an example of rerendering a user control from the server side?
  4. #4
    Well, it needs to re-render a grid.

    Here is the simple example.

    Example Page

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            MyGrid uc = (MyGrid)this.LoadControl("TestUC.ascx");
            uc.ID = "MyGrid1";
            this.Panel1.ContentControls.Add(uc);
    
            if (!X.IsAjaxRequest)
            {
                uc.DataBind();
            }
        }
    
        protected void Reset(object sender, DirectEventArgs e)
        {
            MyGrid uc = (MyGrid)this.FindControl("MyGrid1");
            uc.Reset();
        }
    </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>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Panel ID="Panel1" runat="server" Width="400" Height="300" />
            <ext:Button runat="server" Text="Reset" OnDirectClick="Reset" />
        </form>
    </body>
    </html>
    Example User Control

    <%@ Control Language="C#" ClassName="MyGrid" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        public void DataBind()
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test11", "test12", "test13" },
                new object[] { "test12", "test22", "test23" },
                new object[] { "test13", "test32", "test33" }
            };
            store.DataBind();
        }
    
        public void Reset()
        {
            this.DataBind();
            this.GridPanel1.Render();
        }
    </script>
    
    <ext:FitLayout runat="server">
        <Items>
            <ext:GridPanel ID="GridPanel1" runat="server" Stateful="false">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                    <ext:RecordField Name="test3" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" />
                        <ext:Column Header="Test2" DataIndex="test2" />
                        <ext:Column Header="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </Items>
    </ext:FitLayout>
  5. #5
    Ok. That example appears to do what I'm looking for, but I have a few questions so I can better understand what's going on.

    Why is it necessary to isolate the grid into a user control? Couldn't I just call grid.render() in the page it's in currently?

    This is probably a dumb question but how does it know what the initial state of the grid is? What exactly is happening when .render() is called?
  6. #6
    Quote Originally Posted by jmcantrell View Post
    Why is it necessary to isolate the grid into a user control? Couldn't I just call grid.render() in the page it's in currently
    Well, you are right, a user control is not required.

    Quote Originally Posted by jmcantrell View Post
    how does it know what the initial state of the grid is? What exactly is happening when .render() is called?
    It just destroy a grid and render a new one.
  7. #7
    I get all sorts of errors when calling render on the grid. Is there another strategy for resetting a grid?
  8. #8
    Did you try the example I posted? It works fine without any errors.

    About another strategy. You can try to save all operations using Listeners. It will require a lot of coding.
  9. #9
    Regarding the errors... yes, your example worked fine, but the control that I'm trying to use this strategy on has a grid panel that is getting its data using ajax. i'm also calling some javascript in the code behind that unchecks all of the selected rows. It seems that I can't just call .render() any time I want it to reset, as I get errors complaining about not being able to find certain elements.

    Are there any guidelines for when I can call .render() or anything that needs to be in place beforehand?
  10. #10
    Quote Originally Posted by jmcantrell View Post
    Regarding the errors... yes, your example worked fine, but the control that I'm trying to use this strategy on has a grid panel that is getting its data using ajax. i'm also calling some javascript in the code behind that unchecks all of the selected rows. It seems that I can't just call .render() any time I want it to reset, as I get errors complaining about not being able to find certain elements.

    Are there any guidelines for when I can call .render() or anything that needs to be in place beforehand?
    Well, you don't demonstrate the code, so I'm in trouble how exactly I can help.

    And there is no any guidelines on .Render() as far as I can know.

    On other hand, I can suggest you the other way to achieve the requirement if you are in trouble with .Render().

    After resizing, moving, sorting, etc,
    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[] { "test11", "test12", "test13" },
                    new object[] { "test12", "test22", "test23" },
                    new object[] { "test13", "test32", "test33" }
                };
                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>
    
        <script type="text/javascript">
            var saveConfig = function (grid) {
                var cm = grid.getColumnModel();
                grid.ic = [];
                Ext.each(cm.config, function (c, index) {
                    grid.ic[index] = {};
                    grid.ic[index].id = c.id;
                    grid.ic[index].width = c.width;
                });
            };
            
            var restoreConfig = function (grid) {
                var ic = grid.ic,
                    cm = grid.getColumnModel();
                Ext.each(ic, function (c, index) {
                    cm.moveColumn(cm.getIndexById(c.id), index);
                    cm.setColumnWidth(index, c.width);
                });
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                AutoHeight="true" 
                Stateful="false">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                    <ext:RecordField Name="test3" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" Width="200" />
                        <ext:Column Header="Test2" DataIndex="test2" />
                        <ext:Column Header="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <AfterRender Handler="saveConfig(this);" />
                </Listeners>
            </ext:GridPanel>
            <ext:Button runat="server" Text="Reset">
                <Listeners>
                    <Click Handler="restoreConfig(GridPanel1);
                                    var store = GridPanel1.getStore();
                                    store.sort(store.sortInfo.field, store.sortInfo.dir);" />
                </Listeners>
            </ext:Button>
        </form>
    </body>
    </html>
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] GridPanel - state for columns
    By PatrikG in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 13, 2012, 2:48 PM
  2. [CLOSED] [1.0] GridPanel's reconfigure reset columns' filter property
    By PoloTheMonk in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Sep 21, 2011, 11:39 AM
  3. Accordion Layout initial state
    By dcrysler in forum 1.x Help
    Replies: 1
    Last Post: Jul 15, 2011, 9:53 PM
  4. Replies: 0
    Last Post: May 09, 2011, 10:58 AM
  5. Replies: 3
    Last Post: Dec 03, 2010, 5:27 PM

Tags for this Thread

Posting Permissions