We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Typescript @Provide to inject Group, Sort, etc. functionality into Vue component

Looking for an example in typescript to enable Grouping for Vue data-grid using the @Provide property.

Thank you. 

5 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 13, 2019 12:24 PM UTC

Hi Ladislav,  

Greetings from Syncfusion.  

Refer to the following demo of the Grid Group, we have imported the Group module.  

Seeni Sakthi Kumar S 

LB Ladislav Beganyi November 13, 2019 02:45 PM UTC

Thank you. But that example is not using Vue tyoescript class style components.  Do you have an example with that?

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 14, 2019 10:18 AM UTC

Hi Ladislav, 
We have validated your query and we suspect that you want to render the Grid with Typescript way and import the feature modules in provide property. Find the below code snippets and sample for your reference. 

[code snippets] 
<!-- src/components/Hello.vue --> 
    <div class="col-lg-12 control-section"> 
            <ejs-grid :dataSource="data" :allowFiltering="true" :allowGrouping="true" :allowSorting="true" 
                      :allowPaging="true" :pageSettings="pageSettings" :columns="columns"></ejs-grid> 
<script lang="ts"> 
import Vue from "vue"; 
import { GridPlugin, Filter, Page, FilterSettingsModel,PageSettingsModel, IFilter, Group, Sort } from "@syncfusion/ej2-vue-grids"; 
var demoTemplate = Vue.component("demo", { 
  template: "<ejs-button>{{data.ShipCountry}}</ejs-button>", 
  data() { 
    return { 
      data: {} 
export default Vue.extend({ 
  data: () => { 
  let pageModel: PageSettingsModel ={ pageSize:10, pageSizes: true} 
    return { 
      data: [{ 
     columns: [ { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' }, 
                { field: 'CustomerID', headerText: 'Customer Name', width: 150 }, 
                { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' }, 
                { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' }, 
                { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }] 
  provide: { 
    grid: [Filter, Page, Group, Sort] 

Seeni Sakthi Kumar S 

TH Thomas March 4, 2020 09:46 PM UTC

I know this thread is a bit old, but in case anyone else is looking for the solution, it doesn't seem like @Provide will work. I added it to the @Component section and it works there.

  provide: {
    chart: [AreaSeriesDateTimeLegendZoomScrollBar]
export default class HistoricalUsageChart extends Vue {

TS Thiyagu Subramani Syncfusion Team March 10, 2020 02:31 PM UTC

Hi Thomas, 
Thanks for your response and we are happy to hear that your issue has been resolved. 
Please get back to us if you need further assistance 
Thiyagu S 

Live Chat Icon For mobile
Up arrow icon