PDA

View Full Version : [CLOSED] Dynamically Adding rows to Grid Panel



hemantpatil
Jan 18, 2013, 5:44 AM
Hi,

I have a grid panel rendered dynamically (From code behind/Asp.net + vb). i want to add new row dynamically when user reaches to the last column of the last row and put first cell of new row in edit mode.

can anybody help me in this regard..?

thanks in advance..

Daniil
Jan 18, 2013, 6:23 AM
Hi @hemantpatil,

You should handle the Edit (maybe, CancelEdit as well) event (of a GridPanel or an editing plugin).
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Table-event-edit
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.Editing-event-edit

If it occurs on the last column, then you should add a new row.

To add a new row, please use the Store's add method.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-add

The editing plugin's startEdit method is to start editing.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.Editing-method-startEdit

Hope this helps.

hemantpatil
Jan 21, 2013, 4:42 AM
Hi @hemantpatil,

You should handle the Edit (maybe, CancelEdit as well) event (of a GridPanel or an editing plugin).
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Table-event-edit
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.Editing-event-edit

If it occurs on the last column, then you should add a new row.

To add a new row, please use the Store's add method.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-add

The editing plugin's startEdit method is to start editing.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.Editing-method-startEdit

Hope this helps.

Hi Daniil,

Thanks for the reply..

i m using Ext.Net V2, can you please provide some example code snippets, that will help me to better understand the thing.

Daniil
Jan 21, 2013, 7:09 AM
Do you need to add a new row when a user presses Tab?

hemantpatil
Jan 21, 2013, 8:51 AM
Do you need to add a new row when a user presses Tab?

Yes,

add row when user presses Tab on Last Editable Column in last row of gridpanel.

Daniil
Jan 21, 2013, 11:40 AM
I would try to override the RowModel's onEditorTab function (or CellModel's one if you use CellSelectionModel).

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", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

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

<script>
Ext.selection.RowModel.override({
onEditorTab: function (editingPlugin, e) {
var me = this,
view = me.views[0],
record = editingPlugin.getActiveRecord(),
header = editingPlugin.getActiveColumn(),
position = view.getPosition(record, header),
direction = e.shiftKey ? 'left' : 'right',
editor,
editing;

do {
position = view.walkCells(position, direction, e, me.preventWrap);
if (position) {
editor = view.headerCt.getHeaderAtIndex(position.column).ge tEditor(record);
if (editor) {
editing = editingPlugin.startEditByPosition(position);
}
}
} while (position && (!editor || !editing));

if (!editing && !e.shiftKey) {
record = view.store.add({})[0];
view.headerCt.items.each(function (item) {
if (item.getEditor() && !item.isHidden()) {
editingPlugin.startEdit(record, item);
return false;
}
});
}
}
});
</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" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Test2" DataIndex="test2">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Test3" DataIndex="test3">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing runat="server" />
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>

hemantpatil
Jan 22, 2013, 7:58 AM
I would try to override the RowModel's onEditorTab function (or CellModel's one if you use CellSelectionModel).

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", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

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

<script>
Ext.selection.RowModel.override({
onEditorTab: function (editingPlugin, e) {
var me = this,
view = me.views[0],
record = editingPlugin.getActiveRecord(),
header = editingPlugin.getActiveColumn(),
position = view.getPosition(record, header),
direction = e.shiftKey ? 'left' : 'right',
editor,
editing;

do {
position = view.walkCells(position, direction, e, me.preventWrap);
if (position) {
editor = view.headerCt.getHeaderAtIndex(position.column).ge tEditor(record);
if (editor) {
editing = editingPlugin.startEditByPosition(position);
}
}
} while (position && (!editor || !editing));

if (!editing && !e.shiftKey) {
record = view.store.add({})[0];
view.headerCt.items.each(function (item) {
if (item.getEditor() && !item.isHidden()) {
editingPlugin.startEdit(record, item);
return false;
}
});
}
}
});
</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" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Test2" DataIndex="test2">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Test3" DataIndex="test3">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing runat="server" />
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>

Thanks Daniil,

it worked like a charm for me..

Thanks a lot.

Please close the thread.