New added row disappear if resize the screen in jqxgrid

[ilywanziParticipant]

Hi, team,
I have created a button to implement ‘addrow’ in jqxgrid, but the problem is, after a new row added, if I resize the window, or collapse the card(the grid is inside an angular material card) then expand, the newly added row will disappear.
This is the add row function:

addRow(index: number, row: any) {
    const currentGrid: jqxGridComponent = this.getCurrentGrid(); // the grid is in a list of tabs, so need to use this function to get the current grid;
    currentGrid.addrow(null, {});
  }

And in the source object, I also add the addrow callback:

const src: any = {
      datatype: 'json',
      localdata: this.localdata.gridRows,
      addrow: function(rowid, rowdata, position, commit) {
        const currentSheet = this.eprService.eprData.sheets[
          this.currentSelectedSheetIndex
        ];
        const currentGrid: jqxGridComponent = this.getCurrentGrid();
        const lastIndex = currentSheet.rows.length - 1;
        const lastRow = currentSheet.rows[lastIndex];
        const lastSequence = lastRow ? lastRow.sequence : 1;
        const requestBody = {
          id: -1,
          status: 'In progress',
          sequence: lastSequence + 1
        };
        this.eprService
          .addRow(this.project.projectID, currentSheet.id, [requestBody])
          .subscribe(rows => {
            currentSheet.rows.push(...rows);
            this.localdata = this.prepareData(currentSheet);
            commit(true);
            currentGrid.setcellvalue(
              currentSheet.rows.length - 1,
              'Index',
              currentSheet.rows.length
            );
          });
      }
    };

Right now the only way I can do to avoid this is using the grid init function to initialize the grid again after get the new row data response from server.
Can I understand why the newly added row will disappear? Thanks.

[ilywanziParticipant]

I found this issue is not only happen in ‘addrow’, but also in ‘deleterow’.
In deleterow function, I have the same structure as addrow function as I mentioned above in the first post.

[MartinParticipant]

Hello ilywanzi,

Calling the addrow method adds a row to the UI but it does not update the source of the grid, so when the grid refreshes the changes are not preserved.
You also need to update the source and to call the updatebounddata method of the grid.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[ilywanziParticipant]

Hi, Martin, about ‘update the source’, do you mean update the ‘localdata’ property inside source?

[ilywanziParticipant]

Hi, Martin, I have one more question about reordering columns.
After I drag a column to the other positions, some columns’ order got changed. But after I collapse the card and open again, the columns’ order back to the old order. Should I update the grid’s columns sequence when the columnreorder event is triggered?

[MartinParticipant]

Hello ilywanzi,

Yes, I mean the source object’s localdata.
It sounds like the grid is re-rendered when you collapse and reopen the angular material card. So you will need the update the columns sequence also if you need the changes to be preserved.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts