[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:
Code:
<%@ 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
Code:
<%@ 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:
Code:
<%@ 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>
