Ej2 Grid: Custom unique validation for dialog popup

[ISMAIL HAMZAH]

Hello,

I have a grid with custom validation for unique value. Everything is OK for NEW data, but not OK for UPDATE data. This is because I can not put condition whether the data is change or not. And that is because I can not get the original value to be put to the custom validation function.

How to get original value, the value before editing, at custom validation function? So I can put logic measure whether the data is change or not.

note: the data is not change, but get trapped by custom validation.

Below the custom validation code :

        args.form.ej2_instances[0].addRules('name', {
            required: true, value: [(e) => {
                var grid = document.getElementById('Grid').ej2_instances[0];
                for (i = 0; i < grid.dataSource.length; i++) {
                    if (e['value'] === grid.dataSource[i].name) {
                        return false;
                    }
                }
                return true;
            }, 'Enter a unique value']
        });

Thank you in advance

Best regards,

Ismail

[Thiyagu Subramani]

Hi ISMAIL, 

Thanks for contacting Syncfusion support. 

Query: How to get original value, the value before editing, at custom validation function?  & Custom unique validation for dialog popup 

Based on your shared information we suspect that you want to validate dialog popup with unique value and need to get the original value. Using getRowInfo and getRowByIndex method we can get the appropriate row’s data and row element respectively in custom validation function. After that, If the original value is not equal to modified value we have validated required CustomerID column value as unique or not like below code. 

validationRules: { 

                required: true, 

                minLength: [ 

                    (e) => { 

                        var prev = grid.getRowInfo(grid.getRowByIndex(index));  

                        if (prev.rowData.CustomerID != e['value']) { 

                            for (var i = 0; i < grid.dataSource.length; i++) { 

                                if (e['value'] === grid.dataSource[i].CustomerID) { 

                                    return false; 

                                } 

                            } 

                            return true; 

                        } 

                        else { 

                            return true; 

                        } 

                    }, 

                    'Enter a unique value', 

                ], 

            }, 

Likewise you can validate dialog popup as per your needs. 

 

In above screenshot, original and modified value as different then we have validated this modified (VINE) value with all values. However its unique value. So error message is not displayed. 

 

In above screenshot, original and modified value as different then we have validated this modified (TOMSP) value with all values (Grid’s datasource). However it’s not unique value. So error message is displayed. 

Sample link: https://stackblitz.com/edit/wkskxk-qj3mq1?file=index.js 

Note : By default in EJ2 Grid if the validation failed in the required column then the validations (custom validations) function triggers while typing each value in that column once validation passes. The validation throws initially when focus out the input element based on that validation rule. In this case If validation is failed when focus out the required input, custom validation/validation function will throw for each character typing using keyup event in our source. So, we have validated the edit form for each character typing whenever validation passed. It is the default behavior of current Grid validation rule. It happens once validation as failed. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[ISMAIL HAMZAH]

Hi Thiyagu,

Thank you for your update info and example. Your provided example is working and give me an idea. Because, I initialize the control at grid actionComplete, so I take advantage of args.rowData to take the original value and its work seamlessly.

Below my custom code for unique value validation that using args.rowData

        args.form.ej2_instances[0].addRules('name', {
            required: true, value: [(e) => {
                var grid = document.getElementById('Grid').ej2_instances[0];
                var originalValue = args.rowData.name;
                if (originalValue !== e['value']) {
                    for (i = 0; i < grid.dataSource.length; i++) {
                        if (e['value'] === grid.dataSource[i].name) {
                            return false;
                        }
                    }
                }
                return true;
            }, 'Name must be unique']
        });

Thank you also for the side note.

[Thiyagu Subramani]

Hi ISMAIL, 

Thanks for the update. 

We are happy to hear that the provided solution works at your end.  

Please get back to us if you need further assistance. 

Regards, 

Thiyagu S