PDA

View Full Version : [CLOSED] GridPanel DateColumn



cwolcott
Nov 10, 2013, 7:23 PM
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 (http://examples2.ext.net/#/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>

Daniil
Nov 11, 2013, 5:47 AM
Hi Chris,


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".



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

Getting_Started -> Introduction -> Component_Overview (http://examples2.ext.net/#/Getting_Started/Introduction/Component_Overview/) GridPanel example 'Last Updated' column.


Thank you! Fixed.

cwolcott
Nov 11, 2013, 11: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

Daniil
Nov 12, 2013, 9:26 AM
Yes, it is better to use the clearTime method. There is some additional logic:
http://docs.sencha.com/extjs/4.2.1/source/Date2.html#Ext-Date-method-clearTime

Thank you much for all the reports!





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.





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);
}



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.



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.



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.

Daniil
Nov 12, 2013, 1:58 PM
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.

cwolcott
Nov 12, 2013, 2: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.

Daniil
Nov 13, 2013, 5:48 AM
Agree, a DateField is used as an Editor, there should not be the time. Corrected. Thank you again.

cwolcott
Nov 13, 2013, 10: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

Daniil
Nov 14, 2013, 3:57 AM
Thank you. Updated online, but not committed to SVN yet.