ListBox
Grouping
This sample shows how to show group items of the ListBox control.
Features
ListBox Grouping
Use the showGroups property to add group headers to ListBox controls.
Group header items are added if the showGroups property is set to true and the itemsSource collection has grouping enabled.
Header items are presentational only. They cannot be selected with the mouse or keyboard and are not bound to any data items.
France
Vins et alcools Chevalier
Victuailles en stock
Blondel père et fils
Germany
Toms Spezialitäten
Ottilies Käseladen
Frankenversand
Brazil
Hanari Carnes
Hanari Carnes
Wellington Importadora
Que Delícia
Belgium
Suprêmes délices
Switzerland
Chop-suey Chinese
Richter Supermarkt
Venezuela
HILARIÓN-Abastos
Austria
Ernst Handel
Ernst Handel
Mexico
Centro comercial Moctezuma
USA
Rattlesnake Canyon Grocery
Sweden
Folk och fä HB
Finland
Wartian Herkku
Description
This sample shows how to show group items of the ListBox control.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class ListBoxController : Controller { // GET: /<controller>/ public ActionResult Grouping() { return View(_db.Orders.Take(20).ToList()); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | @model List< Order > < div > < h2 > @Html .Raw(ListBoxRes.Grouping_Text0) </ h2 > < p > @Html .Raw(ListBoxRes.Grouping_Text1) </ p > < p > @Html .Raw(ListBoxRes.Grouping_Text2) </ p > < p > @Html .Raw(ListBoxRes.Grouping_Text3) </ p > </ div > < div > < c1-list-box display-member-path = "ShipName" style = "height:200px; width:250px" show-groups = "true" > < c1-items-source source-collection = "@Model" group-by = "ShipCountry" ></ c1-items-source > </ c1-list-box > </ div > @section Description{ @Html .Raw(ListBoxRes.Grouping_Text4) } |