Jan 04, 2012, 2:45 PM
[CLOSED] TextField Blur event is throwing error in Editable Grid
Hi,
I need to validate input values in textfields at editable grid. I have to check Text1 value should always less than Text3 value, so I have implemented KeyUp listener for Text3 textfield. It is verifying once enter value at Text3 text field. At the same time, the Text3 textfield value should be less than Label value "12". I have an issue with keyUp like in Text1 textfield I have added 3 and trying to add 10 or 11 (which are less than 12) in Text3 textfield, but while enter 1 the Keyup event is firing and displaying the message "Test1 number should be less than Test3 number" and not allowing to enter either 10 or 11. So I would like to verify by adding Blur listener instead of KeyUp, then I am getting the error like "'e' is undefined". With KeyUp listener every thing is working if Text3 textfield value is less than 10. How to rectify this issue.
I need to validate input values in textfields at editable grid. I have to check Text1 value should always less than Text3 value, so I have implemented KeyUp listener for Text3 textfield. It is verifying once enter value at Text3 text field. At the same time, the Text3 textfield value should be less than Label value "12". I have an issue with keyUp like in Text1 textfield I have added 3 and trying to add 10 or 11 (which are less than 12) in Text3 textfield, but while enter 1 the Keyup event is firing and displaying the message "Test1 number should be less than Test3 number" and not allowing to enter either 10 or 11. So I would like to verify by adding Blur listener instead of KeyUp, then I am getting the error like "'e' is undefined". With KeyUp listener every thing is working if Text3 textfield value is less than 10. How to rectify this issue.
<%@ 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)
{
cboValue.Items.Add(new Ext.Net.ListItem("val1", "1"));
cboValue.Items.Add(new Ext.Net.ListItem("val2", "2"));
cboValue.Items.Add(new Ext.Net.ListItem("val3", "3"));
cboValue.Items.Add(new Ext.Net.ListItem("val4", "4"));
LoadData();
}
}
public void LoadData()
{
this.Store1.DataSource = GetDataInfo();
this.Store1.DataBind();
}
public DataTable GetDataInfo()
{
DataTable dt = new DataTable();
DataRow dr;
dt.Columns.Add("TestID");
dt.Columns.Add("test1");
dt.Columns.Add("test2");
dt.Columns.Add("test3");
dr = dt.NewRow();
dr[0] = "1";
dr[1] = "";
dr[2] = "2";
dr[3] = "";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = "2";
dr[1] = "";
dr[2] = "test5";
dr[3] = "";
dt.Rows.Add(dr);
return dt;
}
protected void Store_BeforeStoreChanged(object sender, BeforeStoreChangedEventArgs e)
{
string jsonData = e.DataHandler.JsonData;
X.Msg.Alert("Saved", jsonData).Show();
LoadData();
}
</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 id="Head1" runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var mouseDownFlag = {};
var rowUpdatedHandler = function (item, rowIndex, record) {
if (!Ext.isEmpty(mouseDownFlag) && (mouseDownFlag.row === rowIndex)) {
this.editors[mouseDownFlag.row][mouseDownFlag.col].focus(false, 10);
mouseDownFlag = {};
}
}
var editorRenderHandler = function (editor) {
editor.el.on('mousedown', function (e) {
mouseDownFlag.row = editor.grid.row;
mouseDownFlag.col = editor.grid.col;
});
}
// var checkTextValue = function (fromVal, toVal) {
// alert(fromVal + "Next Field ID = " + toVal);
// }
var checkPageFromNumbers = function (fromVal, toVal, ctrlId) {
if (parseInt(fromVal, 10) > parseInt(Ext.getCmp('lblTotal').text, 10)) {
Ext.Msg.alert('Page Count', 'Page number should be less than page count');
Ext.getCmp(ctrlId).setValue('');
}
}
var checkPageToNumbers = function (fromVal, toVal, ctrlId) {
//alert(fromVal + "," +toVal);
if (parseInt(toVal, 10) > parseInt(Ext.getCmp('lblTotal').text, 10)) {
Ext.Msg.alert('Page Count', 'Page number should be less than page count');
Ext.getCmp(ctrlId).setValue('');
}
else {
if (parseInt(fromVal, 10) > parseInt(toVal, 10)) {
Ext.Msg.alert('Page Count', 'Test1 number should be less than Test3 number');
//Ext.getCmp(ctrlId).setValue('');
}
}
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store ID="Store1" runat="server" RefreshAfterSaving="None" OnBeforeStoreChanged="Store_BeforeStoreChanged">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="TestID" />
<ext:RecordField Name="test1" />
<ext:RecordField Name="test2" />
<ext:RecordField Name="test3" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1">
<Editor>
<ext:TextField ID="TextField1" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="var rowIndex = GridPanel1.getView().findRowIndex(e.getTarget());
record = GridPanel1.getStore().getAt(rowIndex),
value = record.data.test3;
checkPageFromNumbers(this.getValue(),value, this.getItemId())" />
</Listeners>
</ext:TextField>
</Editor>
</ext:Column>
<ext:Column Header="Test2" DataIndex="test2">
<Editor>
<ext:ComboBox ID="cboValue" runat="server">
<Listeners>
<Select Handler="this.triggerBlur(); this.blur();" Delay="250" />
</Listeners>
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column Header="Test3" DataIndex="test3">
<Editor>
<ext:TextField ID="TextField3" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="var rowIndex = GridPanel1.getView().findRowIndex(e.getTarget());
record = GridPanel1.getStore().getAt(rowIndex),
value = record.data.test1;
checkPageToNumbers(value,this.getValue(), this.getItemId())" />
<%--<Blur Handler="var rowIndex = GridPanel1.getView().findRowIndex(e.getTarget());
record = GridPanel1.getStore().getAt(rowIndex),
value = record.data.test1;
checkPageToNumbers(value,this.getValue(), this.getItemId())" />--%>
</Listeners>
</ext:TextField>
</Editor>
</ext:Column>
<ext:CommandColumn Width="40">
<Commands>
<ext:GridCommand Text="Reject" ToolTip-Text="Reject row changes" CommandName="taskreject"
Icon="ArrowUndo" />
</Commands>
<PrepareToolbar Handler="toolbar.items.get(0).setVisible(record.dirty);" />
</ext:CommandColumn>
</Columns>
</ColumnModel>
<Listeners>
<Command Handler="record.reject();" />
</Listeners>
<Plugins>
<ext:EditableGrid ID="EditableGrid1" runat="server" />
</Plugins>
<View>
<ext:GridView ID="GridView1" runat="server" ForceFit="true" />
</View>
</ext:GridPanel>
<ext:Button ID="btnSaveChanges" runat="server" Text="Save">
<Listeners>
<Click Handler="GridPanel1.save();" Delay="100" />
</Listeners>
</ext:Button>
<ext:Label ID="lblTotal" runat="server" Text="12"></ext:Label>
</form>
</body>
</html>
Last edited by Daniil; Jan 10, 2012 at 7:38 PM.
Reason: [CLOSED]