Sort/Reorder Groups in ListView Component

[Spyros]

Hello. I'm using ListView component for displaying a list of items with checkboxes.

I want to show the users the items in alphabetical order and have all selected items on top.

I used the sortOrder="Ascending" property to achieve the sorting and then the groupBy: "isChecked" which is my flag.

It does group the data, although checked items (true) are shown in the bottom of the ListView while I want them on top.

Is there a way to change that and have true on top with false in bottom of the list? Maybe with groupTemplate property?

<ListViewComponent
   ref={listItemRef}
   select={args => listItemSelectHandler(args)}
   id="itemsList"
   dataSource={items}
   fields={{ id: 'id', text: 'Description', groupBy: 'isChecked' }}
   showCheckBox={true}
   sortOrder="Ascending"
/>

Thank you in advance

[Indhumathy Loganathan]

Hi Spyros, 

 

Greetings from Syncfusion support. 

 

We have prepared a React ListView sample with shared code snippet. Since you have sorted the list items in Ascending order, the items are ordered in ascending based on the groupBy text. In the below sample, we have removed the sortOrder property which will render the checked items at the top and unchecked at the bottom based on the groupBy value. 

 

https://stackblitz.com/edit/react-btnu7f?file=index.js 

 

Please check the shared sample and get back to us if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Spyros]

Dear Indumathy,

Thank you for the fast reply and provided sample code!

You are right, the sortOrder property was applied in the Group names as well, after changing it it worked as expected!

I was sure I have tried removing it before p, but I guess I did not...

Thanks again, have a great day!

[Keerthana Rajendran]

Hi Spyros, 

Most Welcome. 

We are happy to hear that the provided suggestion helped you. Please get back to us if you need any further assistance. 

Have a nice day. 

Regards, 

Keerthana R.