Hi Shivani,
Greetings from syncfusion support.
Query : How to hide or disabled pagination in Data Grid on Add click Event in Vue.js?
Based on your query you need to disable the page container in the grid by click event. We have achieved your requirement by adding a CSS class e-disabled to the pagecontainer element and set the pointerEvents as none in the external button click. In this case we used two buttons, one for disable purpose and another one for enable purpose. Please refer the below code example and sample for more information.
<button v-on:click="enablePage">enable page container</button>
<button v-on:click="disablePage">disable page container</button>
<ejs-grid
ref="grid"
:dataSource="data"
:allowFiltering="true"
:allowPaging="true"
:filterSettings="filterOptions"
height="250px"
>
</ejs-grid>
methods: {
enablePage: function(args) {
// get the pagecontainer and remove e-disabled class
this.$refs.grid.$el.querySelector(".e-gridpager .e-pagercontainer").classList.remove("e-disabled");
// set the pointer event as ‘’
this.$refs.grid.$el.querySelector(".e-gridpager .e-pagercontainer").style.pointerEvents = "";
},
disablePage: function(args) {
// get the pagecontainer and add e-disabled class
this.$refs.grid.$el.querySelector(".e-gridpager .e-pagercontainer").classList.add("e-disabled");
// set the pointer event as none
this.$refs.grid.$el.querySelector( ".e-gridpager .e-pagercontainer").style.pointerEvents = "none";
}
}
|
Please get back to us if you need further assistance on this.
Regards,
Rajapandiyan S
