Hi,
I am trying to add a new row. And to add this I have:-
securityOnlyModel.igGridUpdating("endEdit", true); securityOnlyModel.igGridUpdating("option", "enableAddRow", true); securityOnlyModel.igGridUpdating("startAddRowEdit", true);
Now I have a delete button on newly added row. If I click add a row and then I want to delete it without adding it to my table. For this I am doing something like this:-
var removeSecurity = function(rowId) { var grid = jQuery("#securityOnlyModel").data("igGrid");
if(rowId === undefined) { jQuery("#securityOnlyModel").igGridUpdating("option", "enableAddRow", false); jQuery("#securityOnlyModel").igGridUpdating("endEdit", true); } grid.dataSource.deleteRow(rowId); grid.commit(); };
Now the problem is after deleting the row if I click anywhere on the remaining rows to edit them, I am getting this error:-
Uncaught Error: cannot call methods on igEditorFilter prior to initialization; attempted to call method 'option'
Please help me on this.
Thanks,
Mohan
Hello Mohan,
Thank you for contacting Infragistics!
I have some questions concerning this matter:
What version are you using?How are you setting up the grid?What scripts are you loading?Do you have an isolated sample you can share?
Hi Mike,
Thank you for your reply. Please find attached zip archive for sample of my code.
Thank you for the update. I have taken a look at the code you have provided and I don’t see anything that could cause this. Can you please provide me with a running sample? Also can you answer my other questions?
I think the version I am using is "Ignite UI 2016 Vol 1." Not sure if I can provide a running sample.
The only problem is to delete a row which which is yet not added to the grid. These are the lines which are creating the problem:-
jQuery("#securityOnlyModel").igGridUpdating("option", "enableAddRow", false); jQuery("#securityOnlyModel").igGridUpdating("endEdit", true);
I think here I am ending the edit mode, and once I do this still I want to edit other rows. Is there any way I can end edit mode for only row which I am deleting ?
is there any other way I can delete that without using these 2 line ?
Thank you for the update. When you say delete the row you are trying to add do you mean just get rid of the changes to the add new row? Why are you disabling AddRow feature? You should just be able to just call end edit and it will discard the changes. If you want to delete a row that has been added to the grid you would use the “deleteRow” method:
http://www.igniteui.com/help/api/2016.2/ui.iggridupdating#methods:deleteRow
Yes you are right, I want to get rid of the changes to the add new row. If I don't disable AddRow feature and only call end edit, It shows "Add new row" on the first row and automatically adding a new row to the end of the gird. Please have a look at attached screenshot.
In the screenshot you can see "Add new row" which I dont want. Actually I have a button and I want to add new rows via that button only. Second thing is you can see in the screenshot line no. 5, It is automatically added row when I called end edit without disabling the AddRow feature. What I want is when I click on the delete button it removes the first line and put rest of the table into edit mode.
If you want you can change the label of the AddNewRow to be something else:http://www.igniteui.com/help/api/2016.2/ui.iggridupdating#options:addRowLabel Or if you want to not use the UI of the grid at all to add a row you can set enableAddRow to false:http://www.igniteui.com/help/api/2016.2/ui.iggridupdating#options:enableAddRow
The elements you are referring to at the top of the grid are not a row in the grid. It is the UI to allow users to enter values that will be used if a new row is added. When you actually add the row it will get added to the bottom/end of the grid/datasource. Currently the AddNewRow UI cannot be moved to the bottom of the grid.
Your suggestion worked for me. The problem is I can not disable AddRow feature. So what I am doing is:-
if(rowId === undefined) { jQuery("#securityOnlyModel").igGridUpdating("endEdit", true); jQuery('[title="Start adding a new row"]').css("display", "none"); rowId = (jQuery("#securityOnlyModel").igGrid("allRows").length).toString(); } grid.dataSource.deleteRow(rowId); grid.commit(); };
This is working as expected. So thanks a lot for your help.
One more thing when i am adding a new row it's on the top of the grid. once it is added it is rendering at the bottom of the grid. So if I want to add multiple rows at the same time one row is at the top and others are at the bottom. This looks little weird to me. Is there any way I can have all the new rows at the bottom or at the top of the grid ?