[CLOSED] Editable grid with daterange VType inside of user control

  1. #1

    [CLOSED] Editable grid with daterange VType inside of user control

    Hello,
    I'm using Ext.NET 1.6.
    I want an editable GridPanel, with two date columns, "start" and "end".
    Conditions:
    - start date must be before the end date;
    - Date must be in year 2013.

    If I define test sample in aspx page only, everything works fine(example follows below)
    With user controls I'm not able to get the same result, VType daterange doesn't work in this case properly:
    - there is no validation, I can type start date after the end date and it will be accepted.

    The only difference I can see is the user control inside of <Content> tag.
    My Question is: how to get this work inside of the user control?

    Thank you,
    Yevgeniy

    Default.aspx:
    <%@ Page Language="C#" %>
    
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register src="EditableGrid.ascx" tagPrefix="uc" tagName="Grid" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }
        
    </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>Simple Array Grid - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    
    
    
    </head>
    <body>
        <ext:ResourceManager runat="server" RemoveViewState="true" IDMode="Explicit" />
        
        <h1>Editable GridPanel WithOUT Save To [DirectMethod]</h1>
        <ext:Panel runat="server"  Height="400">
            <Content>
                <uc:Grid ID="grid" runat="server" />
            </Content>
        </ext:Panel>
        
    </body>
    </html>
    Editable.ascx
    <%@ Control Language="C#" %>
    
    
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="Ext.Net.Utilities" %>
    
    
    <%@ 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 DateTime Start { get; set; }
            public DateTime End { get; set; }
        }
    
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
    
    
            startDf.MinDate = DateTime.Parse("01.01.2013");
            startDf.MaxDate = DateTime.Parse("31.12.2013");
            endDf.MinDate = DateTime.Parse("01.01.2013");
            endDf.MaxDate = DateTime.Parse("31.12.2013");
    
    
        }
    
    
        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", Start = DateTime.Now, End = DateTime.Now + TimeSpan.FromDays(7)},
                    new Company {ID = 2, Name = "Alcoa Inc", Start = DateTime.Now, End = DateTime.Now + TimeSpan.FromDays(7)}
                };
        }
    
    
    </script>
    
    
    <script type="text/javascript">        
        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 onKeyUp = function (field) {
            var v = this.processValue(this.getRawValue()),
                field;
    
    
            if (this.startDateField) {
                field = Ext.getCmp(this.startDateField);
                field.setMaxValue();
                this.dateRangeMax = null;
            } else if (this.endDateField) {
                field = Ext.getCmp(this.endDateField);
                field.setMinValue();
                this.dateRangeMin = null;
            }
    
    
            field.validate();
        };
    </script>
    
    
    <ext:FitLayout runat="server">
        <Items>
            <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="Start" Type="Date" />
                                <ext:RecordField Name="End" Type="Date" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <Listeners>
                <KeyDown Fn="startEditing" />
            </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:DateColumn Header="Start" DataIndex="Start" Format="dd.MM.yyyy">
                        <Editor>
                            <ext:DateField 
                                ID="startDf" 
                                runat="server"
                                Vtype="daterange"
                                EnableKeyEvents="true">  
                                <CustomConfig>
                                    <ext:ConfigItem Name="endDateField" Value="#{EndDf}" Mode="Value" />
                                </CustomConfig>
                                <Listeners>
                                    <KeyUp Fn="onKeyUp" />
                                </Listeners>
                            </ext:DateField>
                        </Editor>
                    </ext:DateColumn>
                    <ext:DateColumn Header="End" DataIndex="End" Format="dd.MM.yyyy">
                        <Editor>
                            <ext:DateField 
                                ID="endDf"
                                runat="server" 
                                Vtype="daterange"
                                EnableKeyEvents="true">    
                                <CustomConfig>
                                    <ext:ConfigItem Name="startDateField" Value="#{startDf}" Mode="Value" />
                                </CustomConfig>
                                <Listeners>
                                    <KeyUp Fn="onKeyUp" />
                                </Listeners>
                            </ext:DateField>
                        </Editor>
                    </ext:DateColumn>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
            </SelectionModel>
        </ext:GridPanel>          
        </Items>    
    </ext:FitLayout>
    The same sample, but without ascx control, works fine:
    <%@ 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 DateTime Start { get; set; }
            public DateTime End { get; set; }
        }
        
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
    
    
            startDf.MinDate = DateTime.Parse("01.01.2013");
            startDf.MaxDate = DateTime.Parse("31.12.2013");
            endDf.MinDate = DateTime.Parse("01.01.2013");
            endDf.MaxDate = DateTime.Parse("31.12.2013");
            
        }
    
    
        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", Start = DateTime.Now, End = DateTime.Now + TimeSpan.FromDays(7)},
                    new Company {ID = 2, Name = "Alcoa Inc", Start = DateTime.Now, End = DateTime.Now + TimeSpan.FromDays(7)}
                };
        }
    
    
    </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>Simple Array Grid - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    
    
    
        <script type="text/javascript">
            
            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 onKeyUp = function (field) {
                var v = this.processValue(this.getRawValue()),
                    field;
    
    
                if (this.startDateField) {
                    field = Ext.getCmp(this.startDateField);
                    field.setMaxValue();
                    this.dateRangeMax = null;
                } else if (this.endDateField) {
                    field = Ext.getCmp(this.endDateField);
                    field.setMinValue();
                    this.dateRangeMin = null;
                }
    
    
                field.validate();
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" RemoveViewState="true" IDMode="Explicit" />
        
        <h1>Editable GridPanel WithOUT 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 runat="server">
                    <Reader>
                        <ext:JsonReader IDProperty="ID">
                            <Fields>
                                <ext:RecordField Name="ID" Type="Int" />
                                <ext:RecordField Name="Name" />
                                <ext:RecordField Name="Start" Type="Date" />
                                <ext:RecordField Name="End" Type="Date" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <Listeners>
                <KeyDown Fn="startEditing" />
            </Listeners>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="ID" DataIndex="ID" Width="35" />
                    <ext:Column ColumnID="Name" Header="Name" DataIndex="Name">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:DateColumn Header="Start" DataIndex="Start" Format="dd.MM.yyyy">
                        <Editor>
                            <ext:DateField 
                                ID="startDf" 
                                runat="server"
                                Vtype="daterange"
                                EnableKeyEvents="true">  
                                <CustomConfig>
                                    <ext:ConfigItem Name="endDateField" Value="#{EndDf}" Mode="Value" />
                                </CustomConfig>
                                <Listeners>
                                    <KeyUp Fn="onKeyUp" />
                                </Listeners>
                            </ext:DateField>
                        </Editor>
                    </ext:DateColumn>
                    <ext:DateColumn Header="End" DataIndex="End" Format="dd.MM.yyyy">
                        <Editor>
                            <ext:DateField 
                                ID="endDf"
                                runat="server" 
                                Vtype="daterange"
                                EnableKeyEvents="true">    
                                <CustomConfig>
                                    <ext:ConfigItem Name="startDateField" Value="#{startDf}" Mode="Value" />
                                </CustomConfig>
                                <Listeners>
                                    <KeyUp Fn="onKeyUp" />
                                </Listeners>
                            </ext:DateField>
                        </Editor>
                    </ext:DateColumn>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" SingleSelect="true" />
            </SelectionModel>
        </ext:GridPanel>          
    </body>
    </html>
    Last edited by Daniil; Mar 21, 2013 at 6:56 AM. Reason: [CLOSED]
  2. #2
    Hi Yevgeniy,

    Moved from the Help 1.x forum.

    Please post your technical support questions on the Premium forums since you are a premium member. It forces us not to miss your questions.

    Re: the question

    Well, seems, the both samples function the same for me.

    The only difference I can see is the user control inside of <Content> tag.
    It should not produce any difference if you wrap the GridPanel in the FitLayout. So, it is OK.

    There is another more important problem. There is a single DateField editor for the whole column.

    So, if you select some date of the "FROM" in one row, it affects, well, on the whole "TO" column.

    I would try to set up ranges within a BeforeEdit or, maybe, Edit listener. It should allow to apply an interval from a same row.

    Update. Here is a related v2.x forum thread.
    http://forums.ext.net/showthread.php?59402
    Last edited by Daniil; Apr 30, 2015 at 4:06 PM.

Similar Threads

  1. Replies: 2
    Last Post: May 09, 2013, 3:41 PM
  2. Replies: 2
    Last Post: Feb 06, 2012, 9:06 AM
  3. [CLOSED] DateField validate problem with Vtype="daterange"
    By asztern in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 30, 2010, 8:06 PM
  4. [CLOSED] DateField with Vtype="daterange" error
    By turione in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 27, 2009, 5:39 PM
  5. Replies: 2
    Last Post: Mar 30, 2009, 8:29 AM

Posting Permissions