---
title: "Top 5 Features of ASP.NET Core ListBox"
published_at: "2019-12-31T12:00:52+00:00"
modified_at: "2024-11-20T13:33:27+00:00"
url: "https://www.syncfusion.com/blogs/post/top-5-features-of-asp-net-core-listbox"
excerpt: "The Syncfusion ASP.NET Core Listbox is a feature-rich control that provides great functionalities rather than just displaying a list of items. It allows users to select one or more items using check boxes, with a mouse or through keyboard interactions...."
taxonomy_category:
  - "ASP.NET Core"
taxonomy_post_tag:
  - "ASP.NET Core"
  - "Filtering data"
  - "Grouping"
  - "listbox"
  - "sorting"
---

# Top 5 Features of ASP.NET Core ListBox

[Satheeskumar S](https://www.syncfusion.com/blogs/author/satheeskumars)

![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2019/12/Top-5-features-of-ASP.NET-Core-Listbox.png)


The [Syncfusion ASP.NET Core Listbox](https://www.syncfusion.com/aspnet-core-ui-controls/listbox)
 is a feature-rich control that provides great functionalities rather than just displaying a list of items. It allows users to select one or more items using check boxes, with a mouse or through keyboard interactions. It can be populated using an array of strings or an array of objects. In this blog, I am going to walk you through five major features of the Listbox control:

- Drag and drop
- Grouping
- Sorting
- Filtering
- Templating

## Drag and drop

The ASP.NET Core Listbox provides an option to drag an item or a group of items and drop them within a **single** list box or among ** multiple** list boxes. With this feature, multiple list boxes are mapped using the ** scope** property, in which the values are the same.

You can also reorder items within a **single** list box or among ** multiple** list boxes through keyboard interactions or using the toolbar. You can enable the toolbar by specifying the ** toolbarSettings** property with the following options.

| Options | Descriptions |
| --- | --- |
| moveUp | Moves the selected item upwards within the Listbox. |
| moveDown | Moves the selected item downwards within the Listbox. |
| moveTo | Moves the selected item from a source Listbox to a destination Listbox. |
| moveFrom | Moves the selected item from a destination Listbox to a source Listbox. |
| moveAllTo | Moves all the items from a source Listbox to a destination Listbox. |
| moveAllFrom | Moves all the items from a destination Listbox to a source Listbox. |

![Drag and drop ASP.NET Core listbox](https://www.syncfusion.com/blogs/wp-content/uploads/2019/12/Drag-and-drop-ASP.NET-Core-listbox.gif)

## Grouping

The ASP.NET Core Listbox control lets you wrap a nested element into a group based on its category. The category of each list item can be mapped with the [groupBy](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.ListBoxFieldSettings.html#Syncfusion_EJ2_DropDowns_ListBoxFieldSettings_GroupBy)
 field in the data table. The control creates headers for every group; they are for representational purposes only. They cannot be selected using a mouse or keyboard and are not bound to any data item.

The following code example demonstrates how to group a nested element.

```
<ejs-listbox id="listbox" dataSource="ViewBag.vegetableData">
        <e-listbox-fields groupBy="Category" text="Vegetable" value="Id"></e-listbox-fields>
</ejs-listbox>
```

```
public IActionResult grouping() {
  List<object> Data = new List<object> {
    new { Vegetable = "Cabbage", Category = "Leafy Greens", Id = "item1" },
    new { Vegetable = "Spinach", Category = "Leafy Greens", Id = "item2" },
    new { Vegetable = "Wheat grass", Category = "Leafy Greens", Id = "item3" },
    new { Vegetable = "Chickpea", Category = "Beans", Id = "item6" },
    new { Vegetable = "Green bean", Category = "Beans", Id = "item7" },
    new { Vegetable = "Horse gram", Category = "Beans", Id = "item8" },
    new { Vegetable = "Garlic", Category = "Bulb and Stem", Id = "item9" },
    new { Vegetable = "Nopal", Category = "Bulb and Stem", Id = "item10" },
    new { Vegetable = "Onion", Category = "Bulb and Stem", Id = "item11" }
  };
  ViewBag.vegetableData = Data;
  return View();
}
```

The following screenshot showcases grouping in Listbox.![Grouping in ASP.NET Core Listbox](https://www.syncfusion.com/blogs/wp-content/uploads/2019/12/Grouping-in-ASP.NET-Core-Listbox-1.png)

## Sorting

In the ASP.NET Core Listbox control, you can sort items using the **sortOrder** property. You can use this property to sort both alphabetically and numerically. This property can be set to None, Ascending, or Descending, and the default value is None.

The following code snippet demonstrates how to sort items in descending order.

```
<ejs-listbox id="listbox" dataSource="ViewBag.vegetableData" sortOrder=”Descending”>
</ejs-listbox>
```

The following screenshot shows sorting in Listbox in descending order.![Sorting in ASP.NET Core Listbox](https://www.syncfusion.com/blogs/wp-content/uploads/2019/12/Sorting-in-ASP.NET-Core-Listbox-1.png)

## Filtering

In the ASP.NET Core Listbox control, you can enable filtering by specifying the **allowFiltering** property**.** The filtering can be performed using the **filterType** property or ** filtering** event. The ** filterType** property is used to specify the type of filtering, such as ** startswith**, ** endswith**, and ** contains**, which perform filtering and display the result in the list box. The ** filtering** event is used to perform custom filtering through the ** updateData** method.

The following code example showcases filtering.

```
<ejs-listbox id="listbox" dataSource="ViewBag.vegetableData" allowFiltering="true" filtering="onfiltering">
</ejs-listbox>
<script>
    function onfiltering(e) {
        var query = new ej.data.Query();
        query = (e.text !== '') ? query.where('Name', 'startswith', e.text, true) : query;
        e.updateData(@Html.Raw(JsonConvert.SerializeObject(ViewBag.data)), query);
    }
</script>
```

![Filtering in ASP.NET Core listbox](https://www.syncfusion.com/blogs/wp-content/uploads/2019/12/Filtering-in-ASP.NET-Core-listbox.gif)

## Templating

To provide flexibility, the ASP.NET Core Listbox offers template support. Users can render a custom user interface to display data items using the **itemTemplate** property. A template can include a mixture of static HTML and web controls.

The following code example shows templating.**Note**: The images were referenced from the ** wwwroot** folder of the corresponding project.

```
<ejs-listbox id="listbox" dataSource="ViewBag.employeeData" itemTemplate= '<div><img class="e-img" src="../Employees/${Image}.png" alt="employee"/> <div class="e-name"> Name: ${Text} </div></div>'
<e-listbox-fields groupBy="Country" text="Text"></e-listbox-fields>
</ejs-listbox>
<style>
      .e-name {
            font-weight: bold;
            padding: 0 10px 10px;
        }
        .e-img {
            padding: 10px 10px;
        }
</style>
```

```
public IActionResult Index()  {
        List<object> Data = new List<object>{
                new { Text="Mona Sak", Image="1", Country="USA"},
                new { Text="Evie Nowak", Image="2", Country="USA" },
                new { Text="Britney Linden", Image="3", Country="ENGLAND" },
                new { Text="Jessica Bisset", Image="4", Country="ENGLAND" },
                new { Text="Gwen Brown", Image="5", Country="USA" }
         };
         ViewBag.employeeData = Data;
         return View();
}
```

**Note:** The images were referenced from the ** wwwroot** folder of the corresponding project.

The following screenshot showcases the custom user interface in Listbox.![Templating in ASP.NET Core Listbox](https://www.syncfusion.com/blogs/wp-content/uploads/2019/12/Templating-in-ASP.NET-Core-Listbox-1.png)

## Conclusion

I hope you now have a better understanding of the major features supported by the [ASP.NET Core Listbox](https://www.syncfusion.com/aspnet-core-ui-controls/listbox)
 control. What else do you expect from a list box? Please share your thoughts in the comments section.

If you’re already a Syncfusion user, you can download Essential Studio® for ASP.NET Core’s [product setup](https://www.syncfusion.com/account/downloads)
 to try out this control. Otherwise, you can download a free [30-day trial](https://www.syncfusion.com/downloads/fileformats/confirm)
.

If you have any questions about these features, please contact us through our [Support Forum](https://www.syncfusion.com/forums)
, [Direct-Trac](https://www.syncfusion.com/support/directtrac/)
, or [Feedback Portal](https://www.syncfusion.com/feedback/aspnet-core)
. We are happy to assist you!