[CLOSED] Date time field editing in gridpanel

  1. #1

    [CLOSED] Date time field editing in gridpanel

    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.
    Last edited by Daniil; Jul 30, 2012 at 8:53 AM. Reason: [CLOSED]
  2. #2
    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.
    Last edited by Daniil; Apr 15, 2013 at 12:01 PM.
  3. #3
    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.
  4. #4
    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>
  5. #5
            <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.

    Click image for larger version. 

Name:	Edit.png 
Views:	374 
Size:	23.0 KB 
ID:	4537Click image for larger version. 

Name:	normal.png 
Views:	332 
Size:	20.7 KB 
ID:	4538

    Here are some print screens which illustrate my issue.

    Many thanks.
  6. #6
    I have tried with RowEditing example, works as well.

    Could you, please, provide a full example to reproduce the issue?
  7. #7
    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
  8. #8
    Agree, two different ModelFields should be used.
  9. #9
    Is there an example of adding an editor like any of these to a column in codebehind?

    Thanks.
    -Steve
  10. #10
    Quote Originally Posted by SFritsche View Post
    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>

Similar Threads

  1. Replies: 3
    Last Post: Jul 24, 2012, 8:40 PM
  2. date time field in grid panel
    By sunshine in forum 1.x Help
    Replies: 1
    Last Post: Jul 28, 2011, 12:53 AM
  3. [CLOSED] Field with Date And Time
    By fehmeed.bilgrami in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Mar 10, 2010, 6:47 AM
  4. Time Field Time Format Setting
    By Dinesh.T in forum 1.x Help
    Replies: 0
    Last Post: Aug 18, 2009, 3:21 AM
  5. [CLOSED] Problem when update date field in GridPanel
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Oct 04, 2008, 8:53 AM

Tags for this Thread

Posting Permissions