How to sort the list data with the help of DataMananger in JavaScript ListView?
In JavaScript ListView component we have property sortOder to sort the list item. Also we can sort the data with the help of dataManager by passing sorting arguments to the sortBy method of Query property.
After sorting data, bind the sorted data to ListView and render the ListView with Grouping and Sorting.
Refer the below code snippet to sort the data.
var sorting = 'Descending'; // Sort the data var data = new ej.data.DataManager({ url: 'https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Customers/?$top=10', crossDomain: true }).executeQuery(new ej.data.Query().sortBy('ContactName', sorting)).then((e)=> { (e.result).forEach((data) => { listObj.dataSource = e.result; // Bind Sorted data to ListView }); listObj.dataBind(); });
//Initialize ListView component var listObj = new ej.lists.ListView({
//map the appropriate columns to fields property fields: { id: 'CustomerID', text: 'ContactName', groupBy: 'ContactTitle', sortBy: 'ContactName' }, // grouping and sorting by text //set the header tittle for the list headerTitle: 'Product Name', showHeader: true, sortOrder: sorting });
//Render initialized ListView component listObj.appendTo('#listview');
|
In above ListView is grouped with the help of groupBy property of fields property.
Refer to the below sample link.
Conclusion
I hope you enjoyed learning about how to sort the list data with the help of DataManagers in JavaScript ListView.
You can refer to our JavaScript ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript ListView example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
