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?
Printable View
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?
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.
Do you have an example of rerendering a user control from the server side?
Well, it needs to re-render a grid.
Here is the simple example.
Example Page
Example User ControlCode:<%@ 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>
Code:<%@ 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>
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?
I get all sorts of errors when calling render on the grid. Is there another strategy for resetting a grid?
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.
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().
ExampleQuote:
After resizing, moving, sorting, etc,
Code:<%@ 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>