What's New?

[CLOSED] GridPanel DateColumn

  1. #1
    Nov 10, 2013, 6:23 PM

    [CLOSED] GridPanel DateColumn

    When tabbing through the columns in edit mode why does the date column think it has been changed when I tab through it?

    Also the following examples DateColumn does not show the date values:

    Getting_Started -> Introduction -> Component_Overview GridPanel example 'Last Updated' column.

    <%@ 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)
        {
            GridPanel01.Store.Primary.DataSource = new object[]
            {
                new object[] { 1, "Product 01", 71.72,  DateTime.Now },
                new object[] { 2, "Product 02", 29.01,  DateTime.Now },
                new object[] { 3, "Product 03", 83.81,  DateTime.Now },
                new object[] { 4, "Product 04", 52.55,  DateTime.Now },
                new object[] { 5, "Product 05", 64.13,  DateTime.Now },
                new object[] { 6, "Product 06", 31.61,  DateTime.Now },
                new object[] { 7, "Product 07", 75.43,  DateTime.Now },
            };

            GridPanel01.Store.Primary.DataBind();
        };
    }
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>Grid Editting 01</title>
    <script type="text/javascript">
        var addRecord = function () {
            App.Store1.insert(0, { productId: 0, product: "New Name", dateIntroduced: new Date() });
            App.GridPanel01.editingPlugin.startEditByPosition({ row: 0, column: 1 });
        };

    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:GridPanel ID="GridPanel01" runat="server" Title="Grid Editting 01" Width="600"
        Height="350" Layout="FitLayout">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model runat="server" IDProperty="companyId">
                        <Fields>
                            <ext:ModelField Name="productId" Type="Int" />
                            <ext:ModelField Name="product" Type="String" />
                            <ext:ModelField Name="price" Type="Float" />
                            <ext:ModelField Name="dateIntroduced" Type="Date"  />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel>
            <Columns>
                <ext:NumberColumn ID="ProductId" runat="server" Text="ID" DataIndex="productId" Width="50" Format="#" Align="Center" />
                <ext:Column runat="server" Text="Product" DataIndex="product" Flex="1">
                    <Editor>
                        <ext:TextField runat="server" MaxLength="25" EnforceMaxLength="true" AllowBlank="false" />
                    </Editor>
                </ext:Column>
                <ext:Column runat="server" Text="Price" DataIndex="price" Width="125">
                    <Renderer Format="UsMoney" />
                </ext:Column>
                <ext:DateColumn runat="server" Text="Introduced" DataIndex="dateIntroduced" Width="135" Format="yyyy-MM-dd">
                    <Editor>
                        <ext:DateField runat="server" Format="yyyy-MM-dd" />
                    </Editor>
                </ext:DateColumn>
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel runat="server" Mode="Single" AllowDeselect="true" />
        </SelectionModel>
        <Plugins>
            <ext:CellEditing runat="server" />
        </Plugins>
        <TopBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button runat="server" Text="Add" Icon="Add" StandOut="false">
                        <Listeners>
                            <Click Fn="addRecord" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
    </ext:GridPanel>
</body>
</html>
    Last edited by Daniil; Nov 13, 2013 at 4:48 AM. Reason: [CLOSED]
  2. #2
    Nov 11, 2013, 4:47 AM
    Hi Chris,

    Quote Originally Posted by cwolcott View Post
    When tabbing through the columns in edit mode why does the date column think it has been changed when I tab through it?
    DateTime.Now contains time. But a DateField (a DateColumn's Editor) doesn't work with the time and erases it. So, before editing the value has the time, after - doesn't have. It is why it becomes dirty.

    You can replace "DateTime.Now" with "DateTime.Today".

    Quote Originally Posted by cwolcott View Post
    Also the following examples DateColumn does not show the date values:

    Getting_Started -> Introduction -> Component_Overview GridPanel example 'Last Updated' column.
    Thank you! Fixed.
  3. #3
    Nov 11, 2013, 10:48 AM
    OK, makes sense that on any Date column that has editing capability the associated DataIndex should only represent a Date type and not a DateTime type.

    So if I have an Add button that assigns the date column to a default date in the handler I will use:
    var today = new Date();
today.setHours(0,0,0,0);
    or I just noticed
    var today = Ext.Date.clearTime(new Date());
    So should the following code be changed:
    • Examples\GridPanel\ArrayGrid\_Simple_Editable
    • Examples\GridPanel\ArrayGrid\_Simple_Editable2
    • Examples\GridPanel\Editable\Editor_With_DirectMeth od


    I guess the following example works because the initial date string has 12:00am as time.
    • Examples\GridPanel\Locking_Grid\Cell_Editing


    The following example has Editors on the cells, but doesn't allow cell editing. Should they be removed?
    • Examples\GridPanel\Miscellaneous\Details_Window


    Not sure if this example is working the way you wanted. It is picking up edits when you just tab through the DataIndex columns 'number' and 'date' even if the fields are not modified, while the DataIndex column 'text' must be edited.
    • Examples\TreePanel\Advanced\Remote_Mode
    Last edited by cwolcott; Nov 11, 2013 at 9:37 PM. Reason: Showed a javascript example for DateTime.Today
  4. #4
    Nov 12, 2013, 8:26 AM
    Yes, it is better to use the clearTime method. There is some additional logic:
    http://docs.sencha.com/extjs/4.2.1/s...thod-clearTime

    Thank you much for all the reports!

    Quote Originally Posted by cwolcott View Post

    • Examples\GridPanel\ArrayGrid\_Simple_Editable
    • Examples\GridPanel\ArrayGrid\_Simple_Editable2
    These examples were created by someone of my colleagues for the sake of testing. Maybe, it is time to remove them. I will ask.

    Quote Originally Posted by cwolcott View Post

    • Examples\GridPanel\Editable\Editor_With_DirectMeth od
    Fixed in SVN and online. Some other changes were applied as well. For example, 
    if (!(e.value === e.originalValue || (Ext.isDate(e.value) && Ext.Date.isEqual(e.value, e.originalValue)))) {
    CompanyX.Edit(e.record.data.ID, e.field, e.originalValue, e.value, e.record.data);
}
    Quote Originally Posted by cwolcott View Post
    I guess the following example works because the initial date string has 12:00am as time.
    • Examples\GridPanel\Locking_Grid\Cell_Editing
    Yes, it is like a date with cleared time. I think we can leave that example without any change.

    Quote Originally Posted by cwolcott View Post
    The following example has Editors on the cells, but doesn't allow cell editing. Should they be removed?
    • Examples\GridPanel\Miscellaneous\Details_Window
    Nice catch. Removed.

    Quote Originally Posted by cwolcott View Post
    Not sure if this example is working the way you wanted. It is picking up edits when you just tab through the DataIndex columns 'number' and 'date' even if the fields are not modified, while the DataIndex column 'text' must be edited.
    • Examples\TreePanel\Advanced\Remote_Mode
    Hmm, I doubt an editing request should occur at all if no change. We will investigate.
    Last edited by Daniil; Nov 12, 2013 at 11:12 AM.
  5. #5
    Nov 12, 2013, 12:58 PM
    Quote Originally Posted by Daniil View Post
    Quote Originally Posted by cwolcott View Post
    Not sure if this example is working the way you wanted. It is picking up edits when you just tab through the DataIndex columns 'number' and 'date' even if the fields are not modified, while the DataIndex column 'text' must be edited.
    • Examples\TreePanel\Advanced\Remote_Mode
    Hmm, I doubt an editing request should occur at all if no change. We will investigate.
    A TreePanel's Edit event fires even if no change. The same with a GridPanel. It comes from ExtJS and, generally, it is OK.

    As for:
    while the DataIndex column 'text' must be edited
    It is handled here:
    if (change.Field == "text" && change.IsDirty<string>())
{
    change.SetValue(change.Value<string>() + "_echo");
}
else if (change.Field == "number")
{
    change.SetValue(change.Value<int>() * 10);
}
else if (change.Field == "date")
{
    change.SetValue(change.Value<DateTime>().AddYears(10));
}
    Please notice the IsDirty call.
  6. #6
    Nov 12, 2013, 1:44 PM
    Sorry to waste your time on the TreePanel example. I was being a little aggressive in searching for examples with Editors of Ext:Date and looking what the value being assigned was rather then what the example was trying to show.

    Thus I saw the TreePanel example with the following definitions:

       ...
   <ext:ModelField Name="date" Type="Date" />
   ...
   <ext:DateColumn runat="server" DataIndex="date" Text="Date" Format="dd/MM/yyyy">
      <Editor>
         <ext:DateField runat="server" />
      </Editor>
   </ext:DateColumn>
   ...
    And the value being assigned of:
                node.CustomAttributes.Add(new ConfigItem("date", JSON.Serialize(DateTime.Now.AddDays(i), JSON.ScriptConverters), ParameterMode.Raw));
    I thought maybe it should be assigned DateTime.Today instead of DateTime.Now.

    Go ahead and close the thread.
  7. #7
    Nov 13, 2013, 4:48 AM
    Agree, a DateField is used as an Editor, there should not be the time. Corrected. Thank you again.
  8. #8
    Nov 13, 2013, 9:50 PM
    Not a big deal, but I did not see the fix to Examples\TreePanel\Advanced\Remote_Mode replacing DateTime.Now with DateTime.Today
  9. #9
    Nov 14, 2013, 2:57 AM
    Thank you. Updated online, but not committed to SVN yet.

Similar Threads

  1. Set Min date for GridPanel DateColumn from server side
    By Roshan in forum 1.x Help
    Replies: 3
    Last Post: Jan 17, 2013, 8:10 PM
  2. [CLOSED] display milliseconds in GridPanel DateColumn
    By uis_pm in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 28, 2012, 5:44 PM
  3. display milliseconds in GridPanel DateColumn
    By jimlahey in forum 1.x Help
    Replies: 0
    Last Post: Apr 06, 2011, 8:16 AM
  4. [CLOSED] Renderer does not work on DateColumn in GridPanel
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 04, 2011, 11:04 AM
  5. [CLOSED] Can a DateColumn be empty in GridPanel?
    By logicspeak in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 20, 2010, 12:49 AM

Posting Permissions