[CLOSED] Issues using CompositeField of DateField and TimeField as grid column Editor

[anup]

Hi,

In an editable grid scenario, we need to support the entry of date-time in one column. In my situation, I am dynamically generating my columns and giving them editors like this:

_column.Editor.Add(new DateField())

However, I need to support a Date *and* Time entry on the grid for a *single* column.

Because an Editor can only have one field added to it, I was about to write here that I wasn't sure how to do this, but then remembered you have CompositeFields! So I edited your example here:
https://examples1.ext.net/#/GridPane..._DirectMethod/

I made the following change:

Existing:

<ext:DateColumn Header="Last Updated" DataIndex="LastChange" Format="yyyy-MM-dd">
    <Editor>
        <ext:DateField runat="server" />
    </Editor>
</ext:DateColumn>

My change 1 (markup):

<ext:Column Header="Last Updated" DataIndex="LastChange">
    <Renderer Fn="dateTime" />
    <Editor>
        <ext:CompositeField ID="DateField1" runat="server">
            <Items>
                <ext:DateField ID="CompositeDateField1" runat="server" />
                <ext:TimeField ID="CompositeTimeField1" runat="server" />
            </Items>
        </ext:CompositeField>
    </Editor>
</ext:Column>

My change 2 (the dateTime renderer JavaScript -- though I need to add more checking of "value" later):

var dateTime = function (value) {
    return value.format ? value.format('Y-m-d H:i:s') : value;
}

What worked:

• Column rendered showing date and time (and with a custom renderer - great!)
• Column went into edit mode when double clicked and showed separate date field and time field (fantastic!)

Problems (all in edit mode):

• (Minor) Is there a way to automatically widen the column to fit the date and time fields?
• (Major) When I edited the date and time, it did not show the notification etc that happens when editing other columns.
  
  • I couldn't figure out what to do here.
  • From what I could tell, the afterEdit JavaScript handler was not firing (testing by doing console.log("afterEdit", e) and saw nothing in Firebug).
  
  

Any thoughts?

[geoffrey.mcgill]

[*](Major) When I edited the date and time, it did not show the notification etc that happens when editing other columns.

• I couldn't figure out what to do here.
• From what I could tell, the afterEdit JavaScript handler was not firing (testing by doing console.log("afterEdit", e) and saw nothing in Firebug).

Where do you have this configured. Can you demonstrate with some code?

[anup]

Hi,

Here's the code (it is an exact copy of https://examples1.ext.net/#/GridPane..._DirectMethod/ but with the 2 changes I mentioned).

<%@ 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();
        }
    }
 
    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 dateTime = function (value) {
            return value.format ? value.format('Y-m-d H:i:s') : value;
        }
 
        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:Column Header="Last Updated" DataIndex="LastChange" Width="200">
                    <Renderer Fn="dateTime" />
                    <Editor>
                        <ext:CompositeField ID="DateField1" runat="server">
                            <Items>
                                <ext:DateField ID="CompositeDateField1" runat="server" />
                                <ext:TimeField ID="CompositeTimeField1" runat="server" />
                            </Items>
                        </ext:CompositeField>
                    </Editor>
                </ext:Column>
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
        </SelectionModel>
    </ext:GridPanel>          
</body>
</html>

[Daniil]

Hello, anup!

If a CompositeField is used as it needs to care about editing logic yourself.
It can look something like this.

Example

<%@ 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.Store.Primary;
            store.DataSource = new object[] { 
                                         new object[] {"test111"},
                                         new object[] {"test212"},
                                         new object[] {"test313"}
                                };
            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>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test" DataIndex="test" Width="300">
                    <Editor>
                        <ext:CompositeField runat="server">
                            <Items>
                                <ext:TextField ID="TextField1" runat="server" />
                                <ext:TextField ID="TextField2" runat="server" />
                            </Items>
                        </ext:CompositeField>
                    </Editor>
                    <EditorOptions AllowBlur="false">
                        <Listeners>
                            <StartEdit Handler="#{TextField1}.setValue(value.substring(0, 4)); 
                                                #{TextField2}.setValue(value.substring(4, value.length));" />
                            <BeforeComplete Handler="this.setValue(#{TextField1}.getValue() + #{TextField2}.getValue())"/>
                        </Listeners>
                    </EditorOptions>
                </ext:Column>
            </Columns>
        </ColumnModel>
        <Listeners>
            <AfterEdit Handler="alert('GridPanel AfterEdit')" />
        </Listeners>
    </ext:GridPanel>
    </form>
</body>
</html>

To get more information about the Editor's members please follow this link.
Also looking at the EditorGridPanel docs (especially events) would be useful for you.

[Daniil]

What about the minor issue

To set column width please try to use the setColumnWidth method of ColumnModel class.
http://dev.sencha.com/deploy/dev/doc...setColumnWidth

[anup]

Daniil,

Many thanks for your examples and suggestions. They worked. I specifically needed a date time composite field in a column, so took your suggestions and applied them. Took a bit of fiddling around (mostly because of my unfamiliarity with some of the ExtJs intricacies), but here is your example modified in the following ways:

1. Removed the test column, and replaced with a composite of date and time field (renamed to LastUpdated)
2. Added a name column before just to show that if you first edit the last updated and then double click on name, the last updated column resizes back to the original.
3. Used "BeforeStartEdit" to capture the column width before going into edit mode so it can be restored in "BeforeComplete"
4. Restored column width on "CancelEdit" too

Of course, there are some limitations too, e.g. I haven't validated the time entry in any way, just to prove the idea.

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!ExtNet.IsAjaxRequest)
        {
            Store store = GridPanel1.Store.Primary;
            store.DataSource = new object[] {
                                         new object[] {"Joe", DateTime.Now},
                                         new object[] {"Bob", DateTime.Now},
                                         new object[] {"Fred", DateTime.Now}
                                };
            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 id="Head1" runat="server">
    <title>Ext.Net Example of CompositeField for Date and Time entry</title>
 
    <script type="text/javascript">
        var Examples = {
            dateTime : function (value) {
                return value.format ? value.format('Y-m-d H:i:s') : value;
            }
        }
    </script>
 
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="LastUpdated" Type="Date" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column Header="Name" DataIndex="Name" />
                <ext:Column Header="Last Updated" DataIndex="LastUpdated" Width="110">
                    <Renderer Fn="Examples.dateTime" />
                    <Editor>
                        <ext:CompositeField ID="DateField1" runat="server">
                            <Items>
                                <ext:DateField ID="CompositeDateField1" runat="server" />
                                <ext:TextField ID="CompositeTimeField1" runat="server" />
                            </Items>
                        </ext:CompositeField>
                    </Editor>
                    <EditorOptions AllowBlur="false">
                        <Listeners>
                            <BeforeStartEdit Handler="this.originalWidthBeforeEditing = #{GridPanel1}.getColumnModel().getColumnWidth(this.col);
                                                      #{GridPanel1}.getColumnModel().setColumnWidth(this.col, 150);" />
                            <StartEdit Handler="#{CompositeDateField1}.setValue(value.format('Y-m-d'));
                                                #{CompositeTimeField1}.setValue(value.format('H:i:s'));" />
                            <BeforeComplete Handler="
                                                var newDate = #{CompositeDateField1}.getValue(),
                                                    newTime = Date.parseDate(#{CompositeTimeField1}.getValue(), 'H:i:s');
                                                newDate.setHours(newTime.getHours());
                                                newDate.setMinutes(newTime.getMinutes());
                                                newDate.setSeconds(newTime.getSeconds());
                                                this.setValue(newDate);
                                                #{GridPanel1}.getColumnModel().setColumnWidth(this.col, this.originalWidthBeforeEditing);
                                                "/>
                            <CancelEdit Handler="#{GridPanel1}.getColumnModel().setColumnWidth(this.col, this.originalWidthBeforeEditing);" />
                        </Listeners>
                    </EditorOptions>
                </ext:Column>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    </form>
</body>
</html>

As expected, the above changes also apply to my modified version of https://examples1.ext.net/#/GridPane..._DirectMethod/ which I listed earlier.

So many thanks! You can mark this as solved for me!

[Daniil]

Hello, anup!

Thank you for posting your solution. I think it will be very useful for others members.

[anup]

Daniil, no problem!

In fact, I just posted a slight variant to the solution, whereby I moved all the Handler javascript into JavaScript that sits inside script blocks (more reusable in different scenarios).

(I also had a question there if you know the answer?)

Thanks!

[Daniil]

Hello!

Please clarify what exactly question do you mean?

[anup]

Hello!

Please clarify what exactly question do you mean?

Oops. In my rush, forgot to mention where I posted the new example:
http://forums.ext.net/showthread.php...-column-editor

The question is in that post.