PDA

View Full Version : [CLOSED] KeyNav in GridPanel to Add Row



osef
Dec 09, 2014, 7:44 PM
Hi, I want to add a row in a GridPanel with the key down (the last row), I am using the keynav but It is not working, Could you please to help me to complete my example?



<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>

<ext:GridPanel
ID="gpGruposMenu"
runat="server"
Height="420"
Width="960"
Title="GRUPOS MEN?"
EnableColumnHide="false"
EnableColumnMove="false"
Header="true"
TitleAlign="Left"
StyleSpec="margin:0 auto; margin-top: 20px;">
<Store>
<ext:Store
ID="sGruposMenu"
runat="server">
<Model>
<ext:Model ID="mGruposMenu" runat="server">
<Fields>
<ext:ModelField Name="ID" Type="String" />
<ext:ModelField Name="Descripcion" Type="String" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="ID" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column
ID="cID"
runat="server"
Text="ID"
Align="Center"
Width="100"
DataIndex="ID">
<Editor>
<ext:TextField
ID="txtfID"
runat="server"
MaxLength="3"
EnforceMaxLength="true"
ReadOnly="true">
<Listeners>
<SpecialKey Handler="if (e.getKey() === e.ENTER) {
this.up('gridpanel').enterWasPressed = true;
}">
</SpecialKey>
</Listeners>
</ext:TextField>
</Editor>
</ext:Column>
<ext:Column
ID="cDescripcion"
runat="server"
Text="DESCRIPCI?N"
Align="Left"
Width="858"
DataIndex="Descripcion">
<Editor>
<ext:TextField
ID="txtfDescripcion"
runat="server"
MaxLength="50"
EnforceMaxLength="true">
</ext:TextField>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<KeyNav ID="knGruposMenu" runat="server">
</KeyNav>
<View>
<ext:GridView
ID="gvGruposMenu"
runat="server"
StripeRows="true">
</ext:GridView>
</View>
<Plugins>
<ext:CellEditing ID="ceGruposMenu" runat="server" ClicksToEdit="1">
</ext:CellEditing>
</Plugins>
<SelectionModel>
<ext:RowSelectionModel
ID="rsmGruposMenu"
runat="server">
</ext:RowSelectionModel>
</SelectionModel>
<FooterBar>
<ext:StatusBar
ID="sbGruposMenu"
runat="server"
Text=""
StatusAlign="Left">
</ext:StatusBar>
</FooterBar>
</ext:GridPanel>




protected void Page_Load(object sender, EventArgs e)
{
List<GrupoMenu> lGruposMenu = new List<GrupoMenu>();
for (int i = 0; i < 10; i++)
{
GrupoMenu oGrupoMenu = new GrupoMenu();
oGrupoMenu.ID = "ID" + i;
oGrupoMenu.Descripcion = "Descripcion" + i;
lGruposMenu.Add(oGrupoMenu);
}

sGruposMenu.DataSource = lGruposMenu;
sGruposMenu.DataBind();
}

public class GrupoMenu
{
#region Campos

string id;
string descripcion;

#endregion

#region Propiedades

public string ID
{
get { return id; }
set { id = value; }
}

public string Descripcion
{
get { return descripcion; }
set { descripcion = value; }
}

#endregion
}


http://forums.ext.net/attachment.php?attachmentid=17031&stc=1

Daniil
Dec 10, 2014, 11:50 AM
Hi @osef,

It might be problematic to use a custom KeyNav, because it will be probably conflicting with the internal one that is used in a GridPanel.

Personally, I would try to override the internal key down handler.

Example

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

<!DOCTYPE html>

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

<script>
var myOnKeyDown = function (e) {
var newRecord = this.views[0].walkRecs(e.record, 1);

if (newRecord) {
this.afterKeyNavigate(e, newRecord);
}

console.log("Do something here.");
};
</script>
</head>
<body>
<form runat="server">
<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" />
<ext:Column runat="server" Text="Test 2" DataIndex="test2" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server">
<CustomConfig>
<ext:ConfigItem Name="onKeyDown" Value="myOnKeyDown" Mode="Raw" />
</CustomConfig>
</ext:RowSelectionModel>
</SelectionModel>
</ext:GridPanel>
</form>
</body>
</html>

osef
Dec 10, 2014, 5:46 PM
Thank you Daniil, I only want to know, how Can I to do with the KeyNav? or How does this work event in a GridPanel?

Daniil
Dec 11, 2014, 8:31 AM
how Can I to do with the KeyNav?

This appears to be working.

Example

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

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<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" />
<ext:Column runat="server" Text="Test 2" DataIndex="test2" />
</Columns>
</ColumnModel>
</ext:GridPanel>

<ext:KeyNav runat="server" Target="App.GridPanel1.getView().el">
<Down Handler="console.log('Down');" />
</ext:KeyNav>
</form>
</body>
</html>



or How does this work event in a GridPanel?

Sorry, I don't understand the question.