<template>
<div id="app">
<ejs-grid :dataSource="data" :allowFiltering="true" allowPaging="true" :queryCellInfo="queryCellInfo">
<e-columns>
.
.
<e-column field="Year" type="number" headerText="Year" width="150"></e-column>
<e-column field="Day" type="number" headerText="Day" width="150"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
export default {
data() {
.
.
},
methods: {
// Grid’s queryCellInfo event handler
queryCellInfo: function(args) {
// Check the column field
if (args.column.field === "Year") {
// New value is calculated
var currentDate = args.data.OrderDate;
var year = currentDate.getFullYear();
// Calculated value is set to the row data
args.data.Year = year;
// Calculated value is set as the cell’s inner text
args.cell.innerText = year;
}
else if (args.column.field === "Day") {
// New value is calculated
var currentDate = args.data.OrderDate;
var day = currentDate.getDate();
// Calculated value is set to the row data
args.data.Day = day;
// Calculated value is set as the cell’s inner text
args.cell.innerText = day;
}
}
}
}
</script> |