If the field is not valid in the validation of the Grid component, I want to change it to an existing value when I click outside the screen.

[Benedict]

Hi.

If the field is not valid in the validation of the Grid component, I want to change it to an existing value when I click outside the screen.

In this situation, if it is not valid, automatic saving is not possible when you click the other side with the mouse.

I want to return to the original value when I click the other side with the mouse when it is not valid.

this is my code.

< ejs-grid

  ref="fieldGrid"

                                    height="263px"

                                    ...

                                >

...

                                        < e-column 

field="userFieldName"

                                            width="120"

                                            minWidth="100"

                                            textAlign="Left"

                                            clipMode = "EllipsisWithTooltip"

                                            : headerTemplate = " fieldNameColumnTemplate "

                                            : validationRules = " validationRules "

                                        ></ e-column>

                                      ...

                                </ ejs-grid>

      validationRules: {

                    required: [this.fieldNameRequiredCheck, 'text'],

                    maxLength: [this.fieldNameLengthCheck, 'text'],

                    regex: [

                        this.unuseableCharactersForFieldNameCheck,

                        'text.'

                    ],

                    existColumnName: [this.existColumnNameCheck, 'text']

                },

 

existColumnNameCheck(args) {

                let targetFieldName = args.value.trim();

                let isExist = this.fieldGridDataSource.some(field => {

                    return targetFieldName === field.userFieldName.trim();

                });

                if (this.currentEditField.userFieldName !== targetFieldName) {

                   

                    if (isExist && fieldGridCellValidationCheckTimerId !== null) {

                        clearInterval(fieldGridCellValidationCheckTimerId);

                    }

                    if (isExecutedBatchCancel) return true;

                    else return isExist ? false : true;

                }

                return true;

            },

[Vikram Sundararajan]

Hi Benedict,

Greetings from Syncfusion support,

Query: Want to return to the original value when I click the other side with the mouse when it is not valid.

We have prepared an example based on your requirements. We have set the CustomerID column's validation rule in this sample. The current edit value and row index can be stored using the beginEdit event. If the row is invalid by then, we can update it.

please see the code example and sample below.

beginEdit:  https://ej2.syncfusion.com/vue/documentation/api/grid/#beginedit

[Grid.Example.vue]

 

var value = "";

var index = null;

export default {

  methods: {

    beginEdit: (args) => {

      value = args.rowData;

      index = args.rowIndex;

    },

    customFn: function (args) {

      if (args["value"].length <= 5) {

        var grid = document.getElementById("grid").ej2_instances[0];

        grid.updateRow(index, value);

      }

      return true;

    },

  },

 

Sample: https://codesandbox.io/s/vue-grid-sample-forked-66wuj1?file=/src/components/GridExample.vue

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Vikram S