Edit row programmatically

[Eralmidia]

Question

I'm trying to emulate the "add row"-functionality (ref #5946) of the old igniteui grid in the igx grid. I can add a new row with the addRows method, but it doesn't seem to be a startEdit method, only a endEdit-method. Is there currently no way to achieve this?

• igniteui-angular version: 7.3

[zdrawku]

Hey @Eralmidia, may I ask what exactly you want to achieve? You want to put a row in edit mode by using the api I assume. Keep in mind that this would be a cell in edit mode with edit row actions. Or you want all the cells from the edited row to be in edit mode?

[Eralmidia]

@zdrawku Well, I guess the latter. As mentioned, what I'm really trying to do, is to get the behavior of the old add row in igniuteui. Lets say for instance that you have a grid with users. When creating a user, you enter things like user name, email ect. But, after the user is added, the user name, should not be editable. That means that while entering data into a new user, the user name field must be editable. But the column itself, genereally should be read only. In those types of scenarios (where add and edit are not really the same thing) it would be usefull to separate the two, like in http://www.igniteui.com/help/api/2016.1/ui.iggridupdating, where you had a separation with addRow and startEdit methods

[Eralmidia]

Another thing to take into consideration is the state. We (and I guess many others) use store tools in angular for state, like ngrx, ngxs or akita. It the becomes a question of wheter the input into a new row actually should be considered state until the input is confirmed. I'd say it's more convenient, if the input is simply kept in a "add row" component, until confirmed by the user, and at that point, it actually becomes a part of the committed data of the grid/state.

[Eralmidia]

Also, as mentioned, I have added a feature request in #5946 for a native add row, so these issues are closely linked. I guess if native add row could be added, I'd rather wait for that, and not pursue a way to manually do this with the current system, unless it's very easy to achieve.

[zdrawku]

Thank you for the clarifications :) you can achieve custom row adding by:

• using igxOverlay for row adding container, with custom elements inside and actions buttons
• ngModel for the new record
• and grid.addRow(..) method.

I've managed to create a quick demo for you, it is not beautiful but it shows an easy way to achieve custom row adding in the grid with components and functionalities that we already have :)

As for the start edit capabilities, you can use setEditMode in order to put a row in edit mode. I've added this logic on row add button action. You will notice how once the new row is added, the first row will appear in edit mode.

What about the state? We may follow the "row editing" transaction based implementation, once a row is put in edit mode (or initialized for adding) a pending transaction will be performed, if you select add action it will commit the transaction, or if you select cancel action it will cancel and remove it from the pending transaction list (transaction state). This is more relevant to the row adding feature request.

Let me know if you have any other questions.

[Eralmidia]

@zdrawku Thanks. I'll explore the options or consider waiting for a transaction based add row