[CLOSED] Adding a new record with paging enabled issue

  1. #1

    [CLOSED] Adding a new record with paging enabled issue

    Hello,

    I have a grid with paging tool bar. I have set pagesize ="10" in store. I am not using any remote paging here. I have a add button, which will add new empty record to the grid at the end and set the focus on second column textbox.

    The problem is when I have records less than 10, a new record gets added sucessfully on Add click wth focus on second column textbox.
    When there are more than 10 records in the grid, then page is more than 1 and when I click add, it adds record, but the focus is not showing up on the second column textbox.

    This is the code. On add click I call this Javascript function. I am adding a new record at the last.


      var insertRecord = function () {
                        var grid = #{GridPanel1};
                        var count1 = grid.getStore().getTotalCount();
                        grid.store.insert(count1, 0);
                        grid.getView().focusRow(count1);
                        grid.getStore().update();
                        grid.editingPlugin.startEdit(grid.store.getAt(count1), grid.columns[1]);
                        
                        
                    };

    
    
    An important thing to note is when I add a new record at the top as the first item, then it is working as expected with focus on textbox. Here, I want to add a record at the last.
    
     <BottomBar>
            <ext:PagingToolbar ID="PagingToolbar1" runat="server" DisplayInfo="true" DisplayMsg="Displaying {0} - {1} of {2}"
                EmptyMsg="No data to display" HideRefresh="true">
            </ext:PagingToolbar>
        </BottomBar>
    Last edited by Daniil; Jul 15, 2014 at 1:04 PM. Reason: [CLOSED]
  2. #2
    Hi @vmehta,

    Please provide a full test case.
  3. #3
    I have totally 7 records.

    First set PageSize = "7" in store and click on Add button. A new record added with focus on second column.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
        </div>
        </form>
    </body>
    </html>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:ResourceManager ID="rmPrelimIdeas" runat="server" />
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                List<object> gridData = new List<object>
                                        {
                                            new {ID=1, Name="Name1" },
                                            new {ID=2, Name="Name2" },
                                            new {ID=3, Name="Name3" },
                                            new {ID=4, Name="Name4" },
                                            new {ID=5 , Name="Name5" },
                                            new {ID=6 , Name="Name6" },
                                            new {ID= 7 , Name="Name7" },
                                        };
                Store1.DataSource = gridData;
                Store1.DataBind();
            }
    
        }
    </script>
    
    
    <script language="javascript" type="text/javascript">
    
    var insertRecord = function () {
                        var grid = <%= GridPanel1.ClientID %>;
                        var count1 = grid.getStore().getTotalCount();
                        grid.store.insert(count1, 0);
                        grid.getView().focusRow(count1);
                        grid.getStore().update();
                        grid.editingPlugin.startEdit(grid.store.getAt(count1), grid.columns[1]);
                         
                    };
    </script>
    
    <ext:GridPanel ID="GridPanel1" runat="server" SelectionMemory="false" >
        <Store> 
            <ext:Store ID="Store1" runat="server" PageSize="7">
                <Model>
                    <ext:Model ID="Model2" runat="server" IDProperty="ID">
                        <Fields>
                            <ext:ModelField Name="ID" Type="String" />
                            <ext:ModelField Name="Name" Type="String" />
                           
                        </Fields>
                    </ext:Model>
                </Model>
                
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column ID="Column5" runat="server" Text="ID" DataIndex="ID">
                </ext:Column>
               
              
                <ext:Column ID="clmTopicName" runat="server" Text="Name" DataIndex="Name"
                >
                <Editor>
                        <ext:TextField ID="TextField1" runat="server" />
                    </Editor>
                </ext:Column>
                
            </Columns>
        </ColumnModel>
      
        <Plugins>
            <ext:CellEditing ClicksToEdit="1">
            </ext:CellEditing>
          
        </Plugins>
        <SelectionModel>
        
            <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server">
               
            </ext:CheckboxSelectionModel>
        </SelectionModel>
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                    <ext:Button ID="btnAdd" runat="server" Text="Add">
                        <Listeners>
                            <Click Fn="insertRecord" />
                        </Listeners>
                    </ext:Button>
                    
                </Items>
            </ext:Toolbar>
        </TopBar>
        <BottomBar>
            <ext:PagingToolbar ID="PagingToolbar1" runat="server" DisplayInfo="true" DisplayMsg="Displaying {0} - {1} of {2}"
                EmptyMsg="No data to display" HideRefresh="true">
                
            </ext:PagingToolbar>
        </BottomBar>
    </ext:GridPanel>
    Now set PageSize = "5" and do the same. New record is added but focus is not set on second column.

    But if I change the javascript function to add a record at the starting, it works on both conditions. Like below.


    var insertRecord = function () {
                        var grid = <%= GridPanel1.ClientID %>;
                        grid.store.insert(0, 0);
                        grid.getView().focusRow(0);
                        grid.getStore().update();
                        grid.editingPlugin.startEdit(grid.store.getAt(0), grid.columns[1]);
                         
                    };
  4. #4
    Well, adding records to the Store with paging is a bit quirky scenario. If you add a record to the page, the size of the page starts to exceed the page size. It causes some inconsistency.

    A more or less good solution might be adding at the top.
    var newRecordId = -1;
    
    var insertRecord = function () {
        var grid = App.GridPanel1;
    
        grid.store.insert(0, { ID: newRecordId-- });
        grid.getView().focusRow(0);
        grid.editingPlugin.startEdit(grid.store.getAt(0), grid.columns[1]);
    };
    Though, the new records will go to the second page if you navigate it via the PagingToolbar. This problem has been discussed there.
    http://forums.ext.net/showthread.php?25719

Similar Threads

  1. Replies: 2
    Last Post: Aug 28, 2012, 10:26 AM
  2. Replies: 1
    Last Post: Dec 22, 2011, 6:17 AM
  3. [CLOSED] Caching issue when forms authentication is enabled
    By jskibo in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Sep 22, 2009, 12:25 PM
  4. [CLOSED] Adding a new Store Record - Not a Record object
    By Steve in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 15, 2009, 7:40 AM
  5. Adding one record in a grid
    By nuno_Santos in forum 1.x Help
    Replies: 1
    Last Post: Apr 14, 2009, 5:55 PM

Posting Permissions