How to give Custom Validation in Data Grid?

[Shivani]

How to give custom validation in Data Grid in vue? Like here is "This field is required". But instead of that, I want to give my message..

[Balaji Sekar]

  

Hi Shivani, 

 

Greetings from the Syncfusion support. 

 

Query: How to give custom validation in Data Grid in vue? 

 

As per your query, we have already discussed about the custom validation rules in the Grid editing. Please refer the below Documentation for more information. 

 

Help Documentation: https://ej2.syncfusion.com/vue/documentation/grid/edit/#custom-validation 

Regards, 

Balaji Sekar 

[Shivani]

Hello,
I have tried out that example, but still can't get what I want result.
Like 'This field is required' instead of I want message 'CategoryCode is  required.'
If possible please share an example in vue.
I am using Data Grid in SyncFusion in Vue.

[Balaji Sekar]

Hi Shivani, 

 

Query: we want 'This field is required' instead of I want message 'CategoryCode is  required.' 

 

Based on your query, we have achieved the custom validation message using custom validationRules. In below code example, we have defined the custom function in required of validationRules it is return by Boolean type. If you put a input value is valid then return true and save the changes to Grid otherwise return false and show you customized error message(“CustomerID is required”). 

[App.Vue] 

<ejs-grid 

      id="Grid" 

      ref="grid" 

      :dataSource="data" 

      :allowPaging="true" 

      :editSettings="editSettings" 

      :toolbar="toolbar" 

      :actionBegin="toolbarClick" 

    > 

      <e-columns> 

        <e-column field="OrderID" headerText="Order ID" width="90" isPrimaryKey="true"></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" :validationRules="vRules" width="120"></e-column> 

        <e-column field="ShipCountry" headerText="Ship Country" width="150" ></e-column> 

        <e-column field="ShipCity" headerText="Ship City" width="120"></e-column> 

        <e-column field="Freight" headerText="Freight" format="C2" width="90"></e-column> 

      </e-columns> 

    </ejs-grid> 

data() { 

    var temp = this; 

 

    return { 

      data: data, 

      vRules:{required:[this.customValidationFn,"CustomerID is required"]}, // Here, you can write your own Error message 

      .    .    .    .       

    }, 

    methods: { 

  

    customValidationFn: function(args){ 

      if(args.value.length>0){ 

        return true; 

      } else 

      return false; 

    }, 

 

  }, 

   .      .     .    .  

} 

 

 

Sample link: https://codesandbox.io/s/summer-bash-mwc9d 

 

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

 

Regards, 

Balaji Sekar 

[Shivani]

Hello, 

Thank you for the quick reply to my query.
You really saved my day.

[Balaji Sekar]

Hi Shivani, 

  

We glad that your issue has been fixed.  

  

Please get back to us if you require further other assistance from us. 

  

Regards, 

Balaji Sekar.