How to add pager to a listview?

[Nastaran]

Hi,

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

[Christopher Issac Sunder K]

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. 

Sample Link: https://codesandbox.io/s/pkjmr5pz60 

 

Thanks,
Christo 

[Nastaran]

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]

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 

Link: https://codesandbox.io/s/j4y5w49v0y 

 

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), 

https://stackblitz.com/edit/angular-ftvpmv?file=app/app.module.ts 

 

Please revert us if you require any further assistance. 

 

Thanks,
Christo 

[Nastaran]

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]

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. 

Sample Link: https://codesandbox.io/s/z390426lv3 

Please let us know if you require any further assistance. 

Thanks,
Christo