Jun 12, 2013, 12:51 PM
[CLOSED] GridPanel Column Editor PLUGIN: disable Enter KEY on default button Update and Cancel
Hi,
please, I would to prevent to press the Enter KEY on the fields of a edited row of a grid so as for Update/Cancel button
I have been able to disable Enter key on the textfields, combobox and so on but I would extend the same on the Update/Cancel buttons
for textfields I used the following
Is there a way to disable the Enter key also for the buttons?
thanks in advance
I leave here the whole example
please, I would to prevent to press the Enter KEY on the fields of a edited row of a grid so as for Update/Cancel button
I have been able to disable Enter key on the textfields, combobox and so on but I would extend the same on the Update/Cancel buttons
for textfields I used the following
<Listeners>
<SpecialKey Fn="ignoreEnterKey" />
</Listeners>
I tried globally, on the page, to ignore the enter key as follows
<body onkeypress="return disableEnterKey(event)">
but if accidentally using the tab key the user move to the update button and press Enter, this is not trappedIs there a way to disable the Enter key also for the buttons?
thanks in advance
I leave here the whole example
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.ObjectModel" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ 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 List<object>
{
new {
Name = "Bill Foot",
Email = "bill.foot@object.net",
Start = new DateTime(2007, 2, 5),
Salary = 37000,
Active = true
},
new {
Name = "Bill Little",
Email = "bill.little@object.net",
Start = new DateTime(2009, 6, 13),
Salary = 53000,
Active = true
},
new {
Name = "Bob Jones",
Email = "bob.jones@object.net",
Start = new DateTime(2008, 10, 6),
Salary = 70000,
Active = true
},
new {
Name = "Bob Train",
Email = "bob.train@object.net",
Start = new DateTime(2009, 5, 5),
Salary = 68000,
Active = true
},
new {
Name = "Chris Johnson",
Email = "chris.johnson@object.net",
Start = new DateTime(2009, 1, 25),
Salary = 47000,
Active = true
}
};
store.DataBind();
}
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<ext:XScript ID="XScript1" runat="server">
<script>
var ignoreEnterKey = function (field, eventArgs) {
if (eventArgs.getKey() == eventArgs.ENTER) {
eventArgs.stopEvent();
}
};
function disableEnterKey(e) {
var key;
if (window.event)
key = window.event.keyCode;
else
key = e.which;
return (key != 13);
}
var addEmployee = function () {
var grid = #{GridPanel1};
grid.editingPlugin.cancelEdit();
// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
name: 'New Guy',
email: 'new@object.net',
start: Ext.Date.clearTime(new Date()),
salary: 50000,
active: true
}, 'Employee');
grid.store.insert(0, r);
grid.editingPlugin.startEdit(0, 0);
};
var removeEmployee = function () {
var grid = #{GridPanel1},
sm = grid.getSelectionModel();
grid.editingPlugin.cancelEdit();
grid.store.remove(sm.getSelection());
if (grid.store.getCount() > 0) {
sm.select(0);
}
};
</script>
</ext:XScript>
</head>
<body onkeypress="return disableEnterKey(event)">
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>
GridPanel with RowEditor Plugin</h1>
<ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="400" Frame="true"
Title="Employees">
<Store>
<ext:Store ID="Store1" runat="server">
<Sorters>
<ext:DataSorter Property="start" Direction="ASC" />
</Sorters>
<Model>
<ext:Model ID="Model1" runat="server" Name="Employee">
<Fields>
<ext:ModelField Name="name" ServerMapping="Name" Type="String" />
<ext:ModelField Name="email" ServerMapping="Email" Type="String" />
<ext:ModelField Name="start" ServerMapping="Start" Type="Date" />
<ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
<ext:ModelField Name="active" ServerMapping="Active" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Plugins>
<ext:RowEditing ID="RowEditing1" runat="server" ClicksToMoveEditor="1" AutoCancel="false" />
</Plugins>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Add Employee" Icon="UserAdd">
<Listeners>
<Click Fn="addEmployee" />
</Listeners>
</ext:Button>
<ext:Button ID="btnRemoveEmployee" runat="server" Text="Remove Employee" Icon="UserDelete"
Disabled="true">
<Listeners>
<Click Fn="removeEmployee" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="25" />
<ext:Column ID="Column1" runat="server" Text="Name" DataIndex="name" Flex="1">
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false">
<Listeners>
<SpecialKey Fn="ignoreEnterKey" />
</Listeners>
</ext:TextField>
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Email" DataIndex="email" Width="160">
<Editor>
<ext:TextField ID="TextField2" runat="server" AllowBlank="false" Vtype="email">
<Listeners>
<SpecialKey Fn="ignoreEnterKey" />
</Listeners>
</ext:TextField>
</Editor>
</ext:Column>
<ext:DateColumn ID="DateColumn1" runat="server" Text="Start Date" DataIndex="start"
Format="MM/dd/yyyy" Width="100">
<Editor>
<ext:DateField ID="DateField1" runat="server" AllowBlank="false" Format="MM/dd/yyyy"
MinDate="01.01.2006" MinText="Can not have a start date before the Company existed."
MaxDate="<%# DateTime.Now %>" AutoDataBind="true">
<Listeners>
<SpecialKey Fn="ignoreEnterKey" />
</Listeners>
</ext:DateField>
</Editor>
</ext:DateColumn>
<ext:NumberColumn ID="NumberColumn1" runat="server" Text="Salary" DataIndex="salary"
Format="$0,0">
<Editor>
<ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" MinValue="1"
MaxValue="150000">
<Listeners>
<SpecialKey Fn="ignoreEnterKey" />
</Listeners>
</ext:NumberField>
</Editor>
</ext:NumberColumn>
<ext:CheckColumn ID="CheckColumn1" runat="server" Text="Active?" DataIndex="active"
Width="50">
<Editor>
<ext:Checkbox ID="Checkbox1" runat="server" Cls="x-grid-checkheader-editor">
<Listeners>
<SpecialKey Fn="ignoreEnterKey" />
</Listeners>
</ext:Checkbox>
</Editor>
</ext:CheckColumn>
</Columns>
</ColumnModel>
<Listeners>
<SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selected.length);" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Jun 12, 2013 at 6:35 PM.
Reason: [CLOSED]