1. Home
  2. Forum
  3. Vue
  4. Validation all at once

Validation all at once

Hi,
I have a datagrid with some validations inline once the user change some values. But, my grid can be loaded also using an external file (using a json file).So, 
Is it possible to display all the validations at once ?

Many thanks!

9 Replies
PS Pavithra Subramaniyam Syncfusion Team November 18, 2019 10:51 AM UTC

Hi Carlos, 
 
Thanks for contacting us. 
 
You can achieve your requirement by adding validation rules dynamically inside the actionBegin event of the Grid. So that validation will be applied only after clicking the update button.  Please find the below code example and sample for more information. 
 
App.vue 
<template> 
  <div class="col-lg-12 control-section"> 
    <ejs-grid 
      ref="grid" 
      id="grid" 
      :dataSource="data" 
      :allowPaging="true" 
      :actionBegin="actionBegin" 
      :pageSettings="pageSettings" 
      :editSettings="editSettings" 
      :toolbar="toolbar" 
    > 
      <e-columns> 
        <e-column 
          field="OrderID" 
. . . 
          :isPrimaryKey="true" 
        ></e-column> 
        <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column> 
        <e-column 
          field="Freight" 
          headerText="Freight" 
          width="120" 
          format="C2" 
          textAlign="Right" 
          editType="numericedit" 
        ></e-column> 
. . . 
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
<script> 
import Vue from "vue"; 
import { GridPlugin, Toolbar, Edit, Page } from "@syncfusion/ej2-vue-grids"; 
import { data } from "./datasource"; 
 
Vue.use(GridPlugin); 
 
export default Vue.extend({ 
  data: () => { 
    return { 
      data: data.slice(0), 
      editSettings: { 
        allowEditing: true, 
        allowAdding: true, 
        allowDeleting: true 
      }, 
      toolbar: ["Add", "Delete", "Update", "Cancel"], 
      editparams: { params: { popupHeight: "300px" } }, 
      pageSettings: { pageCount: 5 } 
    }; 
  }, 
  methods: { 
    actionBegin: function(args) { 
      if (args.requestType === "save") { 
        this.$refs.grid.ej2Instances.editModule.formObj.addRules( 
          "OrderID",{ required: true, number: true }); 
          this.$refs.grid.ej2Instances.editModule.formObj.addRules( 
          "Freight",{ number: true,required: true }); 
             this.$refs.grid.ej2Instances.editModule.formObj.addRules( 
          "CustomerID",{ required: true }); 
// here you will get true or false based on the validationRules 
          if (!this.$refs.grid.ej2Instances.editModule.formObj.validate()) { 
//cancel the save action, if the validation rules are not satisfied 
            args.cancel = true; 
          } 
      } 
    } 
  }, 
  provide: { 
    grid: [Toolbar, Edit, Page] 
  } 
}); 
</script> 
 
 
                              https://ej2.syncfusion.com/javascript/documentation/api/form-validator#addrules 
                              https://ej2.syncfusion.com/javascript/documentation/api/form-validator#validate 
 
Sample               : https://codesandbox.io/s/149176-inline-editing-2qtk0 
 
If the above sample and explanation does not meet your requirement, please explain more about your requirement. 
 
Regards,
Pavithra.  


CA Carlos Alarcon November 26, 2019 02:12 AM UTC

Sorry, I did not explain it correctly.

I have a grid, this grid can be modified directly by doing double click on a cell, currently all the rules are displayed correctly.
The thing is that in my page I have an input file (< input type="file" .... >) to load data from a json file, this data is loaded in the grid too (this.gridata = data). What I want to do is that once this data is loaded immediately display all the warnings rules associated to all the rows with no additional user intervention.

The example you posted you will get the alerts ONLY when the user clicks on a cell/row.

In other words, I'd like to display all the rules in all the rows at once programmatically. 


Thanks!

PS Pavithra Subramaniyam Syncfusion Team November 26, 2019 11:52 AM UTC

Hi Carlos, 

Thanks for your detailed explanation. 

We would like to inform you that validation rules will apply while on edit state only. For data loading action, validation rules will not work since there is not edit form. However you can add information of valid/invalid data by using queryCellInfo event or rowDataBound. Please find the below documentation links for more information. 

Documentation:  


Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


CA Carlos Alarcon November 27, 2019 12:26 PM UTC

OK, thanks. That could be a good alternative. :)

Since I need to evaluate some rules from different cells at the same time and using the rowdatabound approch,  Is it possible to change the color of an specific cell? 
Or as an alternative, How can I iterate the whole grid ?

Many thanks!

PS Pavithra Subramaniyam Syncfusion Team November 28, 2019 10:49 AM UTC

Hi Carlos, 
 
Thanks for your update. 
 
Yes, it is possible to change the color of an specific cell based on the row data. In both events(rowDataBound and queryCellInfo) you can get the entire rowData in argument. Based on the row Data you can apply your customization. Please find the below code example and sample for more information. 
 
<template> 
  <div class="col-lg-12 control-section"> 
    <ejs-grid 
      ref="grid" 
      id="grid" 
      :rowDataBound="rowDataBound" 
      :dataSource="data" 
      :allowPaging="true" 
    > 
      <e-columns> 
. . . 
        <e-column field="Freight" headerText="Freight" width="120" format="C2" textAlign="Right"></e-column> 
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
<script> 
. . . 
 
export default Vue.extend({ 
  data: () => { 
    return { 
      data: data.slice(0, 5) 
    }; 
  }, 
  methods: { 
    rowDataBound: function(args) { 
      if (args.data["Freight"] < 30) { 
        args.row.cells[2].classList.add("below-30"); 
      } else if (args.data["Freight"] < 80) { 
        args.row.cells[2].classList.add("below-80"); 
      } else { 
        args.row.cells[2].classList.add("above-80"); 
      } 
    } 
  }, 
  provide: { 
    grid: [Toolbar, Edit, Page] 
  } 
}); 
</script> 
 
<style> 
.below-30 { 
  background-color: orangered; 
} 
.below-80 { 
  background-color: yellow; 
} 
.above-80 { 
  background-color: greenyellow; 
} 
</style> 
 
 
 
Please get back to us if you have any concern. 
 
Regards, 
Pavithra S. 


CA Carlos Alarcon December 2, 2019 01:18 AM UTC

Hi, Thanks again..! 

Now I have another little problem because Im working with frozen columns and all my colored cells are duplicated.
Is there any formal way to fix it ? I'd like to have colors in my left grid only I tested some workarounds I imagined, but they failed on sorting operation.


Thanks!

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 2, 2019 11:50 AM UTC

Hi Carlos, 

Thanks for your update. 

Since you are using frozen columns, rowDataBound will trigger twice for each row. One for Frozen content and other one for movable content. So to achieve your requirement we suggest you to use queryCellInfo event. Which will trigger for each cell , with entire row data in arguments. Please find the below code example and sample for more information. 

App.Vue 
<template> 
  <div class="col-lg-12 control-section"> 
    <ejs-grid 
      ref="grid" 
      id="grid" 
      :queryCellInfo="QueryCellInfo" 
      :dataSource="data" 
      :allowPaging="true" 
      :frozenColumns="3" 
    > 
. . . 
        <e-column field="Freight" headerText="Freight" width="120" format="C2" textAlign="Right"></e-column> . . . 
       
  methods: { 
    QueryCellInfo: function(args) { 
      if (args.column.field === "Freight") { 
        if (args.data["Freight"] < 30) { 
          args.cell.classList.add("below-30"); 
        } else if (args.data["Freight"] < 80) { 
          args.cell.classList.add("below-80"); 
        } else { 
          args.cell.classList.add("above-80"); 
        } 
      } 
    } 
  }, 
}); 
</script> 
 
<style> 
.below-30 { 
  background-color: orangered; 
} 
.below-80 { 
  background-color: yellow; 
} 
.above-80 { 
  background-color: greenyellow; 
} 
</style> 



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

Regards, 
Seeni Sakthi Kumar S

CA Carlos Alarcon December 3, 2019 01:24 AM UTC

OK, that approach could work but as I mentioned before I need to validate from different cells at the same time.
For example:

cell1 = date1
cell2 = date2

and of course, date1<=date2. Using this approach how can I validate it ? 

Thanks!

PS Pavithra Subramaniyam Syncfusion Team December 3, 2019 09:44 AM UTC

Hi Carlos, 
 
Thanks for your update. 
 
Based on your query we have prepared a sample in which two columns are customized inside the queryCellInfo based on some conditions. Please refer to the below code example and sample link for more information. 
 
[App.Vue] 
<template> 
  <div class="col-lg-12 control-section"> 
    <ejs-grid ref="grid" id="grid" :queryCellInfo="QueryCellInfo" :dataSource="data" 
      :allowPaging="true" :frozenColumns="3"> 
        .  .  . 
        <e-column field="Freight1" headerText="Frieght 1" width="130" format="C2"></e-column> 
        <e-column field="Freight2" headerText="Freight 2" width="130" format="C2"></e-column> 
        <e-column field="ShipCountry" headerText="Ship Country" width="150"></e-column> 
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
<script> 
 
export default Vue.extend({ 
  .  .  . 
  methods: { 
    QueryCellInfo: function(args) { 
      if (args.column.field === "Freight1") { 
        if (args.data["Freight1"] > args.data["Freight2"]) { 
          args.cell.classList.add("above-80"); 
        } 
      } 
    } 
  } 
}); 
</script> 
 
 
 
In the above sample you can get the other column values for validation inside the queryCellInfo event. If the above does not meet your requirement please provide more details like what issue you are facing with this event, that will be helpful for us to provide a better solution as early as possible. 
 
Regards, 
Pavithra S. 


Loader.
Up arrow icon