iGGrid Updating remove Done button and programmatically fire done click events

I am using igGrid where my columns are creating dynamically on product selection(column data from database). Even the cell will have dropdown or text box that info is also dynamic as per user selection.

I want to have a grid which is editable (on edit mode must have textbox or combo box as per the data) and user doesnot have to click on Done button on each edit.

I tried achieving this by hiding Done container but when I programmatically add a new row then I need the new row to be editable without done but…and getting error : already a row is in edit mode

 

Hello,

Thank you for using Infragistics forums!

Have you tried using the showDoneCancelButtons option set to false instead of hiding the button container to achieve your requirements? It changes how certain workflows behave and should provide a better end-user experience for this scenario.

As for the error – without a code snippet of how you are implementing this I can only speculate but it's likely caused by calling startEdit while editing is still in progress. If you are trying to execute startEdit in an editRowEnding handler for example, you should try doing so in an editRowEnded one to ensure the previous edit mode has ended.

I hope this helps! Please, let me know if you have any other questions or concerns!

Best regards,

Stamen Stoychev

HI,

The issue is

if my row is in edit mode and if showDoneCancelButtons = false then

if we add a row using 'addRow' then the edited values are not getting retained in the row which in edit mode before the row was added.

I need the updated values to be retained once I add a new row or perform any other operation in Grid

Hello,

When using addRow the edit mode in progress should not end automatically in normal circumstances (do you have Paging enabled?) and showDoneCancelButtons doesn't directly affect whether changes are retained or not. If you are entering edit mode immediately for the added row, please try to end editing (with endEdit) for the previous one using 'true' as the first parameter telling Updating to save any changes done.

It will also be helpful if you could share some of the code you are using for these operations so I can better understand the application's flow and how Updating's API is called.

Best regards,

Stamen Stoychev

Below is my code:

var grid = $scope.GetGridName();
if ($(grid).igGridUpdating("isEditing") == true)
$(grid).igGridUpdating("endEdit", true);                //Query 1: how can i fire RowEditEnded and all the the events getting fired at Done Button.

                                                                 //I am performing save to database operation on RowEditEnded but without Done how can I make it work.

Also below is my delete code

$scope.DeleteRow = function () {
var grid = $scope.GetGridName();
if ($(grid).igGridUpdating("isEditing") == true)
$(grid).igGridUpdating("endEdit", true);
if ($scope.Errors != 0)
return alert('Invalid Line Item. Please Validate')
var row = $(grid).igGridSelection("selectedRow");
var data = $(grid).data('igGrid').dataSource.dataView()[row.index];               //Query 2 : Even though (endEdit, true) is used dataView is not updated
$(grid).igGridUpdating("deleteRow", row.id);                                            //Query 3: row.id is getting passed correctly but getting error in updating.js at _editingForRowId 
$(grid).igGrid("saveChanges");
$(grid).igGridSelection("selectRow", $(grid).igGrid('rows').length – 1);
}

Also can I have Row and cell selection together 

Row Selectors are also not working with Updating feature

Hello,

Normally using public methods does not cause events to get raised but there are certain methods, usually those that are used with less information about the grid's state than the method produces, which may be configured to raise events. endEdit is one such method and to make it raise events you just need to specify its second parameter like this:

$(grid).igGridUpdating("endEdit", true, true);

As for your other questions, the data view will change when the edit is committed. By default all changes are stored in a transaction array (obtainable using pendingTransactions) and a manual commit call is required to propagate them to the underlying data source. Alternatively, you can enable autoCommit allowing the grid to commit any changes as they come. Finally, row and cell selection cannot be mixed together. Enabling Row Selectors requires that Selection is set to mode: 'row'. Do you receive any errors with Row Selectors and Updating if Selection is set to mode 'row'?

Best regards,

Stamen Stoychev

Hi Stamen,

Thanks for all your help.

I already tried :  $(grid).igGridUpdating("endEdit", true, true);

but getting error that $rootscope.$apply() is already in progress.

AutoCommit is also true

Also I am facing one more issue…even when my Done button is there .. When a row clicked for edit all the dropdowns are getting set to the first index value.

e.g. if in my Row I have a drop down with options "Red","blue","Black".

I selected black and Saved it. Again I double click on the row to edit The value in drop down is getting set to "Red"- The first value.

Is there any settings in editor options which I am missing??

Hello,

Could you please attach the sample you are working on or an isolated one reproducing the listed issues? I created a case on your behalf with #CAS-179270-N7X4J7 that you can use to send it privately. To view your cases, go to our Website > Account > Support Activity.

Thank you in advance!

Best regards,

Stamen Stoychev

I will attach some code with my next reply.

Few of my requirement are listed below so that I can give you a better understanding of what I want:

a) A grid which is editable (can I have one in which each row is editable(user dont need to double click to get into edit mode) without Done and cancel button.)

b) And each element when value or text  changed should be validated from database.Can I specifically bind an error message against a cell.JQuery is an  option but just want to confirm without that. Validation option is not working as expected at my end. Required feature works fine.

c) And also regarding Row selectors End Edit and Start Edit is taking time to execute so if user selects any row complete grid row cells gets a selector and checkbox.

Hello,

By design igGrid can have only one row or cell in edit mode at a time. As each such row or cell uses full-fledged Ignite UI editors,  having all cells constantly in edit mode will be very costly from a performance standpoint. The Done and Cancel buttons are purely optional and Updating can operate without them using only the keyboard to submit or cancel changes.

By default editing starts on a single click. You probably have to click twice because there is also Selection enabled and the two need different clicks to be able to work separately. You could circumvent this by binding to e.g. rowSelectionChanged and start editing programmatically with the startEdit function.

About the validation – I'll need to see how you are trying to accomplish it but seeing you are already using saveChanges, I'd suggest doing the server-side validation with it as opposed to triggering it on each text/value changed editor event. Basically, you have to keep autoCommit disabled (the default state), and then on each editRowEnded you call saveChanges with a success and error callbacks (the first and second parameters of the function). On success you execute a manual commit and on failure you can display an error to the end-users that something went wrong with verifying their input and optionally rollback. You can find out more about persisting changes server-side from this help topic.

I don't think I understand the use-case described in c). Is the behavior reproducible in the sample you are going to attach?

Best regards,

Stamen Stoychev