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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add pager to a listview?

Thread ID:

Created:

Updated:

Platform:

Replies:

144004 Apr 14,2019 03:42 AM UTC Apr 25,2019 09:15 AM UTC Angular - EJ 2 5
loading
Tags: ListView
Nastaran
Asked On April 14, 2019 03:42 AM UTC

Hi,

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

Christopher Issac Sunder K [Syncfusion]
Replied On April 15, 2019 01:00 PM UTC

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. 
 
Thanks,
Christo
 


Nastaran
Replied On April 17, 2019 03:45 AM UTC

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.

Christopher Issac Sunder K [Syncfusion]
Replied On April 17, 2019 11:22 AM UTC

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 
this.list.getSelectedItems(); 
 
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. 
 
Thanks,
Christo
 


Nastaran
Replied On April 24, 2019 08:09 AM UTC

Hi, 

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?

 

Christopher Issac Sunder K [Syncfusion]
Replied On April 25, 2019 09:15 AM UTC

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. 

Thanks,
Christo 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon