What's New?

[OPEN] [#943] [3.2.1] GridPanel mass update

  1. #1
    Nov 17, 2015, 10:51 AM

    [OPEN] [#943] [3.2.1] GridPanel mass update

    Hi,

    We are using a GridPanel using batch update and checkbox selection method. One of the columns contains a date. We have added a pop-up window with a date field and an 'update' button.

    When the 'update' button is clicked, the date column contents of the selected rows of the GridPanel should be updated with the date from the pop-up window date field and the rows flagged as dirty.

    How do we do this?

    Thanks in advance
    Last edited by Daniil; Nov 26, 2015 at 10:57 AM. Reason: [OPEN] [#943] [3.2.1]
  2. #2
    Nov 17, 2015, 5:14 PM
    Hi @PocketPrograms,

    Here is an example.

    Example
    <%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();

            var data = new List<object>();
            var today = DateTime.Today;

            for (int i = 0; i < 500; i++)
            {
                data.Add(new
                {
                    text = "Text " + i,
                    date = today
                });
            }

            store.DataSource = data;
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>

    <script>
        var count = 0;

        var update = function () {
            var grid = App.GridPanel1,
                selection = grid.getSelection(),
                lenght = selection.length,
                newDate = Ext.Date.add(new Date(), Ext.Date.DAY, count++),
                i, 
                record;

            for (i = 0; i < lenght; i++) {
                record = selection[i];
                record.data.date = newDate; // Updating of data without updating UI
            }

            grid.getView().refresh(); // Updating of UI
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Button runat="server" Text="Update" Handler="update" />

        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="text" />
                                <ext:ModelField Name="date" Type="Date" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Text" DataIndex="text" />
                    <ext:DateColumn runat="server" Text="Date" DataIndex="date" Format="yyyy-MM-dd" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" Mode="Multi" />
            </SelectionModel>
        </ext:GridPanel>
    </form>
</body>
</html>
  3. #3
    Nov 22, 2015, 2:47 AM

    Doesn't set record to dirty

    Hi Daniil,

    thanks for the suggestion. We have tested this and it updates the selected rows of the GridPanel correctly. However, it doesn't set the record state to be dirty.

    We have tried:
            var update = function () {
            var grid = App.GridPanel1,
                selection = grid.getSelection(),
                length = selection.length,
                i,
                record,
                storeIndex,
                storeRecord;

            for (i = 0; i < length; i++) {
                record = selection[i];
                record.set("BlockingReason", "Blocking reason text");
            }

            grid.getView().refresh(); // Updating of UI
        };
    Which does set the 'value updated' indicator in the cell and displays the "Reject changes" button on the row, however it also appears to duplicate the updated rows (and sometimes causes 'null reference' error on record.set).

    We are using an override to support multiple page record selection.

    What is the correct method to address the store record of a row selected in the GridPanel?

    Thanks in advance
    Ian
  4. #4
    Nov 23, 2015, 9:44 AM
    However, it doesn't set the record state to be dirty.
    Yes, in this case the record.set() approach is a way to go.

    however it also appears to duplicate the updated rows (and sometimes causes 'null reference' error on record.set).
    I don't quite have any ideas what is going on. Please provide a test case.

    We are using an override to support multiple page record selection.
    Please clarify what override? I guess it might be related to the errors.

    What is the correct method to address the store record of a row selected in the GridPanel?
    grid.getSelection() returns an array of Store's records which are selected in a GridPanel.
  5. #5
    Nov 26, 2015, 1:54 AM

    Update causes new rows to be added in GridPanel with filter

    @Daniil,

    I have created the following sample demonstrating how new rows are incorrectly added when updating the GridPanel:

    <%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            var data = new List<object>();
            var today = DateTime.Today;

            for (int i = 0; i < 500; i++)
            {
                data.Add(new
                {
                    text = "Text " + i,
                    date = today
                });
            }
            store.DataSource = data;
        }
    }
    protected Field OnCreateFilterableField(object sender, ColumnBase column, Field defaultField)
    {
        if (column.DataIndex == "Id")
        {
            ((TextField)defaultField).Icon = Icon.Magnifier;
        }

        return defaultField;
    }    
</script>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>

    <script>
        var count = 6;
        var update = function () {
            var grid = App.GridPanel1,
                selection = grid.getSelection(),
                lenght = selection.length,
                newDate = Ext.Date.add(new Date(), Ext.Date.DAY, count++),
                i, 
                record;

            for (i = 0; i < lenght; i++) {
                record = selection[i];
                record.set("date", newDate);
            }
            grid.getView().refresh(); // Updating of UI
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Button runat="server" Text="Update" Handler="update" />
        <ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="350">
            <Store>
                <ext:Store runat="server" PageSize="10">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="text" />
                                <ext:ModelField Name="date" Type="Date" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Text" DataIndex="text" />
                    <ext:DateColumn runat="server" Text="Date" DataIndex="date" Format="yyyy-MM-dd" />
                   <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>
            <SelectionModel>
                <ext:CheckBoxSelectionModel runat="server" Mode="Multi" />
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolbar runat="server" />
            </BottomBar>
                    <Plugins>
                        <ext:FilterHeader runat="server" OnCreateFilterableField="OnCreateFilterableField" />
                    </Plugins>
        </ext:GridPanel>
    </form>
</body>
</html>
    You can repeat the error as follows:
    1. Load the data
    2. Enter the text filter as *3*. Note 176 rows displayed
    3. Select rows: Text 30, Text 33 & Text 63
    4. Click update
    5. Text 30 now appears under text 63 and number of rows has increased to 178.


    Can you check this and let me know if I have an error in my coding.

    Thanks
    Ian Bradley
  6. #6
    Nov 26, 2015, 10:55 AM
    Thank you for the test case.

    I am not sure it is a bug or record.set() is not supposed to be called on hidden records, but logged it in GitHub anyways to review in the future, at least.
    https://github.com/extnet/Ext.NET/issues/943

    As a solution I can suggest this:
    var update = function () {
    var grid = App.GridPanel1,
        selection = grid.getSelection(),
        lenght = selection.length,
        newDate = Ext.Date.add(new Date(), Ext.Date.DAY, count++),
        currentPage = grid.getStore().getRange(),
        i,
        record;

    for (i = 0; i < lenght; i++) {
        record = selection[i];

        if (currentPage.indexOf(record) > -1) {
            record.set("date", newDate);
        } else {
            record.set("date", newDate, { silent: true });
        }
    }
};
  7. #7
    Dec 12, 2015, 11:16 PM

    Thanks

    Thanks that worked!

Similar Threads

  1. [CLOSED] GridPanel: When I update a value in the store object I wish update the gridPanel
    By supera in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Aug 09, 2013, 2:25 PM
  2. [CLOSED] How I update one row of gridPanel only? gridPanel datasource is a Json webservice.
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 11, 2012, 11:10 AM
  3. How to update GridPanel with access db
    By Fabrizio in forum 1.x Help
    Replies: 3
    Last Post: Mar 31, 2012, 4:45 AM
  4. [CLOSED] Gridpanel update
    By CSG in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 11, 2009, 5:51 AM
  5. how to update xml datasource in GridPanel?
    By bruce in forum 1.x Help
    Replies: 2
    Last Post: Oct 30, 2008, 1:08 PM

Tags for this Thread

Posting Permissions