[CLOSED] Dynamically Adding rows to Grid Panel

  1. #1

    [CLOSED] Dynamically Adding rows to Grid Panel

    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..
    Last edited by Daniil; Jan 22, 2013 at 9:25 AM. Reason: [CLOSED]
  2. #2
    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/#!...ble-event-edit
    http://docs.sencha.com/ext-js/4-1/#!...ing-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/#!...ore-method-add

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

    Hope this helps.
  3. #3
    Quote Originally Posted by Daniil View Post
    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/#!...ble-event-edit
    http://docs.sencha.com/ext-js/4-1/#!...ing-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/#!...ore-method-add

    The editing plugin's startEdit method is to start editing.
    http://docs.sencha.com/ext-js/4-1/#!...thod-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.
  4. #4
    Do you need to add a new row when a user presses Tab?
  5. #5
    Quote Originally Posted by Daniil View Post
    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.
  6. #6
    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).getEditor(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>
  7. #7
    Quote Originally Posted by Daniil View Post
    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).getEditor(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.

Similar Threads

  1. [CLOSED] Dynamically adding view to panel MVC
    By RCM in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 14, 2011, 6:19 PM
  2. Replies: 0
    Last Post: Nov 17, 2010, 9:32 PM
  3. [CLOSED] Getting Grid Rows Error after Adding Row
    By CMA in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 12, 2010, 1:17 PM
  4. [CLOSED] [1.0] Adding new rows to filtered Grid
    By danielg in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 22, 2009, 3:57 AM
  5. Replies: 6
    Last Post: Feb 11, 2009, 3:13 PM

Tags for this Thread

Posting Permissions