intercept event on page change or pageModule

Question

Good day!I am currently using a grid that utilizes a DataManager which fetches a defined amount of rows per page on a grid.Currently what I am looking for is a way to create a custom event for the Grid's PagerModule wherein I can prevent the page from changing unless a Dialog is confirmed.So basically, I just need a way to add a function that will control whether the page should start requesting from the DataManager.Cheers!

Venkatesh Ayothi Raman · Answer

Hi James, 

You can achieve your requirement by using the actionBegin event of Grid component and click event pager component. If you set the args.cancel property as true in both events then paging action will be canceled. We have prepared a simple sample based on your query. Please refer to the below code example, Documentation link and sample link. 

[index.js] 




    var data = new ej.data.DataManager({ 
    url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders', 
    adaptor: new ej.data.ODataAdaptor 
}); 
    var grid = new ej.grids.Grid({ 
        dataSource: data, 
        allowPaging:true, 
        dataBound:Bound, 
        actionBegin:begin, 
        columns: [ 
            .   .  . 
        ] 
    }); 
    grid.appendTo('#Grid'); 
function Bound(e){ 
       var pager = document.getElementsByClassName('e-gridpager')[0].ej2_instances[0]; 
       var old = pager.click; 
      pager.click = function (args) { 
          old.call(this, args); 
          // here you can add conditions 
         args.cancel = true;  // cancels the pager refresh  
    }; 
} 
function begin(e) { 
    if (e.requestType === 'paging') { 
      e.cancel = true; // cancels the grid paging 
    } 
  } 

Documentation: https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#actionbegin  

Sample               : https://stackblitz.com/edit/xk3n5i-3z6wys?file=index.js  

Please get back to us if you have any further assistance on this. 
 
Regards, 
Venkatesh Ayothiraman.

Venkatesh Ayothi Raman · Answer

Hi James, 

You can achieve your requirement by using the actionBegin event of Grid component and click event pager component. If you set the args.cancel property as true in both events then paging action will be canceled. We have prepared a simple sample based on your query. Please refer to the below code example, Documentation link and sample link. 

[index.js] 




    var data = new ej.data.DataManager({ 
    url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders', 
    adaptor: new ej.data.ODataAdaptor 
}); 
    var grid = new ej.grids.Grid({ 
        dataSource: data, 
        allowPaging:true, 
        dataBound:Bound, 
        actionBegin:begin, 
        columns: [ 
            .   .  . 
        ] 
    }); 
    grid.appendTo('#Grid'); 
function Bound(e){ 
       var pager = document.getElementsByClassName('e-gridpager')[0].ej2_instances[0]; 
       var old = pager.click; 
      pager.click = function (args) { 
          old.call(this, args); 
          // here you can add conditions 
         args.cancel = true;  // cancels the pager refresh  
    }; 
} 
function begin(e) { 
    if (e.requestType === 'paging') { 
      e.cancel = true; // cancels the grid paging 
    } 
  } 

Documentation: https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#actionbegin  

Sample               : https://stackblitz.com/edit/xk3n5i-3z6wys?file=index.js  

Please get back to us if you have any further assistance on this. 
 
Regards, 
Venkatesh Ayothiraman.