Manually call validate on save after copy paste in grid

[n/a]

I have validators below to validate some columns in my grid.

I then have a save button that loops through my data and saves it to the server.

How can I manually trigger validation on all cells upon clicking save so that I can highlight validation errors prior to submitting to the server?

Similarly, if there is a server side error in a particular cell, how can I show the error message from the server in the context of the cell that contains the error?

public createFormGroup(dataItem: any): FormGroup {
  return this.formBuilder.group({
    'viewBy': [dataItem.viewBy, Validators.required],
    'viewByDetail': [dataItem.viewByDetail, Validators.required],
    'order': [dataItem.order, Validators.required],
    '1997': [dataItem['1997'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '1998': [dataItem['1998'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '1999': [dataItem['1999'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2000': [dataItem['2000'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2001': [dataItem['2001'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2002': [dataItem['2002'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2003': [dataItem['2003'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2004': [dataItem['2004'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2005': [dataItem['2005'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2006': [dataItem['2006'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2007': [dataItem['2007'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2008': [dataItem['2008'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2009': [dataItem['2009'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2010': [dataItem['2010'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2011': [dataItem['2011'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2012': [dataItem['2012'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2013': [dataItem['2013'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2014': [dataItem['2014'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2015': [dataItem['2015'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2016': [dataItem['2016'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2017': [dataItem['2017'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2018': [dataItem['2018'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2019': [dataItem['2019'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],
    '2020': [dataItem['2020'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])]
  });
}

[Dimiter Topalov]

Hello John,

Typically the built-in Grid editing functionality relies on building a form group for the Grid row that is in editing mode, and triggering the validation errors during editing thus not allowing saving of invalid values, e.g.:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-reactive-forms/

https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-reactive-editing/ // edit a row and remove the Product Name to observe the described behavior

If the scenario involves and allows for the Grid to contain "invalid" values, you can use the Grid cell templates to provide the desired styling to the given cell (and/or the rowClass callback to provide a custom class to the whole "invalid" row). You will need some custom logic that checks whether a cell value is invalid (or the row contains an invalid cell), and attach the custom styling dynamically, based on this logic.

For example, lets say that prices above 20 are invalid - the rows that contain such prices are colored red, and an additional element containing the error message is displayed in each invalid cell. Furthermore, each row that contains an invalid cell is also styled accordingly:

https://stackblitz.com/edit/angular-uhfxsl?file=app/app.component.ts

As for displaying a server-side error, the exact approach may vary depending on the scenario, but at the end either the Grid data should be mapped such that it contains information about the error that can be displayed in the cell template, or another object should be updated accordingly when the server response arrives so that it contains information about the data item and property where the error should be displayed, and the arbitrary error message to be displayed. Then you can again use the Grid cell template to show an element containing the error message conditionally.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik