We have created an example of a tree grid here: Tree Grid Validation - Row Edit - StackBlitz for adding and editing rows and has validation added for required fields. What we have noticed happening is that when you edit a row, and have incorrect data, the validation will kick in and not allow you to leave the row, this is the same when you add a new row and enter incorrect data. However, if you add a new row and then immediately click off it, this new row will be added even though the required fields have not had any data entered into them. The cells will be highlighted to show there are validation errors but not until the row has been added to the grid. So how can we go about stopping users from being able to do this? Is there a new even that should be added so validation will kick in even though the user hasn't started typing anything?
Hello,
I have been looking into your question and what I can suggest as an approach to implement your requirements to handle the validation when a row is added is to use the rowAdd event of the igx-tree-grid component. The event is fired when a row is added to the grid and you can handle it by checking when adding this row whether all fields of the row are valid, that is, whether the row is valid and if so add it, otherwise cancel the event and prompt the user to enter the required values.
<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [width]="'100%'" [height]="'600px'" [rowEditable]="true" (rowAdd)="rowAdd($event)" ></igx-tree-grid>
public rowAdd(evt){ if (!evt.valid) { evt.cancel = true; } }
The described scenario could be observed here:
In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.
If you require any further assistance on the matter, please let me know.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics