Triggering a load complete event in EJ2

[vipin]

I have created a grid control using syncfusion EJ2 javascript. I want to get details of the following events 1) Load complete event.ie all grid components are loaded completely into the DOM. 2) When the grid is refreshed. Please provide the details regarding these events with code samples.

[Pavithra Subramaniyam]

Hi vipin, 

 

Greetings from  Syncfusion. 

 

Query#1: Load complete event.ie all grid components are loaded completely into the DOM. 

 

In EJ2 Grid component, “created” event will be triggered when the component is created and “dataBound” event will triggered after the data is bound to the Grid. In this event all the Grid element will be loaded on DOM. 

 

https://ej2.syncfusion.com/javascript/documentation/api/grid/#created 

https://ej2.syncfusion.com/javascript/documentation/api/grid/#databound 

 

Query#2: When the grid is refreshed.  

 

When the Grid is refreshed the “actionBegin” and “actionComplete” event will be triggered with requestType “refresh”. Also “dataBound” event will be triggered for every refresh. 

 

https://ej2.syncfusion.com/javascript/documentation/api/grid/#actionbegin 

https://ej2.syncfusion.com/javascript/documentation/api/grid/#actioncomplete 

 

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

 

Regards,  

Pavithra S.  

[vipin]

Thanks for your response. I want to know the event when a template in rendered. There is an event that exists in the ej1 version. 

 ej.template.render = function (self, selector, data, index) {

                   };

I want the equivalent event that exists in the ej2.

[Pavithra Subramaniyam]

Hi Vipin,  

Query :  I want to know the event when a template in rendered. There is an event that exists in the ej1 version.  

 

In EJ2 there is no specific event for template render like in EJ1. But you can get template data in the queryCellInfo event itself ( This will be triggered before the cell element is appended to the Grid element ). Please refer the below code example and sample for more information.  

 

UG : https://ej2.syncfusion.com/javascript/documentation/api/grid/#querycellinfo 

Sample : https://stackblitz.com/edit/nknmm8-djmjdz?file=index.js 

 

Index.js 

var grid = new ej.grids.Grid({ 

    dataSource: data, 

    columns: [ 

        { field: 'OrderID', headerText: 'Order ID', width: 120 }, 

        { field: 'CustomerID', headerText: 'CustomerID', textAlign: 'Right', width: 125 }, 

        { 

            headerText: 'Address', textAlign: 'Center', 

            template: '#template', width: 150 

        } 

    ], 

    queryCellInfo : function(args){ 

 

      if(args.column.headerText == 'Address'){ 

 

          console.log(args); 

      } 

    },     

    height: 315 

}); 

grid.appendTo('#Grid'); 

 

 

index.html 

 

<div id="container"> 

                <script id="template" type="text/x-template"> 

                        "${ShipCountry}-${ShipAddress}" 

                </script> 

            <div id="Grid"></div>         

        </div> 

 

 

 

Please get back to us if you need further assistance. 

 

Regards,   

Pavithra S