Flexgrid: delete row using a button on the row deletes multiple rows

Flexgrid: delete row using a button on the row deletes multiple rows

Posted by: joe on 19 May 2018, 12:42 am EST

• 

  joe

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 May 2018, 12:42 am EST

  grid.itemFormatter = function (panel, r, c, cell) {
      if (panel.cellType == wijmo.grid.CellType.Cell && panel.columns[c].header == "Action") {
          cell.innerHTML = "<div align='center'><button id='editRow' type='button' class='button button-grid-edit' >Edit</button> <button id='deleteRow' type='button' class='button button-grid-delete' >X</button></div>";
          $(cell).on('click', '#deleteRow', function () { deleteRow(grid.selectedItems[0]) });
          $(cell).on('click', '#editRow', editRow);
      }
  }
  
  var deleteRow = function (item) {
      console.log('***** deleteRow() ******** count = ' + count);
      count++;
      $scope.data.remove(item);
  }
  

  Using the above functions (stolen from a fiddle somewhere) I have embedded Edit and Delete buttons on each row of my grid. For experimentation, I’ve constrained the delete to only one item (deleteRow(grid.selectedItems[0])). The behavior I’m seeing is that on the first click of a delete button 2 rows are deleted. On the second click of a delete button (will be a different row because the first was deleted) 4 rows are deleted. And the number of times the deleteRow() function is called increases by 2 for each time a delete button is pushed. Help? Thanks!

• 

  joe

  • Post Options:
  • Link
    Copy

  Posted 20 May 2018, 12:11 am EST

  An update to this issue…

  I’ve discovered that two click event handlers FOR EACH BUTTON are being created each time the grid is refreshed/drawn. So, when the grid is first created, two click event handlers are created. Then, after I try to delete a row/item, two items are deleted and two more event handlers are created for a total of four. This continues until the entire contents of the grid are deleted by pressing one delete button. After some research there is a suggestion this is related to compatibility issues between bootstrap and jquery. I’ve tried to apply the workaround but get the .noConflict() is undefined error. So, still stuck on this problem. Now my approach is to reference the cell another way instead of using $(cell) but no luck so far.

• 

  joe

  • Post Options:
  • Link
    Copy

  Posted 20 May 2018, 7:41 am EST

  Think I have a workaround that eliminates jquery and means only a single eventhandler is created for each control.

      userGrid.itemFormatter = function (panel, r, c, cell) {
          if (panel.cellType == wijmo.grid.CellType.Cell && panel.columns[c].header == "Edit") {
              cell.innerHTML = "<div align='center'><button id='editRow" + r + "' type='button' class='button button-grid-edit' >Edit</button>";
              cell.firstChild.addEventListener('click', function () { editRow(userGrid.selectedRows[0]._data); });
          }
  
          if (panel.cellType == wijmo.grid.CellType.Cell && panel.columns[c].header == "Delete") {
              cell.innerHTML = "<button id='deleteRow" + r + "' type='button' class='button button-grid-delete' >X</button></div>";
              cell.firstChild.addEventListener('click', function () { deleteRow(r); });
          }
      };
  

  This method means I won’t have the two buttons in the same column but I can live with that!

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 May 2018, 7:54 pm EST

  Hi Joe,
  
  The approach used by you is correct. But, please refer to the following demo fiddle to implement your requirement.

  http://jsfiddle.net/Wijmo5/hkxco8kb/?utm_source=website&utm_medium=embed&utm_campaign=hkxco8kb
  
  Hope it helps!

  ~Manish