How to sort the list data with the help of DataMananger in JavaScript ListView?

This article explains how to sort the list data with the help of DataManager in JavaScript ListView.

In JavaScript ListView component, we have property sortOder to sort the list items. Also, we can sort the data with the help of dataManager by passing sorting arguments to the sortBy method of Query property.

After sorting the data, bind the sorted data to the ListView and render the ListView with grouping and sorting.

Refer to 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');