Hi Adam,
Greetings from syncfusion support.
Query : I was wondering If it is possible to use s computed property as a data source for a grid
By default we have columnTemplate feature in grid, in which you can use computed property as data for that column. please refer the below code example and sample for more information.
<template>
<div id="app">
<ejs-grid
ref="grid"
:dataSource="data"
:allowFiltering="true"
:allowPaging="true"
height="273px"
>
<e-columns>
<e-column field="OrderID" headerText="Order ID" textAlign="Right" width="190"></e-column>
<e-column headerText="ShipName" textAlign="Left" :template="cTemplate" width="180"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import {
GridPlugin,
Page,
Filter,
Sort,
Toolbar,
Edit
} from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
Vue.use(GridPlugin);
export default {
data() {
return {
data: data.slice(0, 5),
filterOptions: {
type: "Menu"
},
pageSettings: { pageSize: 3 },
cTemplate: function() {
return {
template: Vue.component("columnTemplate", {
template: `<a><span v-bind:style="{ color: 'red', fontSize: '15' + 'px' }">
{{ShipCity}}
</span></a>`,
data: function() {
return {
data: {}
};
},
computed: {
ShipCity: function(args) {
return this.data.ShipName; // returned value will be displayed in that column
}
}
})
};
}
};
},
methods: {},
provide: {
grid: [Page, Filter, Sort, Edit, Toolbar]
}
};
</script>
<style>
</style>
|
If we misunderstood your query, please share the below details to validate further on this.
- Explain your exact requirement with more details.
- Share the code example of your requirement.
Regards,
Rajapandiyan S
