PDA

View Full Version : [CLOSED] Excel-style editting in GridPanel



UnifyEducation
Mar 15, 2013, 5:34 PM
Hi,

I've read the following topic:
http://forums.ext.net/showthread.php?23193-CLOSED-cursor-shift-function-by-keyboard
http://forums.ext.net/showthread.php?17515-CLOSED-GridPanel-start-cell-editing-when-key-pressed

But I don't know how to make excel-style editting in gridpanel.
That means:
When I press UP/DOWN/LEFT/RIGHT key the cell editing is actived for the corresponding cell.

If possible, can you give me an example in razor syntax

Baidaly
Mar 16, 2013, 2:56 AM
Hello!

You can try to use the following approach. It's in ASPX but it's easy to move it to Razor.



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

<%@ 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 double Amount { get; set; }
}

protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}

private void BindData()
{
this.GridPanel1.GetStore().DataSource = this.GetData();
this.GridPanel1.GetStore().DataBind();
}

private List<Company> GetData()
{
return new List<Company>
{
new Company { ID = 1, Name = "3m Co", Amount = 2 },
new Company { ID = 2, Name = "Alcoa Inc", Amount = 0 },
new Company { ID = 3, Name = "Altria Group Inc", Amount = 0},
new Company { ID = 4, Name = "American Express Company",Amount = 0},
new Company { ID = 5, Name = "American International Group, Inc.", Amount = 0},
new Company { ID = 6, Name = "Wal-Mart Stores, Inc.", Amount = 0 } ,
new Company { ID = 7, Name = "American Group2, Inc.", Amount = 0},
new Company { ID = 8, Name = "Wal-Mart Stores2, Inc.", Amount = 0 }
};
}

</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET Examples</title>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:GridPanel
runat="server"
Width="600"
Height="300"
ID="GridPanel1"
Title="Edit Plants?"
Frame="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server" Name="Plant">
<Fields>
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Amount" Type="Int" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Name" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column
runat="server"
Text="Name"
DataIndex="Name"
Flex="1">
<Editor>
<ext:TextField runat="server" AllowBlank="false">
<Listeners>
<SpecialKey Handler="
var grid = this.up('gridpanel');

if (e.getKey() === e.UP) {
grid.direction = 'UP';
grid.editingPlugin.completeEdit();
} else {
grid.direction = null;
}" />
</Listeners>
</ext:TextField>
</Editor>
</ext:Column>

<ext:Column runat="server" Text="Name" DataIndex="Name" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CellSelectionModel runat="server" />
</SelectionModel>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="2">
<Listeners>
<Edit Handler="
if (e.grid.direction != null) {
switch (e.grid.direction) {
case 'UP': Ext.Function.defer(function() {
this.startEdit(e.rowIdx - 1, e.column);
}, 50, this);
}
e.grid.direction = null;
}
"></Edit>
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</body>
</html>