|
<template>
<ejs-grid . . . . :toolbar="toolbar" >
<e-columns>
<e-column field="OrderID" headerText="Order ID" :isPrimaryKey="true" width="100"></e-column>
. . . . .
<e-column headerText="Icon" width="120" :valueAccessor="valueAccess"></e-column>
</e-columns>
</ejs-grid>
</template>
<script>
export default {
name: "App",
data: () => {
return {
. . . .
toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"]
};
},
methods: {
valueAccess: function(field, data, column) {
const date2 = new Date(); // current date
const date1 = data.OrderDate; // Order date from data source
const diffTime = Math.abs(date2 - date1); // find difference
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
if (diffDays <= 12) {
// you can apply whatever conditions you need
return '<span class="e-icons e-date"></span>'; // icons from our library
} else return '<span class="e-icons e-upload"></span>';
}
};
</script>
<style>
@import "https://cdn.syncfusion.com/ej2/material.css";
.e-upload:before {
content: "\e208";
}
.e-date:before {
content: "\e901";
}
.e-icons {
color: #00ffff;
font-size: 16px;
}
</style>
|
|
btnClick: function(event) { //achieved in button click
this.$refs.gridObj.dataSource[0].OrderDate = new Date("5/5/2019"); // you can change the value whatever you want
this.$refs.gridObj.refresh();
} |
