[CLOSED] UpdateRecordField on store leaves datefield blank

  1. #1

    [CLOSED] UpdateRecordField on store leaves datefield blank

    Hi,
    I am having a problem with a gridpanel with a datefield editor.
    As you can see from the example i copied from the examples explorer the datefields edit correctly.
    But when i update the store with Store1.UpdateRecordField when i edit the cell the datefield goes blank.
    I have tried all kinds of date formating on client and server side to try to remedy this without success.

    Can you see any reason why this would happen.

    If you click the button under the grid and then try to edit the LastChange field of the first row you will see.

    Thanks

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <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();
    
            }
        }
    
        protected void UpdateRow(object sender, EventArgs e)
        {
            this.Store1.UpdateRecordField(0, "LastChange", DateTime.Now);
            this.GridPanel1.Store.Primary.CommitChanges();
        }
    
        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 }
            };
        }
    
        [DirectMethod(Namespace = "CompanyX")]
        public void AfterEdit(int id, string field, string oldValue, string newValue, object customer)
        {
            string message = "<b>Property:</b> {0}<br /><b>Field:</b> {1}<br /><b>Old Value:</b> {2}<br /><b>New Value:</b> {3}";
    
            // Send Message...
            X.Msg.Notify("Edit Record #" + id.ToString(), string.Format(message, id, field, oldValue, newValue)).Show();
    
            this.GridPanel1.Store.Primary.CommitChanges();
        }
    </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>Simple Array Grid - 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 + "%");
            };
    
            var startEditing = function (e) {
                if (e.getKey() === e.ENTER) {
                    var grid = GridPanel1,
                        record = grid.getSelectionModel().getSelected(),
                        index = grid.store.indexOf(record);
    
                    grid.startEditing(index, 1);
                }
            };
    
            var afterEdit = function (e) {
                /*
                Properties of 'e' include:
                    e.grid - This grid
                    e.record - The record being edited
                    e.field - The field name being edited
                    e.value - The value being set
                    e.originalValue - The original value for the field, before the edit.
                    e.row - The grid row index
                    e.column - The grid column index
                */
    
                // Call DirectMethod
                CompanyX.AfterEdit(e.record.data.ID, e.field, e.originalValue, e.value, e.record.data);
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" RemoveViewState="true"
            IDMode="Explicit" />
    
        <h1>Editable GridPanel With Save To [DirectMethod]</h1>
    
        <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>
            <Listeners>
                <KeyDown Fn="startEditing" />
                <AfterEdit Fn="afterEdit" />
            </Listeners>
            <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">
                        <Renderer Format="UsMoney" />
                        <Editor>
                            <ext:TextField ID="TextField2" runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Change" DataIndex="Change">
                        <Renderer Fn="change" />
                        <Editor>
                            <ext:TextField ID="TextField3" runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Change" DataIndex="PctChange">
                        <Renderer Fn="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>
        </ext:GridPanel>
        <ext:Button runat="server" ID="btnUpdate" Text="Update First row date">
            <DirectEvents>
                <Click OnEvent="UpdateRow">
                    <EventMask ShowMask="true" />
                </Click>
            </DirectEvents>
        </ext:Button>
    </body>
    </html>
    Last edited by Daniil; Oct 05, 2012 at 6:14 PM. Reason: [CLOSED]
  2. #2
    I wasn't able to reproduce the error. When I edit the LastUpdate field of any Record, the Record is sent back to the server and the correct values are notified.

    Here's the full sample I'm testing with.

    Example

    <%@ Page Language="C#" %> 
    <%@ Import Namespace="System.Collections.Generic" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <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();
            }
        }
     
        protected void UpdateRow(object sender, EventArgs e)
        {
            this.Store1.UpdateRecordField(0, "LastChange", DateTime.Now);
            this.GridPanel1.Store.Primary.CommitChanges();
        }
     
        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 }
            };
        }
     
        [DirectMethod(Namespace = "CompanyX")]
        public void AfterEdit(int id, string field, string oldValue, string newValue, object customer)
        {
            string message = "<b>Property:</b> {0}<br /><b>Field:</b> {1}<br /><b>Old Value:</b> {2}<br /><b>New Value:</b> {3}";
     
            // Send Message...
            X.Msg.Notify("Edit Record #" + id.ToString(), string.Format(message, id, field, oldValue, newValue)).Show();
     
            this.GridPanel1.Store.Primary.CommitChanges();
        }
    </script>
     
    <!DOCTYPE html>
     
    <html>
    <head runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>
     
        <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 + "%");
            };
     
            var startEditing = function (e) {
                if (e.getKey() === e.ENTER) {
                    var grid = GridPanel1,
                        record = grid.getSelectionModel().getSelected(),
                        index = grid.store.indexOf(record);
     
                    grid.startEditing(index, 1);
                }
            };
     
            var afterEdit = function (e) {
                /*
                Properties of 'e' include:
                    e.grid - This grid
                    e.record - The record being edited
                    e.field - The field name being edited
                    e.value - The value being set
                    e.originalValue - The original value for the field, before the edit.
                    e.row - The grid row index
                    e.column - The grid column index
                */
     
                // Call DirectMethod
                CompanyX.AfterEdit(e.record.data.ID, e.field, e.originalValue, e.value, e.record.data);
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" RemoveViewState="true"
            IDMode="Explicit" />
     
        <h1>Editable GridPanel With Save To [DirectMethod]</h1>
     
        <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>
            <Listeners>
                <KeyDown Fn="startEditing" />
                <AfterEdit Fn="afterEdit" />
            </Listeners>
            <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">
                        <Renderer Format="UsMoney" />
                        <Editor>
                            <ext:TextField ID="TextField2" runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Change" DataIndex="Change">
                        <Renderer Fn="change" />
                        <Editor>
                            <ext:TextField ID="TextField3" runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Change" DataIndex="PctChange">
                        <Renderer Fn="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>
        </ext:GridPanel>
        <ext:Button runat="server" ID="btnUpdate" Text="Update First row date">
            <DirectEvents>
                <Click OnEvent="UpdateRow">
                    <EventMask ShowMask="true" />
                </Click>
            </DirectEvents>
        </ext:Button>
    </body>
    </html>
    Geoffrey McGill
    Founder
  3. #3
    Hi Geoffrey,
    Thanks for the reply.
    Did you click on the button at the bottom of the page under the grid.
    This button sets the LastUpdate cell of the first row to todays date through the UpdateRow DirectEvent.

    I have tested it with IE and Chrome. When you click on the LastUpdate cell of the first row after clicking the button at the bottom, the datefield goes blank. But the other LastChange cells below it work fine.

    Thanks
  4. #4
    Hi Fergus,

    The problem is the fact that a record LastUpdate value becomes a string after the UpdateRecordField calling, not a date object.

    But DateField can't parse such string by default.

    You could set this for the DateField.
    AltFormats="yyyy-MM-ddTHH:mm:ss"
    But a value of RecordField will stay a string, not a date. It will cause other issues.

    One of possible solutions is this, i.e. getting a JavaScript date object in the output.

    Example
    protected void UpdateRow(object sender, EventArgs e)
    {
        DateTime now = DateTime.Now;
        string jsNow = string.Format("new Date({0},{1},{2})", now.Year, now.Month - 1, now.Day);
        this.Store1.UpdateRecordField(0, "LastChange", new JRawValue(jsNow));
        this.GridPanel1.Store.Primary.CommitChanges();
    }
  5. #5
    Thank you Daniil, that is bang on what i needed.

    Mark Solved

    Fergus

Similar Threads

  1. [1.0] Allow blank and htmleditor
    By SouthDeveloper in forum 1.x Help
    Replies: 1
    Last Post: Apr 18, 2013, 11:39 AM
  2. [CLOSED] Dynamically add or rename leaves in tree grid
    By craig2005 in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 08, 2012, 9:20 PM
  3. Replies: 2
    Last Post: Dec 13, 2011, 5:40 AM
  4. [CLOSED] "Blank" gridpanel column until edited...then blank again!
    By dmoore in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 24, 2011, 4:11 PM
  5. [CLOSED] [1.0] combobox load blank rows from store
    By PoloTheMonk in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 30, 2010, 9:35 AM

Tags for this Thread

Posting Permissions