Delete rows depending on value with button

[HaamSapTjai]

Hello, I need to delete some rows depending on the value of the columnStatus.
For example, I have 6 rows with values (1,1,3,2,4,3) and I want to delete rows with status 2,3 and 4 resulting in only two rows left, row 1 and row 2.

            ID   Status
Row 1   1       1
Row 2   2       1
Row 3   3       3
Row 4   4       2
Row 5   5       4
Row 6   6       3

My panel with the delete button:

<ext:Panel runat="server" ID="panel" Height="0">
        <TopBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button ID="btnClearSelection" runat="server" Text="Delete" OnDirectClick="btnClearSelection_Clicked"
                        Icon="Delete">
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
    </ext:Panel>

My gridpanel:

<ext:GridPanel ID="grid" runat="server" Title= ?" AutoWidth="true" AutoHeight="true"
        Padding="4" StripeRows="true" Draggable="false" Selectable="true" Icon="Application">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name=" personID " Mapping="PersonsId"/>
                            <ext:RecordField Name="description" Mapping="Description " />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column DataIndex="personID" Header="ID" Width="100">
                </ext:Column>
                <ext:Column ColumnID="columnStatus" DataIndex=" description " Header="Status" Width="130">
                    <Renderer Handler="return imgRenderer(value);"  />
                </ext:Column>
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="false"/>
        </SelectionModel>
    </ext:GridPanel>

Code behind.
I tried some pseude code but don?t how to actually implement it. I prefer as much as possible code behind with C#.

protected void btnClearSelection_Clicked(Object sender, DirectEventArgs e)
        {
            // Get store
            // Get rows
            // Go through every row, if rows (columnstatus = 2,3 and 4) delete it
            // Go the DB and also delete the records where columnstatus = 2,3 and 4
            // reload store
        }

[Daniil]

Hi,

Well, the Store is a client side component and the single way to remove the records - JavaScript.

It's possible to generate respective JavaScript on server, but I'd suggest to remove records from the Store client side, then initiate a DirectEvent to remove respective data in the database.

[HaamSapTjai]

Hi,

Well, the Store is a client side component and the single way to remove the records - JavaScript.

It's possible to generate respective JavaScript on server, but I'd suggest to remove records from the Store client side, then initiate a DirectEvent to remove respective data in the database.

Does this sound reasonable?
In my <Click OnEvent="ClearRows"> I use javascript to delete the rows from the GUI (client) and in the OnDirectClick="btnClearSelection_Clicked" I delete the records from the DB using C# (code-behind).

<ext:Button ID="btnClearSelection" runat="server" Text="Mutatie(s) legen" Icon="Delete" OnDirectClick="btnClearSelection_Clicked">
                        <DirectEvents>
                            <Click OnEvent="ClearRows">
                            </Click>
                        </DirectEvents>
                    </ext:Button>

One more request, can you show me how to delete the rows depending on the value like shown in above?
From googling I have the following snippets which I think I maybe need but I can't seem to get the big picture:

Get store:

var store = Ext.getCmp("grid").getStore();

Get columnheader

 grid.getColumnModel().getColumnHeader()

Get rows from the grid:

 var rows = grid.getStore(),getRange()

Access fields of records:

 this.selectionModel.getSelected().data

Thank you for the effort.

[HaamSapTjai]

Wait, I have seen some other post with sort of same problem. (grid record delete client server).
Let me try to work it out, will reply if I have found an answer!

[HaamSapTjai]

Hi,

Well, the Store is a client side component and the single way to remove the records - JavaScript.

It's possible to generate respective JavaScript on server, but I'd suggest to remove records from the Store client side, then initiate a DirectEvent to remove respective data in the database.

Failed attempt, nothing happens:

function Delete(grid) {
           
            alert("testing button clicked");

            for (var i = 0; i < grid.store.totalLength; i++ ) {
                var status = grid.store.getAt(i).data["columnStatus"];
                if (status == "2"){
                    grid.getSelectionModel().selectRow(i ,true);
                }
                grid.deleteSelected();
            }

        }

Gridpanel:

<ext:GridPanel ID="grid" runat="server" Title= ?" AutoWidth="true" AutoHeight="true"
        Padding="4" StripeRows="true" Draggable="false" Selectable="true" Icon="Application">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name=" personID " Mapping="PersonsId"/>
                            <ext:RecordField Name="description" Mapping="Description " />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column DataIndex="personID" Header="ID" Width="100">
                </ext:Column>
                <ext:Column ColumnID="columnStatus" DataIndex=" description " Header="Status" Width="130">
                    <Renderer Handler="return imgRenderer(value);"  />
                </ext:Column>
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="false"/>
        </SelectionModel>
    </ext:GridPanel>

Delete button:

<ext:Panel runat="server" ID="panel" Height="0">
        <TopBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button ID="btnClearSelection" runat="server" Text="Delete" OnDirectClick="btnClearSelection_Clicked" Icon="Delete">
                       <Listeners>
                            <Click Handler="Delete(#{grid});" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
    </ext:Panel>

[HaamSapTjai]

function Delete(grid){
            if (grid.store.getCount() > 0) {
                for (var i = grid.store.getCount(); i >= 0; i--) {
                  //get the value from the cell under the header with columnid columnstatus
                    var status = grid.store.getAt(i).data["columnStatus"];
                    alert(status);
                    if (status == "2") {
                        grid.store.removeAt(i);
                    }
                }
                grid.reload();
            }
        }

Now I have changed the delete function to this. Using firebug i get this error: grid.store.getAt(i) is undefined

[Daniil]

Please replace:

i = grid.store.getCount()

with

i = grid.store.getCount() - 1

I would suggest to use the following code:

Example

var store = GridPanel1.getStore(),
    records;

records = store.query("columnStatus", "2");
store.remove(records.items);

See also
http://docs.sencha.com/ext-js/3-4/#!...e-method-query

[HaamSapTjai]

Thank you, the delete rows works but I've got a weird 'error', the rows are deleted but they ROLLBACK?!
(I've turned off the warningondirty in the store)

Initial:


After click on delete:


And after one/two seconds it reverts back to the first picture!

Any idea what is causing the problem?