Pager Not Rendering

Hi,

I'm exploring the Syncfusion controls for Vue 3.

I tried to use Data Grid in Vue 3. Sample app is working good.

Below image is the warning while building the Vue 3 app.


When I enable :allowPaging="true", the Data Grid Breaks.

Below image is the error getting in the Browser.


It'd helpful if you can provide Vue 3 Sample for paging in data grid. 

TIA


5 Replies

SK Sujith Kumar Rajkumar Syncfusion Team February 15, 2022 11:46 AM UTC

Hi Boopathy, 
 
Greetings from Syncfusion support. 
 
We suspect that you might be facing the reported problem because of not injecting the ‘Page’ module for the Grid which is needed for enabling paging in the Grid. So please inject this module as demonstrated below to resolve the problem, 
 
import { GridComponent, ColumnsDirective, ColumnDirective, Page} from '@syncfusion/ej2-vue-grids'; 
 
export default { 
  name: 'App', 
  components: { 
    'ejs-grid' : GridComponent, 
    'e-columns' : ColumnsDirective, 
    'e-column' : ColumnDirective 
  }, 
  provide: {grid: [Page]}, 
  data() { 
    return { 
    } 
  } 
} 
</script> 
 
We have prepared a Vue 3 sample based on this for your reference. You can find it below, 
 
 
The list of available Grid features and the modules that need to be injected for including them can be checked from the below links, 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 



BO Boopathy February 16, 2022 05:03 PM UTC

Hi Sujith,

Thanks for the reply.

Actually it was working as you mentioned.

The error I got was when I worked with Laravel and Vue using Inertia.

Now that I changed my approach and decoupled the application, it works fine.


Thanks

Boopathy



BS Balaji Sekar Syncfusion Team February 17, 2022 03:54 PM UTC

Hi Boopathy, 

Thanks for your update. 

We happy to hear that your issue has been resolved. 

Please get back to us, if you need further assistance. 

Regards, 
Balaji Sekar. 



BO Boopathy February 19, 2022 02:45 AM UTC

Thanks Balaji!

Actually, this is what I was looking for!

https://www.syncfusion.com/forums/167495/inertia-syncfusion

I apologize for wasting your time!

Please let me know how can I track the status of the future update of this feature!


TIA



SK Sujith Kumar Rajkumar Syncfusion Team February 21, 2022 05:12 AM UTC

Hi Boopathy, 
 
Thanks for the update. We are happy to assist you with your queries. 
 
And as for this query – “Please let me know how can I track the status of the future update of this feature!”, we suspect you mean this fix – “Providers are not accessible globally in Vue 3”. If so, you can track the status of the same using the below feedback link, 
 
 
If we misunderstood your query or if you require any further assistance, then please get back to us. 
 
Regards, 
Sujith R 


Loader.
Up arrow icon