PDA

View Full Version : [CLOSED] Date time field editing in gridpanel



bossun
Jul 24, 2012, 2:46 PM
Hi,

I red many topics on editing date and time columns with composite fields for 1.x.

What's about the V2.0? I saw that composite fields was replaced by FieldContainers but i can not include it in editor column.

Thank you very much for your help.

Regards.

Daniil
Jul 24, 2012, 9:57 PM
Hi,

There are some possible solutions.

1. Implementing your own control (both client and server parts) inheriting from Ext.Net.Field. You can investigate the DateRangeField control as an example.

It might be rather a difficult task and requires good Ext.NET/ExtJS experience.

2. Using DropDownField as Editor. You can place a FieldContainer into its Component.

3. Using ComponentColumn with a FieldContainer inside its Component. Though I am not 100% sure it will work.

In all three case you will need to implement editing logic manually as it is in Ext.NET v1.

4. I would also consider a possibility to use two separate columns for, respectively, date and time. It would be simplest.

5. It can be possible to use a TriggerField for editing. Open a Window with a DateField and a TimeField inside on a trigger click.

bossun
Jul 25, 2012, 2:27 PM
Hi Danii

Thank you for your reply, I will consider your last suggestion of using two separate columns.

I tryied the following definition but the time is not selected when I switch to edit mode.


<ext:DateColumn runat="server" DataIndex="DATETIME" Text="<%$ Resources:Resource,Date %>" Format="dd MMM yyyy" Width="120">
<Editor>
<ext:DateField runat="server" Format="dd MMM yyyy" AllowBlank="false" MsgTarget="Side"></ext:DateField>
</Editor>
</ext:DateColumn>
<ext:DateColumn runat="server" DataIndex="DATETIME" Format="HH:mm" >
<Editor>
<ext:TimeField runat="server" Format="HH:mm" />
</Editor>
</ext:DateColumn>

Should I implement it programmaticaly by calling a function on render?

thanks you for your help.

Daniil
Jul 25, 2012, 3:01 PM
I tryied the following definition but the time is not selected when I switch to edit mode.


Could you clarify?

Editing appears to be working well in the example below.

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.GetStore();
store.DataSource = new object[]
{
new object[] { DateTime.Now }
};
store.DataBind();
}
}
</script>

<!DOCTYPE />

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="time" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:DateColumn runat="server" Text="Time" DataIndex="time" Format="HH:mm">
<Editor>
<ext:TimeField runat="server" Format="HH:mm" />
</Editor>
</ext:DateColumn>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing runat="server" />
</Plugins>
</ext:GridPanel>
</body>
</html>

bossun
Jul 25, 2012, 5:14 PM
<ext:Store ID="MatchesStoreID" runat="server"
onbeforestorechanged="MatchesStoreID_BeforeStoreChanged"
onreaddata="MatchesStoreID_ReadData">
<Model>
<ext:Model runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int" />
...
<ext:ModelField Name="DATETIME" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>


<ext:GridPanel
runat="server"
ID="MatchGripPanel"
StoreID="MatchesStoreID"
Region="Center"
Padding="5"
>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" DataIndex="INDEX" Text="<%$ Resources:Resource,Index %>" Width="60" >
<Editor>
<ext:TextField runat="server" AllowBlank="false" MsgTarget="Side"></ext:TextField>
</Editor>
</ext:Column>
<ext:DateColumn runat="server" DataIndex="DATETIME" Text="<%$ Resources:Resource,Date %>" Format="dd MMM yyyy" Width="120">
<Editor>
<ext:DateField runat="server" Format="dd MMM yyyy" AllowBlank="false" MsgTarget="Side"></ext:DateField>
</Editor>
</ext:DateColumn>
<ext:DateColumn runat="server" DataIndex="DATETIME" Format="HH:mm" >
<Editor>
<ext:TimeField runat="server" Format="HH:mm" />
</Editor>
</ext:DateColumn>
</Columns>
</ColumnModel>
<Plugins>
<ext:RowEditing ID="RowEditor1" runat="server" SaveBtnText="<%$ Resources:Resource,Save %>" CancelBtnText="<%$ Resources:Resource,Cancel %>" >
<Listeners>
<Edit Handler="#{MatchesStoreID}.sync();" />
<CancelEdit Handler="#{MatchesStoreID}.reload();" />
</Listeners>
</ext:RowEditing>
</Plugins>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server" Padding="5">
<Items>
<ext:ComboBox runat="server"
ID="ddlSeasons"
StoreID="SeasonsStoreID"
EmptyText="<%$ Resources:Resource,SelectSeason %>"
DisplayField="COMMENT"
ForceSelection="true"
ValueField="ID">
<Listeners>
<Select Handler="App.direct.LoadMatches();" />
</Listeners>
</ext:ComboBox>
<ext:ToolbarSeparator runat="server" />
<ext:ComboBox runat="server" ID="ddlLeagues"
StoreID="LeaguesStoreID"
DisplayField="TRANSLATEDVALUE"
ValueField="ID"
EmptyText="<%$ Resources:Resource,SelectLeague %>">
<Listeners>
<Select Handler="App.direct.LoadMatches();" />
</Listeners>
</ext:ComboBox>
<ext:ToolbarSeparator runat="server" />
<ext:Button runat="server" Icon="Add" Text="<%$ Resources:Resource,AddNew %>">
<Listeners>
<Click Handler="addNewMatch();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>




Here is my complete definition of my gridpane.

The issue concerns the timefield. When my row switches to edit mode, the time field it's blank. It seems that the binding is not done correctly.

45374538

Here are some print screens which illustrate my issue.

Many thanks.

Daniil
Jul 25, 2012, 6:30 PM
I have tried with RowEditing example, works as well.

Could you, please, provide a full example to reproduce the issue?

bossun
Jul 29, 2012, 7:08 AM
Hi Daniil

I've found why it didn't work.

In my store I have one ModelField with name DATETIME.

if I separate the date and time as shown bellow, then I can attach to Two different columns.


<ext:ModelField Name="DATE" Type="Date" Mapping="DATETIME"/>
<ext:ModelField Name="TIME" Type="Date" Mapping="DATETIME" />




<ext:DateColumn runat="server" DataIndex="DATE" Text="<%$ Resources:Resource,Date %>" Format="dd MMM yyyy" Width="120">
<Editor>
<ext:DateField runat="server" Format="dd MMM yyyy" AllowBlank="false" MsgTarget="Side"></ext:DateField>
</Editor>
</ext:DateColumn>
<ext:DateColumn runat="server" DataIndex="TIME" Format="HH:mm" >
<Editor>
<ext:TimeField runat="server" Format="HH:mm" AllowBlank="false" MaxTime="22:00" MinTime="09:00" />
</Editor>
</ext:DateColumn>


Many thanks

Daniil
Jul 30, 2012, 9:53 AM
Agree, two different ModelFields should be used.

SFritsche
Nov 03, 2012, 12:52 AM
Is there an example of adding an editor like any of these to a column in codebehind?

Thanks.
-Steve

Daniil
Nov 05, 2012, 6:18 AM
Is there an example of adding an editor like any of these to a column in codebehind?

Hi @SFritsche,

Here how you can achieve it during an initial load.

this.GridPanel1.ColumnModel.Columns[0].Editor.Add(new DateField());

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.GetStore();
store.DataSource = new object[]
{
new object[] { DateTime.Now }
};
store.DataBind();

this.GridPanel1.ColumnModel.Columns[0].Editor.Add(new DateField());
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:DateColumn runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing runat="server" />
</Plugins>
</ext:GridPanel>
</body>
</html>