We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Validate against another cell value

Thread ID:

Created:

Updated:

Platform:

Replies:

148269 Oct 12,2019 04:42 PM UTC Oct 14,2019 08:56 AM UTC Vue 1
loading
Tags: Data Grid
Carlos Alarcon
Asked On October 12, 2019 04:42 PM UTC

How can I validate against another cell?

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


Many thanks!

Thavasianand Sankaranarayanan [Syncfusion]
Replied On October 14, 2019 08:56 AM UTC

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, 
 
 
Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon