hkalbertl / jquery.appendGrid

The dynamic table input JavaScript plugin
https://appendgrid.azurewebsites.net
MIT License
148 stars 76 forks source link

afterRowInserted Event does not fire when subPanelBuilder is used #101

Closed ghost closed 7 years ago

ghost commented 7 years ago

Hi Albert, The afterRowInserted event does not fire when a subPanelBuilder is used or when data is pre-loaded to the appendgrid. Kindly look into the following code for issue reference.

$(function() {
  var thisYear = new Date().getFullYear();
  $('#tblAppendGrid').appendGrid({
    columns: [{
      name: 'col1',
      display: 'Column 1'
    }, {
      name: 'col2',
      display: 'Column 2'
    }],
    initRows: 2,
    useSubPanel: true,
    subPanelBuilder: function(cell, uniqueIndex) {
      // Create a table object and add to sub panel
      var subgrid = $('<table></table>').attr('id', 'tblSubGrid_' + uniqueIndex).appendTo(cell);
      // Initial the sub grid
      subgrid.appendGrid({
        initRows: 1,
        hideRowNumColumn: true,
        columns: [{
          name: 'sub1',
          display: 'Sub 1',
          value: 0,
          onChange: function(evt, rowIndex) {
            doCalculation(evt.target);
          }
        }, {
          name: 'sub2',
          display: 'Sub 2',
          value: 0,
          onChange: function(evt, rowIndex) {
            doCalculation(evt.target);
          }
        }, {
          name: 'sub3',
          display: 'Sub 1 + Sub 2'
        }],
        hideButtons: {
          insert: true,
          remove: true,
          moveUp: true,
          moveDown: true
        }
      });
    },
    afterRowInserted: function (caller, parentRowIndex, addedRowIndex) {
                 alert("this event does not fire");
                                         },
                                          afterRowAppended: function (caller, parentRowIndex, addedRowIndex) {
                 alert("works fine");
                                         },
  });
});

function doCalculation(caller) {
  // Find the information of subgrid based on 
  var pattern = caller.id.split('_');
  var subUniqueIndex = pattern[pattern.length - 1];
  // Get the subgrid, change it if you specified a different ID
  var subGridPrefix = pattern[0];
  var mainUniqueIndex = pattern[1];
  var $subGrid = $('#' + subGridPrefix + '_' + mainUniqueIndex);
  // Get sub RowIndex based on unique index
  var subRowIndex = $subGrid.appendGrid('getRowIndex', subUniqueIndex);
  // Get the sub1 and sub2 values
  var sub1 = $subGrid.appendGrid('getCtrlValue', 'sub1', subRowIndex);
  var sub2 = $subGrid.appendGrid('getCtrlValue', 'sub2', subRowIndex);
  // Calculate result
  var result = 'Error';
  if ($.isNumeric(sub1) && $.isNumeric(sub2)) {
    result = parseFloat(sub1) + parseFloat(sub2);
  }
  // Set the result
  $subGrid.appendGrid('setCtrlValue', 'sub3', subRowIndex, result);
}
hkalbertl commented 7 years ago

Hi siddhant749,

I tested your code in latest version of appendGrid which work as expected. Both of the alerts called by afterRowInserted and afterRowAppended can be displayed. May I ask which web browser (and version) are you using?