Data Grid and Diaog dynamicaly FormValidation

[Mathieu WERQUIN]

Hi, I want to dynamically validate my form. My form is generated using the grid component and filtered according to what I want to display. Each time I open my form, I update the columns in my table so that each column has the validationRules property set to true or undefined. But the formValidator function is executed before I update my grid. How can I run the function once I've finished updating my grid?

[Santhosh Iruthayaraj]

Hi Mathieu,

Greetings from Syncfusion support.

Based on your query, we understand that you want validation to occur only when clicking on the save button of the Dialog Edit. By default, in the Grid component, validation occurs when we focus out the input element, following HTML form standards. If you wish to perform validation only on the save action, you can achieve this by utilizing Custom Aggregates. Please find the code snippet and sample below for your reference:

[Grid.vue]

 

  data() {

    return {

      data: data,

      editSettings: {

        allowEditing: true,

        allowAdding: true,

        allowDeleting: true,

        mode: 'Dialog',

      },

      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],

      orderIDRules: {

        required: [this.requiredFn, 'This Field is Required'],

        minLength: [this.lengthCheckFn, 'Need atleast 5 letters'],

      },

      customerIDRules: {

        required: [this.requiredFn, 'This Field is Required'],

        minLength: [this.lengthCheckFn, 'Need atleast 5 letters'],

      },

      canValidate: false,

    };

  },

 

  methods: {

    actionBegin(args) {

      if (args.requestType == 'save') {

        if (!this.canValidate) {

          args.cancel = true;

          this.canValidate = true;

          setTimeout(() => this.$refs.grid.endEdit());

        }

      }

    },

 

    actionComplete(args) {

      if (args.requestType == 'save') {

        this.canValidate = false;

      }

    },

 

    requiredFn(args) {

      if (this.canValidate) {

        if (args['value']) {

          return true;

        } else {

          this.canValidate = false;

          return false;

        }

      }

      return true;

    },

 

    lengthCheckFn(args) {

      if (this.canValidate) {

        if (args['value'].length >= 5) {

          return true;

        } else {

          this.canValidate = false;

          return false;

        }

      }

      return true;

    },

  },

 

Sample: Vue Grid Custom Validation - StackBlitz

We hope the provided solution helps you achieve your desired outcome. Please let us know if you have any further queries or require additional assistance.

Regards,

Santhosh I