Using computed properties as a data source

[Adam Moroff]

Hi there

I was wondering If it is possible to use s computed property as a data source for a grid and if it interferes with any built in events or presents any potential issues with the grid? 

Thanks 

[Rajapandiyan Settu]

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> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

Sample : https://codesandbox.io/s/vue-template-mpiyx 

UG : https://ej2.syncfusion.com/vue/documentation/grid/columns/#column-template 

Data-binding : https://ej2.syncfusion.com/vue/documentation/grid/data-binding/ 

If we misunderstood your query, please share the below details to validate further on this. 

1. Explain your exact requirement with more details.
2. Share the code example of your requirement.

Regards, 

Rajapandiyan S