trigger code after check renders

[Walter Cook]

I've got a ListView

 <ejs-listview id='assessment' #assessment [dataSource]='questions' [fields]='assessmentFields'

            [showCheckBox]='true' style="text-align: left;" (actionComplete)="checkAssessment()" ></ejs-listview>

I can get it to trigger upon checking the check boxes BUT the code fires before the checkbox has rendered. 
See screenshot, I've checked the box but it doesn't know it yet - the console is showing the count it thinks is checked.

How do I make it wait? 
Render check THEN execute?

Thanks

Attachment: checkedCountListIvew_849278b0.zip

[Indhumathy Loganathan]

Hi Walter,

Greetings from Syncfusion support.

The actionComplete event of the ListView component will trigger for the successful rendering or modification of the datasource. It doesn’t trigger the UI level interactions. We suspect that you want to print the checked items in the ListView for each UI interaction. You can use our select event, which will trigger for each selection, where you can retrieve the selected list item details.

You can also use the getSelectedItems method to retrieve the selected list item. Check the below sample for reference.

https://stackblitz.com/edit/angular-ckajvz-zxmvnr?file=app.component.html,app.component.ts

Please let us know if your need any further assistance.

Regards,

Indhumathy L

[Walter Cook]

When I click items I need to execute code based on the checked boxes. 
Here you will see I clicked twice.

After 1 click, the clicked count is zero.

After the 2nd click the clicked count is 1. (Why it's also pink I don't know, when I click anywhere else in the interface it then turns the expected blue.)

Therefore the code is executing before the box has finished checking.

<ejs-listview id='assessment' #assessment [dataSource]='questions' [fields]='assessmentFields'

[showCheckBox]='true' style="text-align: left;" (click)="checkAssessment()" ></ejs-listview>

checkAssessment():void{

      let selecteditem = this.assessment.getSelectedItems();

      console.log(selecteditem.data.length);

}

I was looking for some sort of afterUpdate but per the API docs that doesn't exist.
Thoughts?

Attachment: ListView2Clicks_65935ac2.zip

[Indhumathy Loganathan]

Hi Walter,

We able to reproduce the reported issue with the click event. However, we understand that you want to retrieve the selected items count, you can use our select event, which will trigger once the item selection is completed. Please check the below code snippet.

[app.component.html]

 

    <ejs-listview

      id="sample-list-flat"

      #listView

      [dataSource]="data"

      [showCheckBox]="true"

      (select)="onclickCheck()"

    ></ejs-listview>

 

[app.component.ts]

 

  selectCheck(): void {

    let selecteditem = this.listViewObj.getSelectedItems();

    console.log('From select event :' + (selecteditem.data as any).length);

  }

 

 

For your reference, we have attached the sample.

Sample : https://stackblitz.com/edit/angular-ckajvz-gysnvc?file=app.component.ts,app.component.html

API Reference: https://ej2.syncfusion.com/angular/documentation/api/list-view/#select

Please let us know if you need any further assistance.

Regards,

Indhumathy L

[Walter Cook]

Aha! "Select" not "click" is what I needed.
Thanks!

[Indhumathy Loganathan]

Hi Walter,

We are glad that your reported issue has been resolved. Please get back to us if you need any further assistance.

Regards,

Indhumathy L