We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Load Grid On Scroll

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?


1 Reply

KK Karthick Kuppusamy Syncfusion Team November 4, 2016 11:49 AM UTC

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. 

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. 

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

Please let us know if you need further assistance. 

Regards, 
K.Karthick. 


Loader.
Up arrow icon