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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





149063 Nov 13,2019 06:59 AM UTC Mar 10,2020 02:31 PM UTC Vue 5
Tags: Data Grid
Ladislav Beganyi
Asked On November 13, 2019 06:59 AM UTC

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

Thank you. 

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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 

Ladislav Beganyi
Replied On 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?

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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 

Replied On 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 {

Thiyagu Subramani [Syncfusion]
Replied On 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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon