Validate against another cell value

[Carlos Alarcon]

How can I validate against another cell?

I have this example and I want to validate required <= stock

https://codesandbox.io/s/146774-dynamic-grid-modified-btnyp

Many thanks!

[Thavasianand Sankaranarayanan]

Hi Carlos, 

 

Greetings from Syncfusion support. 

 

We can achieve your requirement of validating a cell against another by using the validationRules property of the Grid columns. The validationRules provides custom validation support which you can utilize to validate a cell against another. 

 

This is demonstrated in the below sample code, 

 

<ejs-grid ref="grid" :dataSource="data" :pageSettings="pageOption" :toolbar="toolbar" :editSettings="editSettings" :cellSave="cellSave" allowPaging="true"> 

   <e-columns> 

                  . 

                  . 

      <e-column field="Required" headerText="Required" :validationRules="ReqValidationRules" width="100"></e-column> 

      <e-column field="Stock" :validationRules="StockValidationRules" headerText="Stock" width="100"></e-column> 

   </e-columns> 

</ejs-grid> 

 

<script> 

export default { 

    data() { 

        return { 

                    . 

                    . 

            ReqValidationRules: { 

                required: true, 

                max: [ 

                    args => { 

                        // Get the parent row element of cell 

                        var rowEle = args.element.closest(".e-row"); 

                        // Get the stock cell value 

                        var stockCol = rowEle.querySelector('[aria-colindex="5"]').innerHTML; 

                        // Compares the Required and Stock cell values and returns the result 

                        return stockCol.length != 0 ? parseInt(args["value"]) <= parseInt(stockCol) : true; 

                        }, "Required must be lesser than stock" 

                ] 

            }, 

            StockValidationRules: { 

                required: true, 

                min: [ 

                    args => { 

                        // Get the parent row element of cell 

                        var rowEle = args.element.closest(".e-row"); 

                        // Get the required cell value 

                        var ReqCol = rowEle.querySelector('[aria-colindex="4"]').innerHTML; 

                        // Compares the Required and Stock cell values and returns the result 

                        return ReqCol.length != 0 ? parseInt(args["value"]) >= parseInt(ReqCol) : true; 

                        }, "Stock must be greater than required" 

                ] 

            } 

        }; 

    } 

} 

</script> 

 

We have modified your sample based on this. You can find it below, 

 

Sample: https://codesandbox.io/s/146774-dynamic-grid-modified-u6her 

 

Regards, 

Thavasianand S.