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)?
Here's my suggestion as to how to go about it:1. Enable the Selection feature of the igGrid2. When the user selects a row in the igGrid, you will hook to the igGridSelection's rowSelectionChanging event and using the knowledge you will obtain from the input args, you will know what values to fill into the form.3. Here's a little trick I use: make the Product field in the form a read-only one. 3.1 If you're entering a new record, there will be no value for it - that way when you click the [Add/Update] button you will know that you've been dealing with a new row to be added. 3.2 If you're editing an existing row the Product field in the form will have a value which will be able to use for the startEdit and endEdit API methods. I think it's high time me and my colleagues put up a sample of such a form for you guys, but it might take a wee bit of time to bring it up.PS: Actually this sort of functionality is called a RowEditingTemplate in the context of our WebDataGrid. Hopefully we'll have such a template for the igGrid as well in the next volume release this year. If so, you will be able to use this template as a form and thus receive an out-of-the-box solution.
Hi,
Attached you can find sample which implements row template functionality for igGrid.
What it does is to read grid columns property and generate row template automatically for all visible columns. Also different type igEditor is used in the row template based on the column type.
In the sample you can find comments explaining the functionality.
Keep in mind that this approach expects headerText, key and dataType properties to exist for each column.
If you have any questions on the sample fell free to ask.
Disclaimer: This code is for illustration purposes and is not considered production ready. It is not 100% tested and is not covering grid features integration. Feel free to use it at your own risk.
Best regards,
Martin Pavlov
Infragistics, Inc.
That's exactly what we were trying, except we used rowSelectionChanged.
Once we have the ui.row, however, how do we get the row's cell values? Something like ui.row.cells["ProductId"]? Or should we manipulate grid's igDataSource directly using the ui.row.index to retrieve the values? Something like productsDatasource[ui.row.index]["ProductId"].val()?
Also, when we click the [Update] button, how should we update the corresponding record in the grid with the new values? Should we use igDataSource.updateRow(...) or $("#grid").igGridUpdating("updateRow"...)?
A sample for this on the site would be most welcome. Thanks!