PDA

View Full Version : [CLOSED] Delete new record in GridPanel



Jurke
Nov 17, 2020, 3:52 PM
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

fabricio.murta
Nov 18, 2020, 1:51 AM
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!

Jurke
Nov 18, 2020, 8:08 AM
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().getSel ection()[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

fabricio.murta
Nov 18, 2020, 4:28 PM
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!

Jurke
Nov 19, 2020, 12:35 PM
Hi
Its works perfectly! I also deleted the Ext.defer, there seems to be no need for it.

Thanks!
Mikael

fabricio.murta
Nov 20, 2020, 11:07 PM
Glad it worked, Mikael, and thank you for the feedback!