Author Topic: Add/Update Events not being detected by Grid  (Read 389 times)

pbassey

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 36
    • View Profile
Add/Update Events not being detected by Grid
« on: November 23, 2022, 08:38:03 pm »
I am using a version of the "editing_instant" demo that loads xml data and attempts to call a ColdFusion .cfc in the SaveChanges function.  When I debug this function and attempt to delete a row, the event is detected and sent to the SaveChanges function.  However, when I edit an individual cell or add a new row, the Add/Update events are not triggered by the Grid.  Below is the code I am using.  The debugger call is only being triggered when a row is deleted.  The debugger does not get activated when a cell change is made or a new row is added.

$(function () {
   // ********************************************
   // ************** SAP Grid Code ***************           
   // ********************************************      
     var interval;
     function saveChanges() {
         /**
         1. if there is no active ajax request.
         2. there is no ongoing editing in the grid.
         3. grid is dirty.
         4. all changes are valid.
         */

         if (!$.active && !grid.getEditCell().$cell && grid.isDirty() && grid.isValidChange({ allowInvalid: true }).valid) {

            var gridChanges = grid.getChanges({ format: 'byVal' });
       debugger

      
             $.ajax({
                 //url: '/pro/products/batch',             // for ASP.NET, java
                 //url: '/products.php?pq_batch=1',          // for PHP
               
       url: 'exp/cfpagelets/_sts/gridEdits.cfc',      // for ColdFusion               
         data: {
                        method: "realtimeEdit",
                        list: JSON.stringify( gridChanges )
                       },
      
                 dataType: "json",
                 type: "POST",
                 async: true,
                 beforeSend: function (jqXHR, settings) {
                     grid.option("strLoading", "Saving..");
                     grid.showLoading();
                 },
                 success: function (changes) {
                     //commit the changes.     
     
                     grid.commit({ type: 'add', rows: changes.addList });
                     grid.commit({ type: 'update', rows: changes.updateList });
                     grid.commit({ type: 'delete', rows: changes.deleteList });
                 },
                 complete: function () {
                     grid.hideLoading();
                     grid.option("strLoading", $.paramquery.pqGrid.defaults.strLoading);
                 }
             });
         }
     }

     //save changes from a timer.
     interval = setInterval(saveChanges, 1000);   

     var obj = {
         hwrap: false,
         resizable: true,
         rowBorders: false,
         //autoRow: false,
         rowHt: 32,
         trackModel: { on: true }, //to turn on the track changes.           
         toolbar: {
             items: [{
                 type: 'button',
                 icon: 'ui-icon-plus',
                 label: 'New Product',
                 listener: function () {
                     //append empty row at the end.                           
                     var rowData = { glname: 'new account', glcode: '6606.' }; //empty row
                     var rowIndx = grid.addRow({ rowData: rowData });
                     grid.goToPage({ rowIndx: rowIndx });
                     grid.editFirstCellInRow({ rowIndx: rowIndx });
                 }
             },
             { type: 'separator' },
             {
                 type: 'button',
                 icon: 'ui-icon-arrowreturn-1-s',
                 label: 'Undo',                   
                 options: { disabled: true },
                 listener: function () {
                     grid.history({ method: 'undo' });
                 }
             },
             {
                 type: 'button',
                 icon: 'ui-icon-arrowrefresh-1-s',
                 label: 'Redo',
                 options: { disabled: true },
                 listener: function () {
                     grid.history({ method: 'redo' });
                 }
             }]
         },
         scrollModel: { autoFit: true },           
         editor: { select: true },
         title: "<b>Auto save</b>",
         change: function (evt, ui) {
             //saveChanges can also be called from change event.
         },
         destroy: function () {
             //clear the interval upon destroy.
             clearInterval(interval);
         },
         history: function (evt, ui) {
             var $tb = this.toolbar(),
                 $undo = $tb.find("button:contains('Undo')"),
                 $redo = $tb.find("button:contains('Redo')");

             if (ui.canUndo != null) {
                 $undo.button("option", { disabled: !ui.canUndo });
             }
             if (ui.canRedo != null) {
                 $redo.button("option", "disabled", !ui.canRedo);
             }
             $undo.button("option", { label: 'Undo (' + ui.num_undo + ')' });
             $redo.button("option", { label: 'Redo (' + ui.num_redo + ')' });
         },

           
         colModel: [
   { title: "G/L Account", width: 130, dataType: "string" ,dataIndx: "glname", editable: true },
   { title: "G/L Code", width: 110, dataType: "string", dataIndx: "glcode", editable: true},

   { title: "Total", width: 100, dataType: "float", dataIndx: "amount", format: "$#,###.00",
                 validations: [
                     { type: 'nonEmpty', msg: "Required" },
                     { type: 'gt', value: 10.00, msg: "better be > 10.00", warn: true}
                 ]
             },
   {title: "% Share", width: 120, dataIndx: "pctshare", dataType: "float", format: '##.00%', editable: true},   
   {title: "VAT Payable", width: 120, dataIndx: "vatpayable", dataType: "float", format: '$##,###.00', editable: true},
   {title: "CIT Payable", width: 120, dataIndx: "citpayable", dataType: "float", format: '$##,###.00', editable: true},
   {title: "Urban Main & Const Fee", width: 120, dataIndx: "urbansurc", dataType: "float", format: '$##,###.00', editable: true},
   {title: "Educ Surch", width: 120, dataIndx: "edsurc", dataType: "float", format: '$##,###.00', editable: true},
   {title: "Loc Educ Sur Share", width: 120, dataIndx: "locsurc", dataType: "float", format: '$##,###.00', editable: true},
   {title: "Total Tax Payable", width: 120, dataIndx: "totpayable", dataType: "float", format: '$##,###.00', editable: true},

   { title: "", editable: false, minWidth: 85, sortable: false,
              render: function (ui) {
                  return "<button type='button' class='delete_btn'>Delete</button>";
              },
              postRender: function (ui) {
                  var grid = this,
                      $cell = grid.getCell(ui);
                      $cell.find(".delete_btn")
                      .button({ icons: { primary: 'ui-icon-scissors'} })
                      .bind("click", function (evt) {
                          grid.deleteRow({ rowIndx: ui.rowIndx });
                      });
              }
          }
     ],
   postRenderInterval: -1,                //synchronous post render.
   pageModel: { type: "local", rPP: 20 },      
   
   dataModel: {
      cache: true,
      location: "remote",                                   
      sortDir: "down",
      sorting: "local",                       
      dataType: "xml",
      url: "/sts/content/files/data/rawData.xml",     
      
      getData: function (dataDoc) {
          //debugger;
          var obj = { itemParent: "item", itemNames: ["glname", "glcode", "amount", "pctshare", "vatpayable", "citpayable", "urbansurc", "edsurc", "locsurc", "totpayable" ] };
          return { data: $.paramquery.xmlToJson(dataDoc, obj) };
         }
      },

         
         load: function (evt, ui) {
             var grid = this,
       data = grid.option('dataModel').data;

             grid.widget().pqTooltip(); //attach a tooltip.

             //validate the whole data.
             grid.isValid({ data: data });
         }
     };
     var grid = pq.grid("#SAP", obj);
   
});   


Below is a sample of what. the XML file looks like in case you need it.  I was not able to upload the file due to file restrictions in your upload function.
<entry>
<item id="107">
<glname>Tel/Fax</glname>
<glcode>604012</glcode>
<activity>M22AXCH042</activity>
<region>CHK</region>
<country>CH</country>
<project>0000</project>
<amount>2279.4</amount>
<pctshare>0.00294198109708</pctshare>
<vatpayable>160.898823529</vatpayable>
<citpayable>0</citpayable>
<urbansurc>11.262917647</urbansurc>
<edsurc>4.82696470587</edsurc>
<locsurc>3.21797647058</locsurc>
<totpayable>180.206682352</totpayable>
</item>
<item id="107">
<glname>Rent & Utilities</glname>
<glcode>604000</glcode>
<activity>M22AXCH042</activity>
<region>CHK</region>
<country>CH</country>
<project>0000</project>
<amount>704.3</amount>
<pctshare>0.000909027501393</pctshare>
<vatpayable>49.7152941176</vatpayable>
<citpayable>0</citpayable>
<urbansurc>3.48007058823</urbansurc>
<edsurc>1.49145882353</edsurc>
<locsurc>0.994305882352</locsurc>
<totpayable>55.6811294117</totpayable>
</item>
<item id="107">
<glname>Tel/Fax</glname>
<glcode>604012</glcode>
<activity>M22AXCH042</activity>
<region>CHK</region>
<country>CH</country>
<project>0000</project>
<amount>100</amount>
<pctshare>0.000129068223966</pctshare>
<vatpayable>7.05882352944</vatpayable>
<citpayable>0</citpayable>
<urbansurc>0.494117647061</urbansurc>
<edsurc>0.211764705883</edsurc>
<locsurc>0.141176470589</locsurc>
<totpayable>7.90588235297</totpayable>
</item>
</entry>

Finally, the following 2 screenshots show how the toolbar is not visible unless I click on the fullscreen button on the right.

Thanks for all the help on this.

Regards,
Peter B
« Last Edit: November 23, 2022, 09:56:02 pm by pbassey »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6113
    • View Profile
Re: Add/Update Events not being detected by Grid
« Reply #1 on: November 24, 2022, 05:05:12 pm »
1. Please add primary key of the records i.e., dataModel.recIndx

2. Can you please share a jsfiddle. I don't anything wrong in your code related to the toolbar.

pbassey

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 36
    • View Profile
Re: Add/Update Events not being detected by Grid
« Reply #2 on: November 26, 2022, 08:03:45 pm »
Thanks. The recIndx property was the fix - works great now.

As for the toolbar issue, I was able to resolve that by setting the showTitle attribute to False.  Didn't make sense, but after a process of removals, that was the one attribute that made the toolbar display/function correctly.

Thanks again for the help!

-P