Load Grid On Scroll

[Aniruddha Pondhe]

I have a page with 4-5 grids and many fields. So there is a considerable scroll introduced in the page.

Using Angular2 how can I trigger loading of the grids on scroll - that is only when the grids come into view.

Do you have support for the same? Is there any existing events in the ejGrid which I can use to trigger loading of grids only when they come in view?

[Karthick Kuppusamy]

Hi Aniruddha, 

Thanks for Contacting Syncfusion support. 

We can achieve your requirement by using bootstrap ScroppSpy plugin. The ScrollSpy plugin is specifically used for updating the targets based on scroll position when using bootstrap themes. If you are referring the bootstrap theme and scripts then you can render the grids in on demand basis using ScrollSpy while scrolling the page. 

Please refer the documentation link. 

Link: http://getbootstrap.com/javascript/#scrollspy 

If you rendering the grids with empty data and then bind the grid data while scrolling  , the “dataBound “event will be triggered for the corresponding grid. 

Please find the code example for trigger the databound event. 

Template  

 

 

<ej-grid . . . (dataBound)="ondataBound ($event)">  

        <e-columns>  

            <e-column field="OrderID" headerText="Order ID" width="75"textalign="right"></e-column>  

. .   

        </e-columns>  

</ej-grid>  

  

Component  

 

 

@Component({  

    . . . .   

   directives: [EJ_GRID_COMPONENTS, CORE_DIRECTIVES],  

    . . .   

})  

export class DefaultComponent {  

    . . . .  

    ondataBound (e: any){  

                    //Do something;  

    }  

}  

  

Please find the UG Link for Your reference. 

https://help.syncfusion.com/api/js/ejgrid#events:databound. 

Note : in dataBound event we get the grid id through “this._id” 

Please let us know if you need further assistance. 

Regards, 

K.Karthick.