[FIXED] [#1526] [4.3.0] Store OnBeforeStoreChanged only fires once on first edit of Gridpanel, all other edits are "stuck" dirty

  1. #1

    [FIXED] [#1526] [4.3.0] Store OnBeforeStoreChanged only fires once on first edit of Gridpanel, all other edits are "stuck" dirty

    Hi guys.

    Probably a simple fix but I'm having trouble.

    I'm trying to add rows dynamically to a Store/Gridpanel and let users edit them with a CellEditing plugin.

    The first time they edit the cells, it's fine. The changes are saved. The second cell that is edited, and all subsequent cells, are flagged dirty and stay dirty forever. The Store's OnBeforeStoreChanged event is never fired again.

    Below is the sample code. It's very easy to reproduce this issue:

    • Type "5" in the text box at the top and click the "Add/Subtract Lines" Button.
    • 5 Lines will be added to the Gridpanel.
    • Double click any of the cells to edit them.
    • Do any edit you like. Then click off the box.
    • Double click a different box and edit it.



    It will remain dirty. All further edits will remain dirty. The OnBeforeStoreChanged DirectEvent will never fire again.

    I've tried CommmitChanges on the Store and refreshing the View on the Gridpanel...both with Javascript and with DirectEvents. DirectEvent does nothing, doing it in Javascript on the page does clear the dirty flags but the behavior remains the same.

    Any help appreciated,

    David

    Code to reproduce issue below:




    Main Page:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test.aspx.vb" Inherits="SupplierPortalV2.Test1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <title>Ext.Net Test</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:Viewport runat="server" >
                <Items>
                    <ext:GridPanel runat="server" ID="grdMain" AutoDataBind="true" >
                        <Store>
                            <ext:Store runat="server" ID="storMain" OnBeforeStoreChanged="handleChanges" AutoSync="true" >
                                <Model>
                                    <ext:Model runat="server" >
                                        <Fields>
                                            <ext:ModelField Name="idProperty" Type="Int" />
                                            <ext:ModelField Name="item1" Type="String" />
                                            <ext:ModelField Name="item2" Type="String" />
                                            <ext:ModelField Name="item3" Type="String" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <TopBar>
                            <ext:Toolbar runat="server" >
                                <Items>
                                    <ext:ToolbarFill runat="server" />
                                    <ext:NumberField runat="server" ID="nmbLines" FieldLabel="# of Lines" />
                                    <ext:ToolbarSpacer Width="10" />
                                    <ext:Button runat="server" Text="Add/Subtract Lines" >
                                        <DirectEvents>
                                            <Click OnEvent="buildRows" />
                                        </DirectEvents>
                                    </ext:Button>
    
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <ColumnModel>
                            <Columns>
                                <ext:Column runat="server" DataIndex="idProperty" />
                                <ext:Column runat="server" DataIndex="item1" >
                                    <Editor>
                                        <ext:TextField runat="server" ID="editItem1" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column runat="server" DataIndex="item2" >
                                    <Editor>
                                        <ext:TextField runat="server" ID="editItem2" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column runat="server" DataIndex="item3" >
                                    <Editor>
                                        <ext:TextField runat="server" ID="editItem3" />
                                    </Editor>
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                        <Plugins>
                            <ext:CellEditing runat="server" >
                            </ext:CellEditing>
                        </Plugins>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
    Code behind:

    Imports Ext.Net
    
    Public Class testClass
        Public Property idProperty As Integer
        Public Property item1 As String
        Public Property item2 As String
        Public Property item3 As String
    
        Sub New(ByVal idProperty As Integer, ByVal item1 As String, ByVal item2 As String, ByVal item3 As String)
            Me.idProperty = idProperty
            Me.item1 = item1
            Me.item2 = item2
            Me.item3 = item3
    
        End Sub
    
    
    End Class
    
    Public Class Test1
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
        End Sub
    
        Sub buildRows(ByVal sender As Object, ByVal e As DirectEventArgs)
            If Session("lines") Is Nothing Then
                Session("lines") = New List(Of testClass)
    
            End If
    
            Dim lineList As List(Of testClass) = Session("lines")
            Dim currentRows = lineList.Count
            Dim newRows As Integer = nmbLines.Value
    
            If newRows > currentRows Then
    
                For i As Integer = currentRows + 1 To newRows
                    lineList.Add(New testClass(i, "thing1", "thing2", "thing3"))
    
                Next
    
            ElseIf newRows < currentRows Then
                lineList.RemoveRange(newRows, currentRows - newRows)
    
            End If
    
            Session("lines") = lineList
            storMain.DataSource = lineList
            storMain.DataBind()
            grdMain.DataBind()
    
    
        End Sub
    
        Protected Sub handleChanges(ByVal sender As Object, ByVal e As BeforeStoreChangedEventArgs)
            Dim newlines As List(Of testClass) = e.DataHandler.ObjectData(Of testClass)()
    
    
            If e.Action = StoreAction.Update Then
                Dim listToUpdate As List(Of testClass) = Session("lines")
                For Each updated As testClass In newlines
                    For Each l As testClass In listToUpdate
                        If l.idProperty = updated.idProperty Then
                            l.item1 = updated.item1
                            l.item2 = updated.item2
                            l.item3 = updated.item3
    
                        End If
    
                    Next
    
                Next
    
                Session("lines") = listToUpdate
                storMain.CommitChanges()
                grdMain.Refresh()
    
            End If
    
        End Sub
    
    End Class
    Last edited by fabricio.murta; Aug 10, 2017 at 10:47 PM.
  2. #2
    Hello @dmoore!

    Thanks for the straightforward test case but, before we go to it, I may have found the reason comparing with one of the examples in Examples Explorer.

    So, check this out: Grid with Batch Saving.

    See how in its source, the SaveClick() server-side method commits each individual record? I believe it corresponds to your handleChanges() method.

    Please consider that and let us know if it helps you solve the problem with the ever-dirty cells on your grid.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Ok let me try this. I did use this example in my code but I missed/didn't use the Commit logic for the ID. Please stand by.
  4. #4
    Ok, I changed the Model to use the idProperty as the Key field. It now looks like this:

                                    <ext:Model runat="server" IDProperty="idProperty" >
                                        <Fields>
                                            <ext:ModelField Name="idProperty" Type="Int" />
                                            <ext:ModelField Name="item1" Type="String" />
                                            <ext:ModelField Name="item2" Type="String" />
                                            <ext:ModelField Name="item3" Type="String" />
                                        </Fields>
                                    </ext:Model>
    And I changed handleChanges to commit, like this:

        Protected Sub handleChanges(ByVal sender As Object, ByVal e As BeforeStoreChangedEventArgs)
            Dim newlines As List(Of testClass) = e.DataHandler.ObjectData(Of testClass)()
    
    
            If e.Action = StoreAction.Update Then
                Dim listToUpdate As List(Of testClass) = Session("lines")
                For Each updated As testClass In newlines
                    For Each l As testClass In listToUpdate
                        If l.idProperty = updated.idProperty Then
                            l.item1 = updated.item1
                            l.item2 = updated.item2
                            l.item3 = updated.item3
    
                            storMain.GetById(l.idProperty).Commit()
    
                        End If
    
                    Next
    
                Next
    
                Session("lines") = listToUpdate
    
            End If
    
        End Sub
    It didn't change anything...still dirty after the first edit try.
  5. #5
    Ok, I got this working using a Button that manually saves the Gridpanel, much like your example.

    I would really like this to work when the user finishes editing a cell. Just something to look into.

    Thank you for your time and your advice.

    --D
  6. #6
    Hello @dmoore!

    I think all you are missing is just binding the same action the button does (be it a listener or direct event) to the cell editing plugin's Edit event.

    I mean, adding something like:

    <DirectEvents>
        <Edit OnEvent="handleCellChange" />
    </DirectEvents>
    Between your lines 66 and 67 of your main page.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Hello again!

    Anyway, I've just noticed how it triggered nicely the first time and then second onwards it doesn't. In fact, a null reference, client-side, exception is triggering, so that's definitely an error.

    Thanks again for the runnable test case, and reporting the issue! We've logged this issue under #1526 and the original approach you posted is a very convenient way to handle store changes, which shouldn't have been left unnoticed.

    We'll post an update here as soon as we fix this issue in Ext.NET.
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Hello again @dmoore!

    The original approach you used now should work on Ext.NET. The fix is on our github repository and should become publicly available as soon as version 4.4.0 is released!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 8
    Last Post: Aug 11, 2015, 1:52 PM
  2. Replies: 0
    Last Post: Mar 13, 2014, 4:34 AM
  3. [CLOSED] Window with URL to PDF stuck on "Loading"
    By sfedorov in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 03, 2013, 3:30 PM
  4. Replies: 2
    Last Post: Jan 09, 2012, 10:51 PM
  5. Replies: 2
    Last Post: Jun 26, 2011, 1:59 AM

Posting Permissions