Data validation
The data validation is a complicated scenario with a lot of possible cases. In the Vue ecosystem, the good implementation practices are to use custom validation components to control the data input. The Kendo UI for Vue Native Grid follows the popular development practices. That is why the component doesn't provide built-in data validation. We recommend the usage of custom components for handling the data validation when creating or editing records.
When creating custom components as editors in the Grid, we recommend the use of the Kendo UI for Vue Native components. The Kendo UI for Vue Native components are created with inbuilt support for validation cases and they provide the recommended approach to handle these state changes.
The below demo demonstrates a possible approach that can be used to validate Grid's data.
Validation
The validation of the input data is implemented through the validate method in the main.vue file. The method is called every time there is a change in one of the custom editors.
validate: function(dataItem) {
const unitsInStockValue = dataItem.UnitsInStock;
const productNameValue = dataItem.ProductName;
const orderDateValue = dataItem.FirstOrderedOn;
this.unitsFieldHasValue = unitsFieldHasValue(unitsInStockValue);
this.unitsFieldValueIsInRange = unitsFieldValueIsInRange(unitsInStockValue);
this.productNameFieldLengthaboveThree = isLengthAboveThree(productNameValue);
this.firstOrderedOnDateBetweenRange = isDateBetweenRange(orderDateValue);
return this.unitsFieldHasValue
&& this.unitsFieldValueIsInRange
&& this.productNameFieldLengthaboveThree
&& this.firstOrderedOnDateBetweenRange;
}When the validate method is called the values of the unitsFieldHasValue, unitsFieldValueIsInRange, productNameFieldLengthaboveThree and firstOrderedOnDateBetweenRange data properties are changed. Each of these properties is passed as a property to the custom components used for the data editing and validation. Based on the values of the properties, the custom components display a validation message if the input data doesn't meet the validation criteria.
Custom editor
The sample scenario uses custom editorsInputCell.vue, DatePickerCell.vue and NumericCell.vue files.
Below is the definition of the NumericCell component. The input entered in the NumericTextBox is validated by two criteria - The field should have a value and this value should be between 0 and 500. The visibility of the error validation messages is controlled by the valueNotEmpty and validRange props of the NumericCell. These props are passed to the component by its parent and they update on-the-fly the visibility of the error messages. The same approach is used also in the implementation of the InputCell and DatePickerCell components.
<template>
<td v-if="!dataItem.inEdit">{{ currentValue }}</td>
<td v-else>
<numerictextbox
ref="numericInput"
:value="currentValue"
:width="'100%'"
:valid="valid"
@change="change"
></numerictextbox>
<Popup
:anchor="'numericInput'"
:show="!valueNotEmpty || !validRange"
:popup-class="'popup-content'"
>
<span v-if="!valueNotEmpty" class="errorMessage">The field is Required</span>
<span v-if="!validRange" class="errorMessage">Should be between 0 and 500</span>
</Popup>
</td>
</template>
<script>
import { NumericTextBox } from '@progress/kendo-vue-inputs';
import { Popup } from '@progress/kendo-vue-popup';
export default {
components: {
'numerictextbox': NumericTextBox,
'Popup': Popup
},
props: {
field: String,
dataItem: Object,
valueNotEmpty: Boolean,
validRange: Boolean
},
computed: {
valid: function() {
return this.valueNotEmpty && this.validRange;
},
currentValue: function(){
return this.dataItem[this.field];
}
},
methods: {
change: function(e) {
this.dataItem[this.field] = e.value;
this.$emit('change', e);
}
}
}
</script>
The last thing that deserves attention is the usage of the valid property of the NumericTextbox. This property controls the built-in validation styles of the component and is also available in the DatePicker and Input components.
