1. Home
  2. Forum
  3. Vue
  4. Field Validation

Field Validation

Hi all,

am i right that the cellSave event only works in batch mode?
How does cell validation work in normal mode?
I want to correct an invalid entered datepickeredit value.

Regards
Ulf

1 Reply
HJ Hariharan J V Syncfusion Team September 5, 2018 05:25 AM UTC

Hi Ulf, 
 
Thanks for contacting Syncfusion support. 
 
Query 1: Am i right that the cellSave event only works in batch mode? 
 
Yes, cellSave event is only works in Batch mode. You can achieve this in normal edit by using actionComplete event. Here, we have prepared a simple sample based on your requirement. Please find the below code example and sample for your reference. 
 
[code example] [index.js] 
Vue.use(GridPlugin); 
 
new Vue({ 
  el: '#app', 
  template: ` 
    <div id="app"> 
        <ejs-grid ref='grid' :columns="columns" :dataSource="data" :actionComplete='actionHandler' :allowPaging="true" :allowSorting='true' :allowFiltering='true':pageSettings='pageSettings':editSettings='editSettings' :toolbar='toolbar'> 
        </ejs-grid> 
    </div> 
`, 
 
  data() { 
    return { 
      ... 
  }, 
  methods: { 
    actionHandler: function(args) { 
      if(args.requestType === 'save'){ 
        console.log(args.data); 
      } 
    } 
  }, 
... 
}); 
 
 

Query 2: How does cell validation work in normal mode? 
 
In normal mode, cell validation will show when you focus out of the cell(move to next cell). 
 
Query 3: I want to correct an invalid entered datepickeredit value. 
 
We have validated your query and you can achieve your requirement by using below way. Here, we have achieved your requirement by using actionBegin event. Please find the below code example for your reference. 
 
[code example] [index.js] 
Vue.use(GridPlugin); 
 
new Vue({ 
  el: '#app', 
  template: ` 
    <div id="app"> 
        <ejs-grid ref='grid' :columns="columns" :dataSource="data" :actionBegin='actionHandler' :allowPaging="true" :allowSorting='true' :allowFiltering='true':pageSettings='pageSettings':editSettings='editSettings' :toolbar='toolbar'> 
        </ejs-grid> 
    </div> 
`, 
  data() { 
    return {  
      ... 
  }, 
  methods: { 
    actionHandler: function(args) { 
      if(args.requestType === 'save'){ 
        if(args.data.OrderDate){ 
        args.data.OrderDate = "1/1/1990";        //change date dynamically after save 
        console.log("Changed date after save "+args.data.OrderDate); 
        } 
      } 
    } 
  }, 
... 
}); 
 

Please get back to us if you need further assistance on this. 

Regards, 
Hariharan 


Loader.
Up arrow icon