[CLOSED] RowEditor, Grid Summary and Command Columns don't play nice

  1. #1

    [CLOSED] RowEditor, Grid Summary and Command Columns don't play nice

    I have a Grid Panel that contains a RowEditor, a column summary and a command column.
    When I click the button to add a new row it throws the following error:
    Uncaught TypeError: Cannot read property 'id' of undefined
    Ext.define.removeToolbar @ ext.axd?v=29102:16215
    Ext.define.beforeScroll @ ext.axd?v=29102:15609
    Ext.Function.ExtFunction.interceptBefore.object.(anonymous function) @ ext.axd?v=29102:4628
    Ext.Function.ExtFunction.interceptAfter.object.(anonymous function) @ ext.axd?v=29102:4637
    Ext.define.onRangeFetched @ ext.axd?v=29102:135681
    Ext.define.renderRange @ ext.axd?v=29102:135575
    Ext.define.handleViewScroll @ ext.axd?v=29102:135439
    Ext.define.onReplace @ ext.axd?v=29102:135205
    Ext.define.onAdd @ ext.axd?v=29102:97243
    fire @ ext.axd?v=29102:11800
    doFireEvent @ ext.axd?v=29102:12329
    prototype.doFireEvent @ ext.axd?v=29102:33026
    fireEventArgs @ ext.axd?v=29102:12297
    fireEvent @ ext.axd?v=29102:12271
    Ext.define.onCollectionAddItems @ ext.axd?v=29102:52935
    Ext.define.onCollectionAdd @ ext.axd?v=29102:52894
    Ext.define.notify @ ext.axd?v=29102:43321
    Ext.define.splice @ ext.axd?v=29102:42897
    Ext.define.insert @ ext.axd?v=29102:42388
    Ext.define.insert @ ext.axd?v=29102:51284
    addEmployee @ newtest.aspx:24
    fire @ ext.axd?v=29102:11800
    doFireEvent @ ext.axd?v=29102:12329
    prototype.doFireEvent @ ext.axd?v=29102:33026
    fireEventArgs @ ext.axd?v=29102:12297
    fireEvent @ ext.axd?v=29102:12271
    Ext.define.fireHandler @ ext.axd?v=29102:107714
    Ext.define.onClick @ ext.axd?v=29102:107703
    fire @ ext.axd?v=29102:11800
    Ext.define.fire @ ext.axd?v=29102:18530
    Ext.define.publish @ ext.axd?v=29102:18506
    Ext.define.doDelegatedEvent @ ext.axd?v=29102:18556
    Ext.define.onDelegatedEvent @ ext.axd?v=29102:18543
    Ext.Function.ExtFunction.bind.method @ ext.axd?v=29102:4402
    If I remove the command column the error stops but the summary will be incorrectly positioned on the page.


    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.ObjectModel" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
    
    
                store.DataSource = new List<object>
                {
                    new {
                        Name = "Bill Foot",
                        Email = "bill.foot@ext.net",
                        Start = new DateTime(2007, 2, 5),
                        Salary = 37000,
                        Active = true
                    },
                    new {
                        Name = "Bill Little",
                        Email = "bill.little@ext.net",
                        Start = new DateTime(2009, 6, 13),
                        Salary = 53000,
                        Active = true
                    },
                    new {
                        Name = "Chris Johnson",
                        Email = "chris.johnson@ext.net",
                        Start = new DateTime(2009, 1, 25),
                        Salary = 47000,
                        Active = true
                    }
                };
            }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    
        <script>
            var addEmployee = function () {
                var grid = App.GridPanel1;
                store = grid.getStore();
    
    
                grid.editingPlugin.cancelEdit();
    
    
                store.getSorters().removeAll(); // We have to remove sorting to avoid auto-sorting on insert
                grid.getView().headerCt.setSortState(); // To update columns sort UI
    
    
                store.insert(0, {
                    name: 'New Guy',
                    email: 'new@ext.net',
                    start: Ext.Date.clearTime(new Date()),
                    salary: 50000,
                    active: true
                });
    
    
                grid.editingPlugin.startEdit(0, 0);
            };
    
    
            var removeEmployee = function () {
                var grid = App.GridPanel1,
                    sm = grid.getSelectionModel(),
                    store = grid.getStore();
    
    
                grid.editingPlugin.cancelEdit();
                store.remove(sm.getSelection());
    
    
                if (store.getCount() > 0) {
                    sm.select(0);
                }
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
    
            <h1>GridPanel with RowEditor Plugin</h1>
    
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Width="600"
                Height="400"
                Frame="true"
                Title="Employees">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Sorters>
                            <ext:DataSorter Property="salary" />
                        </Sorters>
                        <Model>
                            <ext:Model runat="server" Name="Employee">
                                <Fields>
                                    <ext:ModelField Name="name" ServerMapping="Name" Type="String" />
                                    <ext:ModelField Name="email" ServerMapping="Email" Type="String" />
                                    <ext:ModelField Name="start" ServerMapping="Start" Type="Date" />
                                    <ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
                                    <ext:ModelField Name="active" ServerMapping="Active" Type="Boolean" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Plugins>
                    <ext:RowEditing runat="server" ClicksToMoveEditor="1" AutoCancel="false" />
                </Plugins>
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Add Employee" Icon="UserAdd">
                                <Listeners>
                                    <Click Fn="addEmployee" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button
                                ID="btnRemoveEmployee"
                                runat="server"
                                Text="Remove Employee"
                                Icon="UserDelete"
                                Disabled="true">
                                <Listeners>
                                    <Click Fn="removeEmployee" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <ColumnModel>
                    <Columns>
                        <ext:RowNumbererColumn runat="server" Width="25" />
                        <ext:Column runat="server"
                            Text="Name"
                            DataIndex="name"
                            Flex="1">
                            <Editor>
                                <ext:TextField runat="server" AllowBlank="false" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" Text="Email" DataIndex="email" Width="160">
                            <Editor>
                                <ext:TextField runat="server" AllowBlank="false" Vtype="email" />
                            </Editor>
                        </ext:Column>
                        <ext:DateColumn runat="server"
                            Text="Start Date"
                            DataIndex="start"
                            Format="MM/dd/yyyy"
                            Width="100">
                            <Editor>
                                <ext:DateField
                                    runat="server"
                                    AllowBlank="false"
                                    Format="MM/dd/yyyy"
                                    MinDate="01.01.2006"
                                    MinText="Can not have a start date before the Company existed."
                                    MaxDate="<%# DateTime.Now %>"
                                    AutoDataBind="true" />
                            </Editor>
                        </ext:DateColumn>
                        <ext:NumberColumn
                            runat="server"
                            Text="Salary"
                            DataIndex="salary"
                            Format="$0,0"
                            Align="Center"
                            SummaryType="Sum">
                            <Editor>
                                <ext:NumberField
                                    runat="server"
                                    AllowBlank="false"
                                    MinValue="1"
                                    MaxValue="150000" />
                            </Editor>
                        </ext:NumberColumn>
                        <ext:CheckColumn
                            runat="server"
                            Text="Active?"
                            DataIndex="active"
                            Width="75">
                            <Editor>
                                <ext:Checkbox runat="server" Cls="x-grid-checkheader-editor" />
                            </Editor>
                        </ext:CheckColumn>
                        <ext:CommandColumn runat="server" Width="60" SummaryType="None">
                            <Commands>
                                <ext:GridCommand Icon="Delete" CommandName="Delete">
                                    <ToolTip Text="Delete" />
                                </ext:GridCommand>
                                <ext:CommandSeparator />
                                <ext:GridCommand Icon="NoteEdit" CommandName="Edit">
                                    <ToolTip Text="Edit" />
                                </ext:GridCommand>
                            </Commands>
                            <Listeners>
                                <Command Handler="Ext.Msg.alert(command, record.data.name);" />
                            </Listeners>
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <SelectionChange Handler="App.btnRemoveEmployee.setDisabled(!selected.length);" />
                </Listeners>
                <Features>
                    <ext:Summary ID="Summary1" runat="server" />
                </Features>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Aug 06, 2015 at 10:44 PM. Reason: [CLOSED]
  2. #2
    Hello @tnwheeler!

    I have a good and a bad news for you.

    Bad news: I couldn't reproduce the issue with the code you provided.

    Good news: its most likely that this issue has already been fixed.

    My results (tested on IE11 and Chrome 44)
    Click image for larger version. 

Name:	59859-01-entryAdded.png 
Views:	117 
Size:	24.8 KB 
ID:	24122
    Are you reproducing this issue using 3.1, 3.2, latest svn? I've tested it on latest SVN.

    By the way, I think I was not able to reproduce the mislocation of the summary when I removed the command column.
    Click image for larger version. 

Name:	59859-02-noCommandColumn.png 
Views:	82 
Size:	17.5 KB 
ID:	24123

    Please let us know if the issue is still actual for you and if you find that another sample might be necessary in order to reproduce it.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    @fabricio.murta
    Do I ever feel sheepish. I had reverted to 3.1 for testing and not realized I was not using 3.2 prior to reporting this "bug".
    I just tried my test case under 3.2 and it work perfectly (after downloading the latest version from the svn).

    Thanks and my apologies for wasting your time.
    Last edited by tnwheeler; Aug 06, 2015 at 5:00 PM.
  4. #4
    No problem, we're here to help! And you really helped us with the copy-and-paste test case.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 11
    Last Post: Oct 29, 2013, 5:32 PM
  2. Replies: 4
    Last Post: Dec 08, 2012, 7:51 AM
  3. Resize RowEditor columns
    By Dominik in forum 1.x Help
    Replies: 1
    Last Post: Jul 28, 2011, 9:11 AM
  4. Replies: 7
    Last Post: Dec 15, 2010, 3:11 PM
  5. [CLOSED] RowEditor startediting with command
    By SFritsche in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jun 21, 2010, 6:43 PM

Tags for this Thread

Posting Permissions