Vue 3 - how to get more advanced features of Grid working in Vue 3

[Ondrej Zalesak]

Hello,

we have tried to implement your Data Grid component using Vue 3, and to make it short - we managed to get it working in the most basic variant possible - as described here or on your GitHub example. However, we struggle to get the more advanced features working, such as paging, or sorting / filtering, etc.

In the generic Vue 3 Getting Started docs you say that Plugin components can only be used in Vue 2, and in Vue 3 we should register components directly - we can do that, however in that case we don't have any guidance how to actually register all the required functionality for Data Grid (or any advanced component) to work.

Can you please provide us with fully working example that shows us how to implement these more advanced features in your components using Vue 3? Or is there any generic way to adapt Vue 2 docs for Vue 3? Thank you a lot for your time.

As I said, Data Grid renders properly when used in the most basic variant just for showing the rows and columns, but whenever we try to implement any of the more advanced features, we run into problems.

Example: When we tried to implement Paging in the Data Grid based off the seemingly Vue 2 docs, we ran into a problem with following error, which leads to Data Grid not working properly:

Cannot read properties of undefined (reading 'pagerObj')
    at Proxy.Data.pageQuery (data.js:153:1)
    at Proxy.Data.generateQuery (data.js:91:1)
    at Proxy.Render.refreshDataManager (render.js:197:1)
    at Proxy.Render.render (render.js:71:1)
    at Proxy.Grid.gridRender (grid.js:3434:1)
    at Proxy.Grid.render (grid.js:856:1)
    at Proxy.Component.appendTo (component.js:183:1)
    at Proxy.ComponentBase.mounted (component-base.js:93:1)

We get this error after attempting to adapt the first paging example (including the same datasource) for Vue 3 implementation:

<ejs-grid
ref="grid"
:dataSource="data"
:pageSettings="pageSettings"
:allowPaging="true"
height="323"
>
<e-columns>
<e-column
field="OrderID"
headerText="Order ID"
textAlign="Right"
width="90"
></e-column>
<e-column
field="CustomerID"
headerText="Customer ID"
width="120"
></e-column>
<e-column
field="Freight"
headerText="Freight"
textAlign="Right"
format="C2"
width="90"
></e-column>
<e-column
field="ShipCity"
headerText="Ship City"
width="150"
></e-column>
</e-columns>
</ejs-grid>
<script>
import {
GridComponent,
ColumnsDirective,
ColumnDirective,
Page,
} from"@syncfusion/ej2-vue-grids";
import { data } from"./datasource.js";

exportdefault {
name:"dashboard-overview",

components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
  },

provide: {
grid: [Page],
  },

data() {
return {
data:data,
pageSettings: { pageSize:5 },
    };
  },
};
</script>

[Rajapandiyan Settu]

Hi Ondrej, 

 

Thanks for contacting Syncfusion support. 

To use Grid features like Sorting, Filtering, Paging, etc., then the required service modules should be injected into the providers section of root vue (App.vue). Find the modified code example and sample for more information. 

Feature modules: https://ej2.syncfusion.com/vue/documentation/grid/module/ 

[App.vue] 

import { Sort, Page } from "@syncfusion/ej2-vue-grids"; 

--- 

export default { 

  name: "App", 

  provide: { 

    grid: [Sort, Page ], 

  }, 

}; 

</script> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue3_grid1555531236.zip 

Note: 

The way of defining the features like Paging, Filtering, etc., in the EJ2 Grid is same in both Vue 2 and Vue 3. The only difference between Vue 2 and Vue 3 is component registration and template registration. Other than that all are same in both Vue 2 and Vue 3. Kindly refer to the below documentation for more information. 

Migration from Vue2 to Vue3: https://ej2.syncfusion.com/vue/documentation/getting-started/vue3-tutorial/#migration-from-vue-2-to-vue-3 

Vue 3 Grid: https://ej2.syncfusion.com/vue/documentation/grid/getting-started-vue/ 

So, you can refer below documentation to implement Paging and Filtering feature in the Vue 3 Grid. 

Paging: https://ej2.syncfusion.com/vue/documentation/grid/paging/ 

Filtering: https://ej2.syncfusion.com/vue/documentation/grid/filtering/ 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S