PDA

View Full Version : [CLOSED] V2.1 CellEditing validate



Aurelio
Aug 30, 2012, 12:37 AM

Daniil
Aug 30, 2012, 6:39 AM
Hi,

The difference within HTML DOW between the browsers causes the issue.

There is a JavaScript error "node.cells is not a function" in FireFox and Chrome here:

node.cells(i)

There is some alternative way to get child nodes of the node. But I would suggest to use the Store to iterate through the GridPanel data or calling calling the getRowsValues method of the GridPanel

Also I would use the CellEditing ValidateEdit event instead of Validator of the TextField.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.CellEditing-event-validateedit (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.grid.plugin.CellEditing-event-validateedit)

Aurelio
Aug 30, 2012, 9:36 AM
HI Daniil

I have use node.cells(i) for retrive the value EmptyCellText of the editing cell..because i do not know how to retrieve the value of EmptyCellText.

if you help my to retrieve that value without using node..

Thanks
Aurelio

Aurelio
Aug 30, 2012, 10:31 AM

Daniil
Aug 30, 2012, 11:56 AM
Good.

Could you describe exactly the requirement? I will think how I would implement it.

Aurelio
Aug 30, 2012, 12:56 PM
HI..Daniil

The problem is:

The grid then created render the column and assign the value of the property emptyCellText (Es: 38/YELLOW, 39/RED) this for me is the value of the barcode if the user not insert anything into the cell, in this mode the user not need to insert all barcod manually, but insert only barcode if here is not egual of emptyCellText value .

Then edit the cell and press the key return, i need to test that the value entered is not equal to the value of properties emptyCellText of the all others grid cell, because the value of barcod must be unique.

I previous sample i use the node.cell because it was the only property I've found that the reported value of the property emptyCellText of the single grid cell, but in IE work & other browser not work.

Thanks
Aurelio

Daniil
Aug 30, 2012, 7:05 PM
Thanks for clarification. Your solution looks well.

I did the sample with ValidateEdit event, but discovered a bug which just reported to Sencha.
http://www.sencha.com/forum/showthread.php?240242

After fixing the following example should work.

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[] { "", "test" },
new object[] { "test", "" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var onValidateEdit = function (editor, e) {
var store = e.grid.getStore(),
cancel = false;

store.each(function (record, index) {
Ext.each(e.grid.columns, function (column) {
if (column.dataIndex !== e.field && index !== e.rowIdx
&& (record.data[column.dataIndex] === e.value || e.column.emptyCellText === e.value)) {

cancel = true;
alert(Ext.String.format("The value must be unique. The '{0}' column, {1} row (zero-based index) has the same value.", column.text, index))
return false;
}
});

if (cancel) {
return false;
}
});

return !cancel;
};
</script>
</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="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column
runat="server"
Text="Test 1"
DataIndex="test1"
EmptyCellText="EmptyCellText 1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column
runat="server"
Text="Test 2"
DataIndex="test2"
EmptyCellText="EmptyCellText 2">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="1">
<Listeners>
<ValidateEdit Fn="onValidateEdit" />
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</body>
</html>

Aurelio
Aug 30, 2012, 7:47 PM
HI..Daniil

Your example it's great...

After fix the bug, i replace my code with this is that better..

Thanks
Aurelio

Daniil
Aug 31, 2012, 12:33 PM
Sencha said that my report is a duplicate of this one:
http://www.sencha.com/forum/showthread.php?136911

For some reason it is not fixed for long time. I don't know a reason, I will just monitor.

For now I can suggest a workaround to get a current value, I added the respective comment in the script.

Also please note the example doesn't take the emptyCellText property into account.

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[] { "test1", "test2" },
new object[] { "test3", "test4" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var onValidateEdit = function (editingPlugin, e) {
var store = e.grid.getStore(),
editor = editingPlugin.getEditor(e.record, e.column), // These two lines are a workaround for e.value
value = editor.getValue(), // http://www.sencha.com/forum/showthread.php?136911
cancel = false;

store.each(function (record, index) {
Ext.each(e.grid.columns, function (column) {
if (!(e.column === column && index === e.rowIdx) //to do not compare with the current cell
&& record.data[column.dataIndex] === value) {

cancel = true;
alert(Ext.String.format("The value must be unique. The '{0}' column, {1} row (zero-based index) has the same value.", column.text, index))
return false;
}
});

if (cancel) {
return false;
}
});

return !cancel;
};
</script>
</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="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column
runat="server"
Text="Test 1"
DataIndex="test1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column
runat="server"
Text="Test 2"
DataIndex="test2">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="1">
<Listeners>
<ValidateEdit Fn="onValidateEdit" />
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</body>
</html>

Aurelio
Aug 31, 2012, 3:09 PM
Hi..Daniil

Ok..for me now not is a problem...i resolt in the sample up..

When the bug is resolt, i test with new your sample..

Many Thanks
Aurelio

Daniil
Aug 31, 2012, 3:23 PM
When the bug is resolt, i test with new your sample..


Well, my last sample is working. There is just a small workaround

editor = editingPlugin.getEditor(e.record, e.column), // These two lines are a workaround for e.value
value = editor.getValue(), // http://www.sencha.com/forum/showthread.php?136911


After fixing it should be just

value = e.value

Aurelio
Aug 31, 2012, 4:11 PM

Daniil
Dec 29, 2012, 9:34 AM
Thanks for clarification. Your solution looks well.

I did the sample with ValidateEdit event, but discovered a bug which just reported to Sencha.
http://www.sencha.com/forum/showthread.php?240242

After fixing the following example should work.

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[] { "", "test" },
new object[] { "test", "" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var onValidateEdit = function (editor, e) {
var store = e.grid.getStore(),
cancel = false;

store.each(function (record, index) {
Ext.each(e.grid.columns, function (column) {
if (column.dataIndex !== e.field && index !== e.rowIdx
&& (record.data[column.dataIndex] === e.value || e.column.emptyCellText === e.value)) {

cancel = true;
alert(Ext.String.format("The value must be unique. The '{0}' column, {1} row (zero-based index) has the same value.", column.text, index))
return false;
}
});

if (cancel) {
return false;
}
});

return !cancel;
};
</script>
</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="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column
runat="server"
Text="Test 1"
DataIndex="test1"
EmptyCellText="EmptyCellText 1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column
runat="server"
Text="Test 2"
DataIndex="test2"
EmptyCellText="EmptyCellText 2">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="1">
<Listeners>
<ValidateEdit Fn="onValidateEdit" />
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</body>
</html>

It has been fixed in SVN (the trunk).