[CLOSED] GridPanel column editors with "reset" button?

  1. #1

    [CLOSED] GridPanel column editors with "reset" button?

    Hi,

    I have a requirement to provide a "reset" or "set-to-null" button for every editor assigned to the GridPanel column. Instead of making the field editable and having to manually remove the text, the client prefers a one click solution that will set the value of cell being edited to NULL or empty. I understand that can be relatively easily accomplished using TriggerFields and there's a good example of how to do it. My question is whether it's doable without making use of TriggerFields for cases with simple column editors like TextField, TextArea or DateField. Maybe, DropDownField can be used in that capacity? I'm trying to avoid employing TriggerFields for atomic editors if possible, otherwise, they would have to be hosted on one or more popup windows. Please advise what my options are or let me know if the info I've provided is inadequate. Below is a recent code sample created by Baidaly for an unrelated issue to get started.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Data" %>
    <script runat="server">
        public class Company
        {
            public int ID { get; set; }
            public string Name { get; set; }
            public double Price { get; set; }
            public double Change { get; set; }
            public double PctChange { get; set; }
            public DateTime LastChange { get; set; }
        }
         
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
     
        private void BindData()
        {
            this.GridPanel1.Store.Primary.DataSource = this.GetData();
            this.GridPanel1.Store.Primary.DataBind();
        }
     
        private List<Company> GetData()
        {
            return new List<Company>
            {
                new Company { ID = 1, Name = "3m Co", Price = 71.72, Change = 0.02, PctChange = 0.03, LastChange = DateTime.Now },
                new Company { ID = 2, Name = "Alcoa Inc", Price = 29.01, Change = 0.42, PctChange = 1.47, LastChange = DateTime.Now },
                new Company { ID = 3, Name = "Altria Group Inc", Price = 83.81, Change = 0.28, PctChange = 0.34, LastChange = DateTime.Now },
                new Company { ID = 4, Name = "American Express Company", Price = 52.55, Change = 0.01, PctChange = 0.02, LastChange = DateTime.Now },
                new Company { ID = 5, Name = "American International Group, Inc.", Price = 64.13, Change = 0.31, PctChange = 0.49, LastChange = DateTime.Now },
                new Company { ID = 6, Name = "AT&T Inc.", Price = 31.61, Change = -0.48, PctChange = -1.54, LastChange = DateTime.Now },
                new Company { ID = 7, Name = "Boeing Co.", Price = 75.43, Change = 0.53, PctChange = 0.71, LastChange = DateTime.Now },
                new Company { ID = 8, Name = "Caterpillar Inc.", Price = 67.27, Change = 0.92, PctChange = 1.39, LastChange = DateTime.Now },
                new Company { ID = 9, Name = "Citigroup, Inc.", Price = 49.37, Change = 0.02, PctChange = 0.04, LastChange = DateTime.Now },
                new Company { ID = 10, Name = "E.I. du Pont de Nemours and Company", Price = 40.48, Change = 0.51, PctChange = 1.28, LastChange = DateTime.Now },
                new Company { ID = 11, Name = "Exxon Mobil Corp", Price = 68.1, Change = -0.43, PctChange = -0.64, LastChange = DateTime.Now },
                new Company { ID = 12, Name = "General Electric Company", Price = 34.14, Change = -0.08, PctChange = -0.23, LastChange = DateTime.Now },
                new Company { ID = 13, Name = "General Motors Corporation", Price = 30.27, Change = 1.09, PctChange = 3.74, LastChange = DateTime.Now },
                new Company { ID = 14, Name = "Hewlett-Packard Co.", Price = 36.53, Change = -0.03, PctChange = -0.08, LastChange = DateTime.Now },
                new Company { ID = 15, Name = "Honeywell Intl Inc", Price = 38.77, Change = 0.05, PctChange = 0.13, LastChange = DateTime.Now },
                new Company { ID = 16, Name = "Intel Corporation", Price = 19.88, Change = 0.31, PctChange = 1.58, LastChange = DateTime.Now },
                new Company { ID = 17, Name = "International Business Machines", Price = 81.41, Change = 0.44, PctChange = 0.54, LastChange = DateTime.Now },
                new Company { ID = 18, Name = "Johnson & Johnson", Price = 64.72, Change = 0.06, PctChange = 0.09, LastChange = DateTime.Now },
                new Company { ID = 19, Name = "JP Morgan & Chase & Co", Price = 45.73, Change = 0.07, PctChange = 0.15, LastChange = DateTime.Now },
                new Company { ID = 20, Name = "McDonald\"s Corporation", Price = 36.76, Change = 0.86, PctChange = 2.40, LastChange = DateTime.Now },
                new Company { ID = 21, Name = "Merck & Co., Inc.", Price = 40.96, Change = 0.41, PctChange = 1.01, LastChange = DateTime.Now },
                new Company { ID = 22, Name = "Microsoft Corporation", Price = 25.84, Change = 0.14, PctChange = 0.54, LastChange = DateTime.Now },
                new Company { ID = 23, Name = "Pfizer Inc", Price = 27.96, Change = 0.4, PctChange = 1.45, LastChange = DateTime.Now },
                new Company { ID = 24, Name = "The Coca-Cola Company", Price = 45.07, Change = 0.26, PctChange = 0.58, LastChange = DateTime.Now },
                new Company { ID = 25, Name = "The Home Depot, Inc.", Price = 34.64, Change = 0.35, PctChange = 1.02, LastChange = DateTime.Now },
                new Company { ID = 26, Name = "The Procter & Gamble Company", Price = 61.91, Change = 0.01, PctChange = 0.02, LastChange = DateTime.Now },
                new Company { ID = 27, Name = "United Technologies Corporation", Price = 63.26, Change = 0.55, PctChange = 0.88, LastChange = DateTime.Now },
                new Company { ID = 28, Name = "Verizon Communications", Price = 35.57, Change = 0.39, PctChange = 1.11, LastChange = DateTime.Now },
                new Company { ID = 29, Name = "Wal-Mart Stores, Inc.", Price = 45.45, Change = 0.73, PctChange = 1.63, LastChange = DateTime.Now }
            };
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head id="Head1" runat="server">
        <script type="text/javascript">
            var setEditor = function (e) {
                var column = e.grid.getColumnModel().columns[e.column],
                    ed = column.getCellEditor(e.row);
    
                if (ed) {
                    ed.destroy();
                }
    
                switch ((e.record.get("ID") % 2)) {
                    case 0:
                        column.setEditor(new Ext.form.TextField({
                            listeners: {
                                blur: {
                                    fn: function (item, record, index) {
                                        e.record.set("value", this.getValue());
                                    }
                                }
                            }
                        }));
                        break;
    
                    case 1:
                        column.setEditor(new Ext.form.TextArea({
                            listeners: {
                                blur: {
                                    fn: function (item, record, index) {
                                        e.record.set("value", this.getValue());
                                    }
                                }
                            }
                        }));
                        break;
                };
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" RemoveViewState="true" IDMode="Explicit" />
         
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Editable GridPanel"
            StripeRows="true"
            TrackMouseOver="true"
            Width="600"
            Height="350"
            AutoExpandColumn="Name">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:JsonReader IDProperty="ID">
                            <Fields>
                                <ext:RecordField Name="ID" Type="Int" />
                                <ext:RecordField Name="Name" />
                                <ext:RecordField Name="Price" Type="Float" />
                                <ext:RecordField Name="Change" Type="Float" />
                                <ext:RecordField Name="PctChange" Type="Float" />
                                <ext:RecordField Name="LastChange" Type="Date" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column Header="ID" DataIndex="ID" Width="35" />
                    <ext:Column ColumnID="Name" Header="Name" DataIndex="Name">
                        <Editor>
                            <ext:TextField ID="TextField1" runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Price" DataIndex="Price">
                        <Editor>
                            <ext:TextField ID="TextField2" runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Change" DataIndex="Change">
                        <Editor>
                            <ext:TextField ID="TextField3" runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Change" DataIndex="PctChange">
                        <Editor>
                            <ext:TextField ID="TextField4" runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:DateColumn Header="Last Updated" DataIndex="LastChange" Format="yyyy-MM-dd">
                        <Editor>
                            <ext:DateField ID="DateField1" runat="server" />
                        </Editor>
                    </ext:DateColumn>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
            </SelectionModel>
            <Listeners>
                <BeforeEdit Fn="setEditor"></BeforeEdit>
            </Listeners>
        </ext:GridPanel>         
    </body>
    </html>
    Last edited by Daniil; Nov 14, 2012 at 1:05 PM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    This code within a BeforeEdit listener clears a value.
    e.record.data[e.field] = "";
    Last edited by Daniil; Nov 13, 2012 at 4:08 PM.
  3. #3
    Oops, my bad. It's become a bit of a challenge maintaining clean code samples. Thanks for pointing out Daniil, could you also remove it from the thread?
    I'm not quite clear on
    e.record.data[e.field] = "";
    I actually need a UI button looking similar to a FieldTrigger to invoke the code that resets the field. I was wondering if it can be created along with the editor but not using TriggerField.
  4. #4
    I understand the requirement now. But, unfortunately, I can't see any good possibility to achieve this except a TriggerField. Or a CompositeField which, probably, will be harder than using a TriggerField.
  5. #5
    Thanks Daniil, I'll probably have to make do with TriggerFields to meet the requirement. Please close this thread down.

Similar Threads

  1. [CLOSED] How does "MaskCls" work for "AutoLoad" mask in panel control
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 19, 2012, 12:09 PM
  2. Replies: 1
    Last Post: Jun 26, 2012, 11:29 AM
  3. Replies: 5
    Last Post: May 02, 2012, 5:37 PM
  4. Replies: 6
    Last Post: Jan 08, 2012, 4:06 AM
  5. Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM

Tags for this Thread

Posting Permissions