Aug 11, 2011, 6:15 AM
[CLOSED] Saving grid state using CookieProvider - problem
Hi,
On Ext.Net 1.1 I have problem with saving grid state. I use CookieProvider. After some modifications on grid view (moving, hiding, resizing columns) and reopening tab (I'm saying about my example) hidden columns remain visible (sometimes not), widths are restored to the values defined in markup, columns order differs from defined by user (sometimes not). I have tested this on IE7, FF5, Chrome13 and problem appears on each browser.
Grid has set Stateful and StateID properties. What am I doing wrong?
Thanks in advance for help.
Sample code:
Main form:
FirstPage:
On Ext.Net 1.1 I have problem with saving grid state. I use CookieProvider. After some modifications on grid view (moving, hiding, resizing columns) and reopening tab (I'm saying about my example) hidden columns remain visible (sometimes not), widths are restored to the values defined in markup, columns order differs from defined by user (sometimes not). I have tested this on IE7, FF5, Chrome13 and problem appears on each browser.
Grid has set Stateful and StateID properties. What am I doing wrong?
Thanks in advance for help.
Sample code:
Main form:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="ctHtml" xmlns="http://www.w3.org/1999/xhtml">
<head id="ctHead" runat="server">
<title></title>
</head>
<body id="ctBody">
<form id="Form1" runat="server">
<ext:ResourceManager ID="rmResource" runat="server" StateProvider="Cookie" />
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:Panel ID="pnlMenu" Frame="true" runat="server" Title="Menu"
Region="West" Collapsible="true" Width="160" Border="false">
<Content>
<ext:MenuPanel runat="server">
<Menu runat="server">
<Items>
<ext:MenuItem ID="miFirstTab" runat="server" Text="First tab">
<Listeners>
<Click Handler="var tab = #{tpTabs}.add({id: 'firstTab', title: 'First tab', hideMode: 'offsets',
closable: true, layout: 'fit', autoLoad: { showMask: true,
maskMsg: 'First tab', url : 'FirstPage.aspx', mode : 'iframe'}});
#{tpTabs}.setActiveTab(tab);" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="miSecondTab" runat="server" Text="Second tab">
<Listeners>
<Click Handler="var tab = #{tpTabs}.add({id: 'secondTab', title: 'Second tab', hideMode: 'offsets',
closable: true, layout: 'fit', autoLoad: { showMask: true,
maskMsg: 'Second tab', url : 'SecondPage.aspx', mode : 'iframe'}});
#{tpTabs}.setActiveTab(tab);" />
</Listeners>
</ext:MenuItem>
</Items>
</Menu>
</ext:MenuPanel>
</Content>
</ext:Panel>
<ext:Panel ID="Panel2" runat="server" Layout="FitLayout" Region="Center">
<Items>
<ext:TabPanel ID="tpTabs" runat="server" ActiveTabIndex="0" Border="false" EnableTabScroll="true"
DeferredRender="false" ForceLayout="true">
<Items>
<ext:Panel ID="Panel3" runat="server" Title="Home" Icon="House"/>
</Items>
</ext:TabPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>FirstPage:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FirstPage.aspx.cs" Inherits="VS.WebGUI.FirstPage" %>
<%@ Import Namespace="System.Collections.Generic"%>
<!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></title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!ExtNet.IsAjaxRequest)
{
strPersonStore.DataSource = TestData;
strPersonStore.DataBind();
}
}
private List<Person> TestData
{
get
{
var list = new List<Person>
{
new Person {Id = 1, Name = "Xyz", Address = "Address1", Age = 59},
new Person {Id = 2, Name = "Qwerty", Address = "zxcvb", Age = 12},
new Person {Id = 3, Name = "poiuy", Address = "sdfgt", Age = 10},
new Person {Id = 7, Name = "12331", Address = "55335", Age = 109}
};
return list;
}
}
private class Person
{
public int Id { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public int Age { get; set; }
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="rmResource" runat="server" AjaxViewStateMode="Enabled" StateProvider="Cookie" />
<ext:GridPanel ID="gpPersonGrid" runat="server" Width="300" Height="200" Stateful="true" StateID="statePersonGrid">
<Store>
<ext:Store ID="strPersonStore" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Id" Type="Int"/>
<ext:RecordField Name="Name" Type="String"/>
<ext:RecordField Name="Address" Type="String" />
<ext:RecordField Name="Age" Type="Int" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="cmModel" runat="server">
<Columns>
<ext:Column Header="ID" DataIndex="Id" Width="40"/>
<ext:Column Header="Name" DataIndex="Name" Width="100" />
<ext:Column Header="Address" DataIndex="Address" Width="200" />
<ext:Column Header="Age" DataIndex="Age" Width="50" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" SingleSelect="true" />
</SelectionModel>
</ext:GridPanel>
</form>
</body>
</html><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SecondPage.aspx.cs" Inherits="VS.WebGUI.SecondPage" %>
<%@ Import Namespace="System.Collections.Generic"%>
<!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></title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!ExtNet.IsAjaxRequest)
{
strFlowerStore.DataSource = TestData;
strFlowerStore.DataBind();
}
}
private List<Flower> TestData
{
get
{
var list = new List<Flower>
{
new Flower {Id = 1, Name = "Xyz", Colour = "Blue", Height = 1},
new Flower {Id = 2, Name = "Qwerty", Colour = "White", Height = 1},
new Flower {Id = 3, Name = "poiuy", Colour = "Orange", Height = 3},
new Flower {Id = 7, Name = "12331", Colour = "Transparent", Height = 20}
};
return list;
}
}
private class Flower
{
public int Id { get; set; }
public string Name { get; set; }
public string Colour { get; set; }
public int Height { get; set; }
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="rmResource" runat="server" AjaxViewStateMode="Enabled" StateProvider="Cookie" />
<ext:GridPanel ID="gpFlowerGrid" runat="server" Width="500" Height="200" Stateful="true" StateID="stateFlowerGrid">
<Store>
<ext:Store ID="strFlowerStore" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Id" Type="Int"/>
<ext:RecordField Name="Name" Type="String"/>
<ext:RecordField Name="Colour" Type="String" />
<ext:RecordField Name="Height" Type="Int" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="cmModel" runat="server">
<Columns>
<ext:Column ColumnID="ID" Header="ID" DataIndex="Id" Width="40"/>
<ext:Column ColumnID="Name" Header="Name" DataIndex="Name" Width="100" />
<ext:Column ColumnID="Colour" Header="Colour" DataIndex="Colour" Width="200" />
<ext:Column ColumnID="Height" Header="Height" DataIndex="Height" Width="50" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" SingleSelect="true" />
</SelectionModel>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Aug 11, 2011 at 12:47 PM.
Reason: [CLOSED]
