Hi Fauwad,
Greetings from Syncfusion support.
Based on the details in the output screenshot, we understand
that you want to display the sorted checked and unchecked items in the Angular
ListView component. Currently, we do not have direct support to meet this
requirement.
However, we have prepared a customized sample based on your
needs. In this sample, we have filtered and sorted the checked and unchecked
list items individually and appended them to the ListView datasource after
concatenating the list items inside a button click event.
Additionally, we have also handled dynamic check and uncheck
actions. When you dynamically check or uncheck the list items and then click
the button, you will get the sorted checked and unchecked list items in the
ListView component.
For your reference, we have included the customized sample
and code snippets.
Sample : https://stackblitz.com/edit/angular-fmn9pq-uws3fc?file=src%2Fapp.component.ts
|
[app.component.html]
<button (click)="onClick($event)">GetList</button>
<div id="flat-list">
<ejs-listview
#list
id="sample-list"
(select)="onSelect($event)"
[dataSource]="data"
[fields]="fields"
[showCheckBox]="true"
></ejs-listview>
</div>
<style>
#flat-list{
display:none;
}
</style>
[app.component.ts]
onClick() {
const sortedData = this.data
.sort((a, b) => a.isChecked - b.isChecked || a.text.localeCompare(b.text)) // Sort by
isChecked and then text
.filter((item) => item.isChecked) // Filter items
with isChecked true
.concat(
this.data
.sort(
(a, b) => a.isChecked - b.isChecked || a.text.localeCompare(b.text)
) // Sort by isChecked and then text
.filter((item) => !item.isChecked) // Filter items with isChecked false
);
this.listObj.dataSource = sortedData;
this.listObj.refresh();
document.getElementById('flat-list').style.display = 'block';
}
onSelect(args) {
if (args.data.isChecked == false) {
args.data.isChecked = true;
} else {
args.data.isChecked = false;
}
}
|
Regards,
Leo Lavanya Dhanaraj
