Search results

Sorting and Grouping in React ListBox component

Sorting

The ListBox supports sorting of available items in the alphabetical order that can be either ascending or descending. This can achieved using sortOrder property. Sort order can be None, Ascending or Descending.

In the following example, the SortOrder is set as Ascending.

Source
Preview
index.tsx
index.html
index.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';

export default class App extends React.Component<{}, {}> {
   private data: { [key: string]: Object }[] = [
    { "Name": "Australia", "Code": "AU" },
    { "Name": "Bermuda", "Code": "BM" },
    { "Name": "Canada", "Code": "CA" },
    { "Name": "Cameroon", "Code": "CM" },
    { "Name": "Denmark", "Code": "DK" },
    { "Name": "France", "Code": "FR" },
    { "Name": "Finland", "Code": "FI" },
    { "Name": "Germany", "Code": "DE" },
    { "Name": "Hong Kong", "Code": "HK" }
];
private fields:object = { text:"Name" };

  render() {
    return (
      <ListBoxComponent dataSource={this.data} sortOrder="Ascending" fields={this.fields}/>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = [
            { "Name": "Australia", "Code": "AU" },
            { "Name": "Bermuda", "Code": "BM" },
            { "Name": "Canada", "Code": "CA" },
            { "Name": "Cameroon", "Code": "CM" },
            { "Name": "Denmark", "Code": "DK" },
            { "Name": "France", "Code": "FR" },
            { "Name": "Finland", "Code": "FI" },
            { "Name": "Germany", "Code": "DE" },
            { "Name": "Hong Kong", "Code": "HK" }
        ];
        this.fields = { text: "Name" };
    }
    render() {
        return (<ListBoxComponent dataSource={this.data} sortOrder="Ascending" fields={this.fields}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

Grouping

The ListBox supports to wrap the nested element into a group based on its category. The category of each list item can be mapped with groupBy field in the data table.

In the following example, vegetables are grouped based on its category.

Source
Preview
index.tsx
index.html
index.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';

export default class App extends React.Component<{}, {}> {
   private data: { [key: string]: Object }[] = [
    { "Vegetable": "Cabbage", "Category": "Leafy and Salad", "Id": "item1" },
    { "Vegetable": "Spinach", "Category": "Leafy and Salad", "Id": "item2" },
    { "Vegetable": "Wheat grass", "Category": "Leafy and Salad", "Id": "item3" },
    { "Vegetable": "Yarrow", "Category": "Leafy and Salad", "Id": "item4" },
    { "Vegetable": "Pumpkins", "Category": "Leafy and Salad", "Id": "item5" },
    { "Vegetable": "Chickpea", "Category": "Beans", "Id": "item6" },
    { "Vegetable": "Green bean", "Category": "Beans", "Id": "item7" },
    { "Vegetable": "Horse gram", "Category": "Beans", "Id": "item8" },
    { "Vegetable": "Garlic", "Category": "Bulb and Stem", "Id": "item9" },
    { "Vegetable": "Nopal", "Category": "Bulb and Stem", "Id": "item10" },
    { "Vegetable": "Onion", "Category": "Bulb and Stem", "Id": "item11" }
];
private fields:object = { text:"Vegetable", groupBy:"Category", value:"Id" };

  render() {
    return (
      <ListBoxComponent dataSource={this.data} fields={this.fields}/>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = [
            { "Vegetable": "Cabbage", "Category": "Leafy and Salad", "Id": "item1" },
            { "Vegetable": "Spinach", "Category": "Leafy and Salad", "Id": "item2" },
            { "Vegetable": "Wheat grass", "Category": "Leafy and Salad", "Id": "item3" },
            { "Vegetable": "Yarrow", "Category": "Leafy and Salad", "Id": "item4" },
            { "Vegetable": "Pumpkins", "Category": "Leafy and Salad", "Id": "item5" },
            { "Vegetable": "Chickpea", "Category": "Beans", "Id": "item6" },
            { "Vegetable": "Green bean", "Category": "Beans", "Id": "item7" },
            { "Vegetable": "Horse gram", "Category": "Beans", "Id": "item8" },
            { "Vegetable": "Garlic", "Category": "Bulb and Stem", "Id": "item9" },
            { "Vegetable": "Nopal", "Category": "Bulb and Stem", "Id": "item10" },
            { "Vegetable": "Onion", "Category": "Bulb and Stem", "Id": "item11" }
        ];
        this.fields = { text: "Vegetable", groupBy: "Category", value: "Id" };
    }
    render() {
        return (<ListBoxComponent dataSource={this.data} fields={this.fields}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Contents
Contents