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

How to add pager to a listview?


is it possible to add pager to a listview with a lot of rows? How can I do it?

5 Replies

CI Christopher Issac Sunder K Syncfusion Team April 15, 2019 08:00 AM

Hi Nastaran, 
Greetings from Syncfusion support!!! 
We have analyzed your query. There is no native support for paging in listview. But we can achieve this concept by using pager control. 
There are 2 key points in this method to be noted. 
1.We will retrieve the data based on the pager’s current page using data manager’s page method. 
2.We need to assign the filtered data back to the listview to modify the content in listview. 
We have created a sample for achieving paging concept in listview. 

NA Nastaran April 16, 2019 10:45 PM

Hi. thanks very much. It worked.

I have another question for Listview. How can I have access to each item of the list by ViewChildren? because I'm using the listview as a list of notifications or emails and I want to make it like the email list in Gmail. like when I select each item I can change the background color if that item or when I hover on it I can show the action button so I have to have access to each item. 
thanks in advance.

and also Can I have the full code of this example  I can't find the code for clicking on the post and see the complete post.

CI Christopher Issac Sunder K Syncfusion Team April 17, 2019 06:22 AM

Hi Nastaran, 
Good day to you. Glad to hear that the solution worked for you.  
We have analyzed your query. When you are assigning the async data to listview, you need to re-calculate and assign the data to listview. That is helping to resolve the first page data rendering issue. 
dataService.getdata().subscribe(data => { 
    this.data = data; 
    this.result = this.getPagerData(1); 
You can access the listview instance by using ViewChild property. 
<ejs-listview #listview> </ejs-listview> 
@ViewChild("listview") list: any; 
//calling method using listview instance 
You can bind select event in the listview component, the select event is triggered whenever you select the item . 
<ejs-listview #listview id="list" (select)="onClick($event)"></ej2-listview> 
You can change the styles of the element by using mouse event 
We have created a sample based on your requirement. Please refer the online sample link given below 
Regarding the source code for the our dashboard demo sample, you can get the code by choosing the source tab in the inner top panel where you can find all the code blocks. Also, we prepared the same sample in the below live sample link (you can get the code from here too), 
Please revert us if you require any further assistance. 

NA Nastaran April 24, 2019 03:09 AM


thanks again.
I have another problem now. I'm using nested lists so I can show the text of the message when I click on a list item. but in my tenplate for list item I have checkboxs and buttons. and when I click on these element for the first time it shows the content of the item. and in the second click it works alright. I used the stopPropagation() method like it's used in this example. this example has this problem too. when you click on one of the buttons it shows the content and next times it doesn't.
is there any way I can fix this?


CI Christopher Issac Sunder K Syncfusion Team April 25, 2019 04:15 AM

Hi Nastaran, 

Thanks for the update. 

We can achieve your requirement by calling stopPropagation() method inside the click event. Instead of binding click event in actionComplete event, we can directly bind click event in angular template. 

Please refer the below online sample. 

Please let us know if you require any further assistance. 


Live Chat Icon For mobile
Up arrow icon