Ext.NET changes to gridpanel unwanted rollback

Question

Requirement: I implemented a function that deletes rows by clikcing on a button from my grid based on a value. My requirement is that the rows with status "Verwerkt", "Ter Fiattering", "Al verwerkt" are deleted from the grid and in codebehind I add a method that also deletes the records but from the database.

Problem: The rows are deleted from the grid but they COME BACK after one/two seconds. Really weird. I got a warning about warningondirrty but I've canceled that message by turning it off in the store (WarningOnDirty = false). Help :)

Gridpanel:

<ext:Panel runat="server" ID="panel" Height="0">
    <TopBar>
        <ext:Toolbar runat="server">
            <Items>
                <ext:Button ID="btnHaalBatch" runat="server" Text="GBA synchroniseren" OnDirectClick="btnHaalBatch_Clicked" Icon="Add"> </ext:Button>
                <ext:Button ID="btnVerwerkNAW" runat="server" Text="Verwerk" OnDirectClick="btnVerwerkNAW_Clicked" Icon="Tick">
                    <%--<DirectEvents>
                        <Click OnEvent="Wait"/>
                    </DirectEvents>--%>
                </ext:Button>
                <ext:ProgressBar ID="Progress1" runat="server" Width="300" Text="Initializing..." Hidden="true" />
                <ext:Button ID="btnClearSelection" runat="server" Text="Mutatie(s) legen" Icon="Delete" OnDirectClick="btnClearSelection_Clicked">
                    <Listeners>
                        <Click Handler="MutatieLegen(#{grid});" />
                    </Listeners>
                </ext:Button>
            </Items>
        </ext:Toolbar>
    </TopBar>
</ext:Panel>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<!-- Simple Array Grid -->
<ext:GridPanel ID="grid" runat="server" Title="Wijzigingen" AutoWidth="true" AutoHeight="true" Padding="4" StripeRows="true" Draggable="false" Selectable="true" Icon="Application">
    <Store>
        <ext:Store ID="Store1" runat="server" WarningOnDirty="false">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="persoonID" Mapping="PersoonsId" />
                        <ext:RecordField Name="anummer" Mapping="Anummer" />
                        <ext:RecordField Name="bSNpersoon" Mapping="BSNpersoon" />
                        <ext:RecordField Name="type" Mapping="TypeWijziging" />
                        <ext:RecordField Name="datum" Mapping="DatumBinnenhalen" />
                        <ext:RecordField Name="omschrijving" Mapping="Omschrijving" />
                        <ext:RecordField Name="foutmelding" Mapping="Foutmelding" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
    </Store>
    <ColumnModel ID="ColumnModel1" runat="server">
        <Columns>
            <ext:RowNumbererColumn />
            <ext:Column DataIndex="persoonID" Header="Relatie nr." Width="100">
            </ext:Column>
            <ext:Column DataIndex="anummer" Header="A-nummer" Width="150">
            </ext:Column>
            <ext:Column DataIndex="bSNpersoon" Header="BSN" Width="150">
            </ext:Column>
            <ext:Column DataIndex="type" Header="Type wijziging" Width="150">
            </ext:Column>
            <ext:Column DataIndex="datum" Header="Datum synchroniseren" Width="200">
            </ext:Column>
            <ext:Column ColumnID="columnStatus" DataIndex="omschrijving" Header="Status" Width="130">
                <Renderer Handler="return imgRenderer(value);" />
            </ext:Column>
            <ext:Column DataIndex="foutmelding" Header="Reden" Width="350">
            </ext:Column>
        </Columns>
    </ColumnModel>
    <SelectionModel>
        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="false" />
    </SelectionModel>
</ext:GridPanel>

Function javascript client delete rows:

function MutatieLegen(grid) {
        var i = 0;
        //var store = Ext.getCmp("grid").getStore();
        if (grid.store.getCount() > 0) {
            for (i = grid.store.getCount() - 1; i >= 0; i--) {
                var status = grid.store.getAt(i).data["omschrijving"];
                if (status == "Verwerkt" || status == "Ter Fiattering" || status == "Al verwerkt") {
                    grid.store.removeAt(i);
                }
            }
        }

Code behind:

protected void btnClearSelection_Clicked(Object sender, DirectEventArgs e)
    {

       // Code behind logic. call sql to delete rows where status == Verwerkt or Ter   Fiattering or Al verwerkt

    }

Answer 1

I guess you rebind a data in each request, ensure that you wrap data binding by 'if(!X.IsAjaxRequest)'