Wijmo5 flexgrid with Angular8 - grid custom edit validation issue

Posted by: madhuchhanda_kar on 15 May 2020, 9:15 am EST

  • Posted 15 May 2020, 9:15 am EST

    I am using Wijmo5 flexgrid with Angular8. I have a form with Add fields and a grid which has custom edit implemented. For showing validation messages, a custom show-validation-errors component is being used. Form validation has been implemented for add fields. I am trying to implement form validation for edit grid by wrapping it in a form and using custom show-validation-errors component, but it does not work. Could you let me know how to do it?

    The code is in the link:

    https://stackblitz.com/edit/angular-quxypy

  • Posted 15 May 2020, 9:22 am EST

    “Employee Name” and “Department” fields will always be required. If “Is Working” field is checked, then “Asset Type” field will be required, otherwise not.

  • Posted 17 May 2020, 4:17 pm EST

    Hi,

    It seems that the ShowValidationErrorsComponent only works with elements and not with FlexGrid. For validation in FlexGrid, their is a getError callback that can be used to validate the data in the grid and use the errorCount variable to check whether the grid has errors.

    https://stackblitz.com/edit/angular-t6wbtg

    Regards,

    Ashwin

  • Posted 19 May 2020, 11:05 pm EST

    Thanks Aswin for your response.

    As per your code, errorCount property is always coming as zero. So gridHasErrors() method cannot be used to check if grid has errors. Could you have a look into this?

  • Posted 20 May 2020, 4:44 pm EST

    Hi,

    Sorry for the mistake. The formatItem event that checked for errors was not working properly. I have updated the sample:

    https://stackblitz.com/edit/angular-4wkaff

    ~regards

  • Posted 22 May 2020, 12:01 am EST

    Hi Aswin,

    Thanks for your reply.

    When I remove value from Employee Name text box in the grid edit mode, then click on OK button and check for gridHasErrors value, it is still false and going to _commitEdit() method, which should not be the case. Please check.

    Updated code :

    https://stackblitz.com/edit/angular-wtuqsu

  • Posted 25 May 2020, 4:24 pm EST

    Hi,

    The values in the FlexGrid are only committed after you click on OK button. That is why, the Employee name was saved as an empty value. The gridHasErrors only returns the error according to the committed data.

    Also, I have updated the gridHasErrors property. This time, it will check for errors on the go, without using the formatItem event.

    https://stackblitz.com/edit/angular-bz5muh

    ~regards

  • Posted 25 May 2020, 7:52 pm EST

    It is still not working. I am checking for the gridHasErrors property value when the OK button is clicked. The code is added at line no. 235. it is always returning false. Therefore even if I remove value from Employee Name cell, it is executing _commitEdit() method.

    The expected behaviour will be - when any required field is empty, gridHasErrors property should return true and _commitEdit() method should not get executed.

    Updated code :

    https://stackblitz.com/edit/angular-37poyh

  • Posted 26 May 2020, 5:25 pm EST

    Hi,

    As I said earlier, the gridHasError can only return the errors if they are committed. So, in order to prevent adding the erroneous values, you will first need to commit these values and then force the grid to go back into edit mode while displaying the error. Please refer to the updated sample below:

    https://stackblitz.com/edit/angular-ns7qjw

    In this sample, I have removed the error check before clicking on OK button and added check in the _commitEdit and _cancelEdit button.

    ~regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels