Forums Home / Wijmo / General Discussion
Posted by: samvarth123 on 26 June 2019, 10:04 am EST
samvarth123
Posted 26 June 2019, 10:04 am EST
If suppose there is a wijmo flexgrid collection and there is a submit button below.Submit should not be enabled till every field is filled up and collection is valid.Using angular 6 .Errors are being showed in the grid already but submit is getting enabled since we are just checking whether a new row has been added
sharad.tomer
Posted 27 June 2019, 6:11 am EST
Hi,
You may use the CollectionView’s getError property to check whether the grid or the collectionView has any error. The getProperty takes a Function with 2 parameters, the item and the property to be validated.
new wjcCore.CollectionView(data, {
getError: (item, propName: string) => {
var data = item[propName];
if(typeof data !== 'undefined' && !wjcCore.isNullOrWhiteSpace(data.toString())) {
return '';
}
return 'Value cannot be empty';
}
});
Now, you need to check the grid for errors in the loadedRows event of the FlexGrid. In this event, you need to save all of the rows that currently have errors in an array. We can use this array to enable or disable the button.
HTML:
<wj-flex-grid #grid (loadedRows)="loadRows(grid, $event)" (rowEditEnded)="rowEditEnded(grid, $event)" [itemsSource]="source"
[validateEdits]="false">
</wj-flex-grid><br><br>
<button (click)="onClick()" [disabled]="errorRows.length > 0">Submit</button>
TS:
errorRows: any[];
loadRows(s, e) {
var self = this;
s.rows.forEach(r => {
var data = r.dataItem;
let errorFlag = this.checkForError(s.columns, data);
if (errorFlag) {
self.errorRows.push(r.index);
}
});
}
Then, you also need to handle the rowEditEnded event of FlexGrid. In this event, we will check for any error in the row that’s just been edited.
rowEditEnded(s, e) {
var rowIdx = e.row;
var data = s.rows[rowIdx].dataItem
var errors = this.checkForError(s.columns, data);
if(errors && this.errorRows.indexOf(rowIdx) == -1) {
this.errorRows.push(rowIdx);
}
else if(!errors) {
var idx = this.errorRows.indexOf(rowIdx);
this.errorRows.splice(idx, 1);
}
}
Please refer to the following sample demonstrating the same:
https://stackblitz.com/edit/angular-uc7x3o
Regards
samvarth123
Posted 4 July 2019, 11:09 am EST
What if the grid is used as a component instead of the page itself and it doesn’t have item source as such
samvarth123
Posted 4 July 2019, 11:10 am EST
how to use in the above scenario
sharad.tomer
Posted 5 July 2019, 6:48 am EST
If I understand correctly what you need to do is have the grid wrapped in separate component and then check the validity of the grid from the parent component. In this case, you may create the grid in the different component and pass the source to the grid using the @Input decorator of Angular. You can enable or disable the submit button by checking the length of errorRows property the same as we did before. Please refer to the sample below:
https://stackblitz.com/edit/angular-om66hc
Please let us know if you had a different requirement.
samvarth123
Posted 5 July 2019, 7:05 am EST
Requirement is the same except that it doesn’t have any item source and its a new grid from scratch to be edited by the user
ashwin.saxena
Posted 8 July 2019, 6:38 am EST
Hi,
If there is no itemsSource for the grid, you may pass an empty array to the grid as the itemsSource and use the same logic as we used before to check if the grid has any empty cells. Please refer to the updated sample below:
