We have an igGrid on a form. The fields for adding a new record are placed below it with an "Add" button. The user enters values for a new record, clicks the "Add" button that executes this method:
function AddRecord (e, ui) { var rowObj = { "SubRecordId": 0, "MainRecordId": recordId, "Product": $('#product').val(), "Notes": $('#notes').val(), "Cost": $('#cost').val().replace("$", "") }; $('#grid').igGridUpdating('addRow', rowObj, true); }
Instead of editing the row "in place" in the grid cells, we want the user to click a row, fill the fields with the "editable" field values (Product, Notes, Cost) from the selected row, and have the "Add" button become an "Update" button.
We're able to add a record to the grid's igDataSource using the above method, but how would we update a selected row?
Hello icssupport,
Thank you for posting in the community.
You can update the grid's UI by commiting the new data after adding a row, i.e:
$("#grid").igGrid("commit");
Yes, I understand that the new data needs to be committed to the datasource.
What I'm asking is when EDITING the row, how can we edit the values in the same form fields that we used when ADDING a record to the grid?
Example:
[Product Cost Notes ] <- Grid [123 $100 This is a note ] [124 $200 This is also a note ] [125 $300 This is another note ] Product: ______ <- Form field Cost: $______ <- Form field Notes: ____________________ <- Form field [Add/Update] <-Button
When selecting a record in the grid, fill the form fields with the cell values in the selected row, then update the selected row when the Update button is clicked. In other words, we DO NOT want to edit the record directly in the grid cells.
Is that possible? If so, how would we do that (using the jQuery controls)?