addRow issues

[angelahlp]

Hi - I'm hoping you can help me with some issues I'm having. I am using the the autosave demo as a foundation. My "change" functionality is below. For some reason I am having trouble adding a row - editing and deleting work. It seems to be adding the row after all required fields are entered, but it does not clear the small red triangle in the corners after the item is successfully saved in the database. I am also unable to add another row because of a "duplicate primary key" error. I was unable to add a row to the top of the grid because it would always enter data in the fields instead of blank fields even when I fully defined every field to be blank in the addRow function.

Please let me know how I need to update this to make the add work.

Change function:
-------------------------------------------------------------------
            change: function (evt, ui) {

                //debugger;
                if (ui.source == 'commit' || ui.source == 'rollback') {
                    return;
                }
                console.log(ui);
            
               var $grid = $(this),
                       grid = $grid.pqGrid('getInstance').grid;
                       rowList = ui.rowList;
               var obj = rowList[0],
                        rowIndx = obj.rowIndx,
                        newRow = obj.newRow,
                        type = obj.type,
                        rowData = obj.rowData,
                  url,
                       recIndx = grid.option('dataModel').recIndx;
                  
                  if (grid.saveEditCell() == false) {
                      return false;
                  }

               var isValid = grid.isValid({ rowIndx: rowIndx }).valid;
               if (!isValid) {
                  return false;
               }
         
               if (grid.isDirty()) {
               
                   if (rowData[recIndx] == null || rowData[recIndx] == '' || rowData[recIndx] == 0) {
                       //add record.
                      $.ajax( {
                     url: "/cfc/Testing.cfc?method=insertMatrix",
                          data: "rowData=" + escape(JSON.stringify(rowData)),
                          beforeSend: function (jqXHR, settings) {
                              $(".saving", $grid).show();
                          },
                          success: function (response) { // returns response as id of new record created
                               rowData[recIndx] = response;
                              grid.commit({ type: 'add', rows: [rowData] });
                              grid.refreshRow({ rowIndx: rowIndx });
                          },
                     complete: function () {
                              $(".saving", $grid).hide();
                     },
                     error: function(jqXHR, exception){
                        alert('closing - change - update row - ' + jqXHR.responseText + ":" + exception);
                     }
                      });
               } else if (type == 'delete') {
                   var ans = window.confirm("Are you sure to delete '" + rowData['itemid'] +"'?");
 
                    if (ans) {
                     var moveid = $grid.pqGrid("getRecId", { rowIndx: rowIndx });
                      grid = $grid.pqGrid('getInstance').grid;
            
                     if (itemid != null && itemid != 0) {
                     $.ajax( {
                        url: "/cfc/Testing.cfc?method=deleteMatrix",
                        data: "rowData=" + escape(JSON.stringify(rowData)),
                        beforeSend: function (jqXHR, settings) {
                           $(".saving", $grid).show();
                        },
                        success: function (response) {
                           grid.commit({ type: 'delete', rows: [rowData] });
                           grid.refreshRow({ rowIndx: rowIndx });
                        },
                        complete: function () {
                           $(".saving", $grid).hide();
                        },
                        error: function(jqXHR, exception){
                           alert('closing - delete row - ' + jqXHR.responseText + ":" + exception);
                        }
                     });
                     }
                    }
                    else {
                        $grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
                    }
               } else {
                       type = 'update';
                      $.ajax( {
                     url: "/cfc/Testing.cfc?method=updateMatrix",
                          data: "rowData=" + escape(JSON.stringify(rowData)),
                          beforeSend: function (jqXHR, settings) {
                              $(".saving", $grid).show();
                          },
                          success: function (response) {
                              if (type == 'add') {
                                  rowData[recIndx] = response.moveid;
                        }
                              grid.commit({ type: type, rows: [rowData] });
                              grid.refreshRow({ rowIndx: rowIndx });
                          },
                     complete: function () {
                              $(".saving", $grid).hide();
                     },
                     error: function(jqXHR, exception){
                        alert('closing - change - update row - ' + jqXHR.responseText + ":" + exception);
                     }
                      });
                   }
               
               } else {
                   grid.quitEditMode();
                   grid.removeClass({ rowIndx: rowIndx, cls: 'pq-row-edit' });
                   grid.refreshRow({ rowIndx: rowIndx });
               }            
            
            
            }
----------------------------------------------------------------------------------------
--------------------------------------------------
Latest AddRow attempt
--------------------------------------------------
--------------------------------------------------------------------------------------

                    { type: 'button', icon: 'ui-icon-plus', label: 'Add Inject', listener:
                        { "click": function (evt, ui) {
                            //append empty row at the end.                           
                            var rowData = { namefield: '' }; //empty row
                            var rowIndx = $grid.pqGrid("addRow", { rowData: rowData });
                            $grid.pqGrid("setSelection", null);
                            $grid.pqGrid("setSelection", { rowIndx: rowIndx, dataIndx: 'moveid' });
                            $grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
                        }
                        }
                    },
--------------------------------------------------

TIA,
Angela Jones

[paramvir]

rowIndxPage: 0 could be passed when it's required to add a new row at top of current page.

   var rowData = {  }; //empty row
                            $grid.pqGrid("addRow", { rowData: rowData, rowIndxPage: 0 });
                            $grid.pqGrid("setSelection", null);
                            $grid.pqGrid("setSelection", { rowIndxPage: 0, dataIndx: 'ProductName' });
                            $grid.pqGrid("editFirstCellInRow", { rowIndxPage: 0 });


You mention the red triangles don't go away, while committing added rows. Red triangles in Left Top corner mean dirty cells and there should not be any such triangles for new added rows to begin with. Red triangles in Top right corner signify failed validations. Which one do you see?

I suggest to return the whole rowList from the remote server as in the demo

success: function (changes) {
                            //commit the changes.               
                            grid.commit({ type: 'add', rows: changes.addList });
                        },


or verify the value of rowData in success callback or/and omit the rows parameter while call to commit.

success: function (response) {
  //check the value of rowData here.
  rowData[ recIndx ] = response;
  grid.commit({ type: 'add' }); //omit rows.
}

[angelahlp]

Thank you for your response. I am now able to add a row at the top that is blank (but it does enter the value in the first column from the one below it for some reason) using the code you provided.

The red triangles are still not disappearing after the row is saved and I cannot add another row with the "primary key violation" error after one record has been added. I used the code you provided:

success: function (response) {
  //check the value of rowData here.
  rowData[ recIndx ] = response;
  grid.commit({ type: 'add' }); //omit rows.
}

The response is the new record id. I've attached an image of the record after the add is complete and successful in the database. Firebug shows that the id is being passed back after the row is added.

I am also able to navigate away from the new row even though there are required fields that still need to be entered. I would like to force the user to finish the new record before proceeding with any other changes. How can I make that happen?

[angelahlp]

Sorry - forgot the attachment ...

[paramvir]

You have been experiencing issues which we are unable to reproduce.

Could you please send a small but complete working test case as an attachment or a jsfiddle so that we can check your code entirely.
The response from remote server ( id of the new record ) can be replaced by a JSON file. please also state the version of pqGrid.

[angelahlp]

I've attached a file with my current code. I am using version 3.0.

[paramvir]

Appreciate if you could

1) Also attach JSON data returned by Testing.cfc?method=updateMatrix

2) and server response to ajax request when adding a new row.

[angelahlp]

The updateMatrix function just returns a string for success or not. I realized that I was commiting the row with the string instead of rowdata - but I'm not having an issue with that. It is saving fine on update. I did change the update code to the following, but this did not fix the issue with inserting a row. The insert function returns the new row id as a numeric value.


                       type = 'update';
                      $.ajax( {
            url: "/cfc/Testing.cfc?method=updateInjectMatrix",
                          data: "rowData=" + escape(JSON.stringify(rowData)),
                          beforeSend: function (jqXHR, settings) {
                              $(".saving", $grid).show();
                          },
                          success: function (response) {
                              grid.commit({ type: type });
                              grid.refreshRow({ rowIndx: rowIndx });
                          },
                     complete: function () {
                              $(".saving", $grid).hide();
                     },
                     error: function(jqXHR, exception){
                        alert('closing - change - update row - ' + jqXHR.responseText + ":" + exception);
                     }
                      });

[paramvir]

Please send complete code along with latest changes made by you and sample JSON data and response as requested earlier.

[angelahlp]

1. I've attached the newest full version of the code with the update I've mentioned in my previous post.

2. The updateMatrix function just returns a string for success or not - it DOES NOT return JSON data and I believe that the code attached runs independent of the fact that a string is returned or not. This part of the code is currently WORKING CORRECTLY. Example return string from updateMatrix

is json - success
OR
error occurred

3. The insert function returns the new row id as a numeric value, i.e. - insertMatrix ajax call returns a NUMERIC value that is the ID of the row inserted into the database. An example of a numeric value returned from the insertMatrix function call follows - I use parseInt() to ensure that it is being interpreted as an Integer and not a Float/Real number:

20639.0
 
3. In case you are referring to a sample JSON string sent back from the getMatrix ajax call, which loads the data into the grid, I've provided that below:

[{"moveid":20568,"usingwhat":"PA","storylineid":7,"playingresourcename":"Chaplain","simulatedresourceid":712,"namefield":"Testing","injectnumber":234234,"movedate":"5/19/15","movetime":"16:18","usingwhatid":7,"commandid":16,"movestatus":"Paused","simulatedresourcename":"Ambulance","movestatusid":6,"playingresourceid":783,"expectedplayeraction":"action","storyline":"Story","simulatorgroupid":25,"command":"Ex","controllerid":0,"messageimplementor":""},{"moveid":4757,"usingwhat":"","storylineid":"","playingresourcename":"Player)","simulatedresourceid":712,"namefield":"alert","injectnumber":5,"movedate":"5/21/15","movetime":"08:00","usingwhatid":"","commandid":14,"movestatus":"Pend","simulatedresourcename":"Sim Resource","movestatusid":1,"playingresourceid":234,"expectedplayeraction":"","storyline":"","simulatorgroupid":25,"command":"GT","controllerid":0,"messageimplementor":""}]

I hope that is clear and is what you need. The deleteMatrix function returns a string value the same way as the updateMatrix fuction - and is not used except for debugging purposes.

Thanks

                       

[paramvir]

Thanks for sending the code.

As a fix to the issue experienced by you, please mark primary key field "moveid" as editable: false

{ dataIndx: 'moveid', hidden: true, editable: false }

Please let know whether it fixes your issue.

[angelahlp]

Thank you, that did fix the issue I was having with the added item being saved. I do still have a couple of the issues remaining.

1. I would like for the user to be forced to enter all required data without moving away from the row. Currently the red triangle appears in the corner but the user is allowed to move to another row and edit it. The same with updating rows that do not have the required fields when the grid is populated. It allows a field to be updated, but does not save because the required fields have not all been entered - but it allows the user to move to other rows and edit them. I want the user to have to enter all the fields before moving to other rows. This is for adding and editing.

2. When a new row is created, the date field is automatically pre-filled with the value from the row below the new row. When The "New Record" button is clicked, a row is created at the top of the grid. The console.log shows in Firebug that an add is performed, immediately followed by an edit - both of these actions happen when the "New Record" button is clicked - before anything is done in the row. The console.log shows that the add does indeed contain a date in the field for the new row - even though the default for the new row is empty. I have also tried specifying that the date field to "" - but that does not work either.

I've included a screen shot so you can see the result of the add row button. The code for adding the row is below. As you can see, the only value being set is the movestatus and I've attempted to make the movedate empty - but it still picks up the date from the record below it - as seen in the screenshot.

                    { type: 'button', icon: 'ui-icon-plus', label: 'Add Row', listener:
                        { "click": function (evt, ui) {                   
             var rowData = { movestatusid: 1, movestatus: "Pending", movedate: "" };
                            $grid.pqGrid("addRow", { rowData: rowData, rowIndxPage: 0 });
                            $grid.pqGrid("editFirstCellInRow", { rowIndxPage: 0 });
                        }
                        }
                    },

Thanks,
Angela

[paramvir]

1. I would like for the user to be forced to enter all required data without moving away from the row. Currently the red triangle appears in the corner but the user is allowed to move to another row and edit it. The same with updating rows that do not have the required fields when the grid is populated. It allows a field to be updated, but does not save because the required fields have not all been entered - but it allows the user to move to other rows and edit them. I want the user to have to enter all the fields before moving to other rows. This is for adding and editing.

Please follow the row editing demo. http://paramquery.com/pro/demos/editing It injects a class while editing a row and uses editable callback to prevent editing of other rows.

Code: [Select]

editable: function (ui) {
                var $grid = $(this);
                var rowIndx = ui.rowIndx;
                if ($grid.pqGrid("hasClass", { rowIndx: rowIndx, cls: 'pq-row-edit' }) == true) {
                    return true;
                }
                else {
                    return false;
                }
            }


2. When a new row is created, the date field is automatically pre-filled with the value from the row below the new row. When The "New Record" button is clicked, a row is created at the top of the grid. The console.log shows in Firebug that an add is performed, immediately followed by an edit - both of these actions happen when the "New Record" button is clicked - before anything is done in the row. The console.log shows that the add does indeed contain a date in the field for the new row - even though the default for the new row is empty. I have also tried specifying that the date field to "" - but that does not work either.

Please add allowInvalid: true in the call to isValid method in change event.

var isValid = grid.isValid({ rowIndx: rowIndx, allowInvalid: true }).valid;