[CLOSED] Delete new record in GridPanel

  1. #1

    [CLOSED] Delete new record in GridPanel

    Hi
    I have problem deleting newly added rows in a GridPanel. It works great to add row and the delete works if I manually click the row then delete it.
    But it does not work by clicking the "Delete" button directly after adding the row.
    The problem is that for some reason the
    var selection = App.gpPriser.getSelectionModel().getSelection()[0];
    returns undefined. Any ideas of why this happens?

    Add new row
    var row = store.indexOf(store.insert(0, {})[0]); 
    Ext.defer(function () {
         grid.editingPlugin.startEditByPosition({ row: row, column: 0 });
    }, 100);
    Delete button
    var selection = App.gpPriser.getSelectionModel().getSelection()[0];
    if (selection) {
         App.gpPriser.store.remove(selection);
         App.btnSparaPrisrad.fireEvent(App.btnSparaPrisrad.clickEvent); //sparar store, dvs raderar de rader som ska raderas mot databas
    }
    Best regards
    Mikael
    Last edited by fabricio.murta; Nov 20, 2020 at 10:07 PM.
  2. #2
    Hello Mikael!

    Do you have a test case we can reproduce the scenario you are describing?

    It looks like you may be trying to retrieve a record from the store before it is committed. There's that dirty record concept in Ext JS stores, in which in some circumstances you may be fetching data from the "original" store and not the "dirty" one (with new and removed records). So it would be best if we could work on a test case.

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello
    Here is a test case based on one of you Examples. I did not paste the CodeBehind since its the same as the original example "Grid with batch saving", found here: https://examples5.ext.net/#/GridPanel/Update/Batch/

    If you click add, then you go into edit mode. If you at this point no longer want the row and decides to delete it, nothing happens when you press delete. Instead you have to manually click the row and then delete it for the row to go away.
    Hoping for a nice solution to this, thanks!

    <html>
    <head runat="server">
        <title>Grid with batch saving - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <script>
    
    
            function addRecord() {
                try {
                    var grid = App.GridPanel1;
                    var store = grid.store;
    
    
                    var row = store.indexOf(store.insert(0, {})[0]);
                    Ext.defer(function () {
                        grid.editingPlugin.startEditByPosition({ row: row, column: 1 });
                    }, 100);
    
    
                }
                catch (e) {
                    Ext.Msg.alert('Error', e.message);
                }
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
    
            <h1>Grid with batch saving</h1>
    
    
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model runat="server" IDProperty="Id" Name="Person">
                        <Fields>
                            <ext:ModelField Name="Id" Type="Int" AllowNull="true" />
                            <ext:ModelField Name="Email" />
                            <ext:ModelField Name="First" />
                            <ext:ModelField Name="Last" />
                        </Fields>
                        <Validators>
                            <ext:LengthValidator Field="Email" Min="1" />
                            <ext:LengthValidator Field="First" Min="1" />
                            <ext:LengthValidator Field="Last" Min="1" />
                        </Validators>
                    </ext:Model>
                </Model>
            </ext:Store>
    
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Icon="Table"
                Frame="true"
                Title="Users"
                Height="400"
                Width="500"
                StoreID="Store1"
                StyleSpec="margin-top: 10px">
                <ColumnModel>
                    <Columns>
                        <ext:Column runat="server" Text="ID" Width="40" DataIndex="Id">
                            <Renderer Handler="return record.phantom ? '' : value;" />
                        </ext:Column>
    
    
                        <ext:Column runat="server" Text="Email" Flex="1" DataIndex="Email">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
    
    
                        <ext:Column runat="server" Text="First" Flex="1" DataIndex="First">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
    
    
                        <ext:Column runat="server" Text="Last" Flex="1" DataIndex="Last">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
    
    
                        <ext:CommandColumn runat="server" Width="70">
                            <Commands>
                                <ext:GridCommand Text="Reject" ToolTip-Text="Reject row changes" CommandName="reject" Icon="ArrowUndo" />
                            </Commands>
                            <PrepareToolbar Handler="toolbar.items.get(0).setVisible(record.dirty);" />
                            <Listeners>
                                <Command Handler="record.reject();" />
                            </Listeners>
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
    
    
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Add" Icon="Add">
                                <Listeners>
                                    <Click Handler="addRecord();" />
                                </Listeners>
                            </ext:Button>
    
    
                            <ext:Button runat="server" Text="Delete" Icon="Exclamation">
                                <Listeners>
                                    <Click Handler="var selection = #{GridPanel1}.getView().getSelectionModel().getSelection()[0];
                                                    if (selection) {
                                                        #{GridPanel1}.store.remove(selection);
                                                    }" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
    
    
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" Mode="Single">
                    </ext:RowSelectionModel>
                </SelectionModel>
    
    
                <Buttons>
                    <ext:Button runat="server" Text="Sync" Icon="Disk">
                        <DirectEvents>
                            <Click OnEvent="SaveClick" Before="return #{Store1}.isDirty();">
                                <ExtraParams>
                                    <ext:Parameter Name="data" Value="#{Store1}.getChangedData()" Mode="Raw" Encode="true" />
                                </ExtraParams>
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                </Buttons>
    
    
                <Plugins>
                    <ext:CellEditing runat="server" />
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Regards
    Mikael
  4. #4
    Hello Mikael! Thanks for the test case!

    By programmatically starting the edit in a row, selection does not take place. This is basically because different grid selection approaches would behave differently (cell selection, row selection, spreadsheet...), and different edit types also may interface with it.

    So I believe all you need to do is select the created record as soon as you start to edit.

    There's a defer therein, was it required at all? If I just remove it and let the start edit and select operations run, they work just fine. The order doesn't matter at all. But if the selection is outside the deferred call, and start edit still delayed, then the selection is reset. I believe you're safe to just unwrap everything from the deferred call, and benefit of the view refresh at once (without re-layouts, or other delayed tasks).

    Without fiddling with the delay, I then just changed your client side addRecord() to:

    function addRecord() {
        try {
            var grid = App.GridPanel1;
            var gridSelection = grid.getSelectionModel();
            var store = grid.store;
    
            var record = store.insert(0, {})[0];
            var row = store.indexOf(record);
    
            Ext.defer(function () {
                grid.editingPlugin.startEditByPosition({ row: row, column: 1 });
                gridSelection.select(record);
            }, 100);
    
        }
        catch (e) {
            Ext.Msg.alert('Error', e.message);
        }
    }
    And it seems the behavior you pointed was no longer happening. When I click 'add' the record starts to be edited and gets selected. If I then just click 'delete', it is gone as I believe it is supposed to.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi
    Its works perfectly! I also deleted the Ext.defer, there seems to be no need for it.

    Thanks!
    Mikael
  6. #6
    Glad it worked, Mikael, and thank you for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Delete record on long press
    By RaphaelSaldanha in forum Examples and Extras
    Replies: 1
    Last Post: Apr 23, 2016, 12:57 PM
  2. Replies: 3
    Last Post: Mar 06, 2013, 3:48 AM
  3. how to delete or remove record?
    By richard in forum 2.x Help
    Replies: 0
    Last Post: Jun 08, 2012, 9:12 AM
  4. Delete or remove record from gridpanel
    By lapix in forum 1.x Help
    Replies: 3
    Last Post: Feb 25, 2012, 5:56 PM
  5. Gridpanel delete a record with rowcommand
    By umitcel in forum 1.x Help
    Replies: 3
    Last Post: Jul 23, 2010, 9:27 AM

Posting Permissions