PDA

View Full Version : [CLOSED] Combobox focus not proper in GridPanel



speedstepmem4
Feb 03, 2015, 3:37 AM
Hi,

In GridPanel when we add a new row and click on TAB key, focus is not moving cell by cell.

Have a look at the sample code provided below:



<%@ Page Language="C#" %>

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

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Ext.NET v3 Example</title>

<script>
Ext.grid.plugin.CellEditing.override({
startEdit: function (record, columnHeader) {
var currentEditor = this.getActiveEditor();

if (currentEditor && currentEditor.field && !currentEditor.field.isValid()) {
return;
}

this.callParent(arguments);
}
});

Ext.Editor.override({
completeEdit: function () {
if (!this.field.isValid()) {
return;
}

this.callParent(arguments);
}
});
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="Sample" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Test 1" DataIndex="test1">
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false" MsgTarget="Side" />
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Test 2" DataIndex="test2">
<Editor>
<ext:ComboBox runat="server" ID="Combo1" QueryMode="Local" Editable="false"></ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Test 2" DataIndex="test2">
<Editor>
<ext:ComboBox runat="server" ID="ComboBox1" QueryMode="Local" Editable="false"></ext:ComboBox>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" />
</Plugins>
<Buttons>
<ext:Button ID="btnAdd" runat="server" Text="Add">
<Listeners>
<Click Fn="AddRow" />
</Listeners>
</ext:Button>
<ext:Button ID="btnCancel" runat="server" Text="Cancel">
<Listeners>
<Click Fn="CancelChanges"></Click>
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>
</form>
<script type="text/javascript">
function AddRow() {
var rowIndex = Sample.GridPanel1.store.getCount();
Sample.GridPanel1.store.insert(rowIndex, {});
Sample.GridPanel1.editingPlugin.startEdit(parseInt (rowIndex), 0);
}

function CancelChanges() {
Sample.GridPanel1.getSelectionModel().deselectAll( );
Sample.Store1.rejectChanges();
Sample.GridPanel1.getView().refresh();
}
</script>
</body>
</html>



SCENARIOS:

1) Click on Add, input some text in first column of new row.
2) Click TAB.
3) Instead of moving to next cell, the focus goes to the last column.

fabricio.murta
Feb 03, 2015, 5:48 AM
Hello, there were several things off on your sample.

First: the startEdit override was outdated. Now it should return a true/false depending on the result of the run.
Second: you have omitted the test3 field. Also, you made the control 3 be the same as control 2, which in turn caused some confusion and would ultimately render the grid unusable.
Third: The second override (for completeEdit) seemed also off. I noticed there's a test for isValid() inside the current version so I believe it is no longer necessary (and breaks) overriding it. It was causing the field to appear on the top of the list in some situations.
Fourth (I believe): you did not select an 'blank' validation for the combo boxes as well.

I ended up changing your code into this:


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

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Ext.NET v3 Example</title>

<script>
Ext.grid.plugin.CellEditing.override({
startEdit: function (record, columnHeader) {
var retVal = this.callParent(arguments);
var currentEditor = this.getActiveEditor();
console.log(currentEditor);
if (currentEditor && currentEditor.field && !currentEditor.field.isValid())
currentEditor.field.markInvalid(Sample.TextField1. blankText);
return retVal;
}
});

</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="Sample" SourceFormatting="true" ScriptMode="Debug" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Test 1" DataIndex="test1">
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false" MsgTarget="Side" />
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Test 2" DataIndex="test2">
<Editor>
<ext:ComboBox runat="server" ID="Combo1" QueryMode="Local" Editable="false" AllowBlank="false">
<Items>
<ext:ListItem Text="col2 itm1" Value="c2i1" />
<ext:ListItem Text="col2 itm2" Value="c2i2" />
<ext:ListItem Text="col2 itm3" Value="c2i3" />
<ext:ListItem Text="col2 itm4" Value="c2i4" />
</Items>
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Test 3" DataIndex="test3">
<Editor>
<ext:ComboBox runat="server" ID="ComboBox1" QueryMode="Local" Editable="false" AllowBlank="false">
<Items>
<ext:ListItem Text="col3 itm1" Value="c3i1" />
<ext:ListItem Text="col3 itm2" Value="c3i2" />
</Items>
</ext:ComboBox>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
</Plugins>
<Buttons>
<ext:Button ID="btnAdd" runat="server" Text="Add">
<Listeners>
<Click Fn="AddRow" />
</Listeners>
</ext:Button>
<ext:Button ID="btnCancel" runat="server" Text="Cancel">
<Listeners>
<Click Fn="CancelChanges"></Click>
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>
</form>
<script type="text/javascript">
function AddRow() {
var rowIndex = Sample.GridPanel1.store.getCount();
Sample.GridPanel1.store.insert(rowIndex, {});
Sample.GridPanel1.editingPlugin.startEdit(parseInt (rowIndex), 0);
}

function CancelChanges() {
Sample.GridPanel1.getSelectionModel().deselectAll( );
Sample.Store1.rejectChanges();
Sample.GridPanel1.getView().refresh();
}
</script>
</body>
</html>


Well, but I might have thought it the wrong way. Can you check if that code fixes the issues you pointed?

speedstepmem4
Feb 05, 2015, 4:41 AM
Hi fabricio.murta,

The solution you gave is working fine now. Can mark this as closed.
Thanks for your guidance!!!

fabricio.murta
Feb 05, 2015, 5:05 AM
Glad I could help you here and in the other post! :)