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?

[Daniil]

I have a single guess - the records come back from a remote store like database.

Do you reload the Store by timer, right?

[HaamSapTjai]

I have a single guess - the records come back from a remote store like database.

Do you reload the Store by timer, right?

The store comes from my SQL Server 2008 yes. Timer? No.
All the actions involving data comes from the Data Access Layer where I just return a datatable to bind it on the store.

protected void Page_Load(object sender, EventArgs e)
        {
            ShowBatch(); 
        }

 public void ShowBatch()
        {
            DataTable showBatch = DAL.ShowBatch();
            Store1.DataSource = showBatch;
            Store1.DataBind();
            grid.Reload();
        }

DAL

static public DataTable ShowBatch()
        {
            string sql = @"SELECT XXX";
            return ExecuteDataTable(sql);
        }