[CLOSED] [1.0] How to save Gridpanel Column configuration to Cookie?

  1. #1

    [CLOSED] [1.0] How to save Gridpanel Column configuration to Cookie?

    Hi,

    Suppose a user hides/shows a column or changes the column width, can this change be saved on a cookie and then be reloaded the next time the user logs in? Do you have a sample code for it? Thanks much!

    Regards,
    Marcelo
  2. #2
    Hi,

    Please set StateProvider="Cookie" for ResourceManager and set ColumnID for each grid's column
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    Hi Vlad,

    Thanks for the response.

    I followed your suggestion, set the StateProvider to 'cookie' and set columnIDs for each columns. I hide the Price column, and hit refresh on the browser. After refresh, the price column still appears. What I am trying to accomplish is the price should not be displayed after refresh as I had hidden it prior to refresh. Is this doable? Maybe I am missing something here, and your help would be greatly appreciated

    Here's my code:

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new List<Company> 
                { 
                    new Company(0, "3m Co", "", 71.72, 0.02, 0.03),
                    new Company(1, "Alcoa Inc", "", 29.01, 0.42, 1.47),
                    new Company(2, "Altria Group Inc", "", 83.81, 0.28, 0.34),
                    new Company(3, "American Express Company","",  52.55, 0.01, 0.02),
                    new Company(4, "American International Group, Inc.", "", 64.13, 0.31, 0.49),
                    new Company(5, "AT&T Inc.", "", 31.61, -0.48, -1.54),
                    new Company(6, "Boeing Co.", "", 75.43, 0.53, 0.71),
                    new Company(7, "Caterpillar Inc.", "", 67.27, 0.92, 1.39),
                    new Company(8, "Citigroup, Inc.","",  49.37, 0.02, 0.04),
                    
                };
    
                this.Store1.DataBind();
    
                if (!this.IsPostBack)
                {
                    RowSelectionModel sm = this.GridPanel1.SelectionModel.Primary as RowSelectionModel;
    
                    sm.SelectedRow = new SelectedRow(2);
                   
                    sm.SelectedRows.Add(new SelectedRow(2));
                    sm.SelectedRows.Add(new SelectedRow("11"));
                }
            }
       }
    
        protected void Button2_Click(object sender, DirectEventArgs e)
        {
            StringBuilder result = new StringBuilder();
            
            result.Append("<b>Selected Rows</b></br /><ul>");
            RowSelectionModel sm = this.GridPanel1.SelectionModel.Primary as RowSelectionModel;
    
            foreach (SelectedRow row in sm.SelectedRows)
            {
                result.Append("<li>" + row.RecordID + "</li>");
            }
    
            result.Append("</ul>");
            this.Label1.Html = result.ToString();
        }
    
        public class Company
        {
            public Company(int id, string name, string description, double price, double change, double pctChange)
            {
                this.ID = id;
                this.Name = name;
                this.Price = price;
                this.Change = change;
                this.PctChange = pctChange;
            }
    
            public int ID { get; set; }
            public string Name { get; set; }
            public string Description { get; set; }
            public double Price { get;set; }
            public double Change { get;set; }
            public double PctChange { get;set; }
        }
    </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 id="Head1" runat="server">
        <title>GridPanel with Checkbox Selection Model - Ext.NET Examples</title>
        
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    
        
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            }
    
            var pctChange = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            }
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" StateProvider="Cookie" />
            
            <h1>GridPanel with Checkbox Selection Model</h1>
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="ID">
                        <Fields>
                            <ext:RecordField Name="ID" />
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="Description" />
                            <ext:RecordField Name="Price" />
                            <ext:RecordField Name="Change" />
                            <ext:RecordField Name="PctChange" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1"
                StripeRows="true"
                Title="Company List"
                AutoExpandColumn="Company" 
                Collapsible="true"
                Width="600"
                Height="350" ClicksToEdit="2">
                <ColumnModel ID="ColumnModel1" runat="server">
    		        <Columns>
                        <ext:Column ColumnId="Company" Header="Company" Width="160" DataIndex="Name" Resizable="false" MenuDisabled="true" Fixed="true" />
                        <ext:Column ColumnID="Price" Header="Price" Width="75" DataIndex="Price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column ColumnID="Description" Header="Description" DataIndex="Description">
                            <Editor>
                                <ext:TextField ID="txtDescription" runat="server">
                                    <Listeners>
                                        <KeyUp Handler="alert('test')"; />
                                    </Listeners>
                                </ext:TextField>
                            </Editor>
                        </ext:Column>
                        <ext:Column ColumnID="Change" Header="Change" Width="75" DataIndex="Change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column ColumnID="PctChange" Header="Change" Width="75" DataIndex="PctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
    		        </Columns>
                </ColumnModel>
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10" StoreID="Store1" DisplayInfo="false" />
                </BottomBar>
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" />
                </SelectionModel>
                <Buttons>
                    <ext:Button ID="Button2" runat="server" Text="Submit Selected Records">
                        <DirectEvents>
                            <Click OnEvent="Button2_Click">
                                <EventMask ShowMask="true" />
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                </Buttons>
            </ext:GridPanel>
            
            <div style="width:590px; border:1px solid gray; padding:5px;">
                <ext:Label ID="Label1" runat="server" />
            </div>
        </form>
      </body>
    </html>
    Regards,
    Marcelo
  4. #4
    Hi,

    Yes, latest ExtJS has a bug which prevents restore the state. Fixed in SVN
    If you don't want to update from SVN then add the following code to the page head
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles"/>
    <script type="text/javascript">
       Ext.grid.ColumnModel.override({
          setState : function(col, state) {
             Ext.applyIf(this.lookup[col], state);
          }
       });
    </script>
    Vladimir Shcheglov
    Sr. Developer
  5. #5
    Hi Vlad,

    It works! Thank you so much for this. Please mark as solved.

    Regards,
    Marcelo

Similar Threads

  1. Replies: 2
    Last Post: Apr 07, 2012, 6:40 AM
  2. [CLOSED] Cookie Provider - how to limit cookie size?
    By voipswitch in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Aug 12, 2011, 1:47 PM
  3. Replies: 1
    Last Post: Jul 27, 2011, 10:19 AM
  4. [CLOSED] GridPanel Column Size Restore from Cookie
    By ecerrillos in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Oct 29, 2010, 7:05 PM
  5. Replies: 1
    Last Post: Sep 29, 2010, 3:10 PM

Posting Permissions