sorting and grouping

2 Mar 20224 minutes to read

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 Descending.

CSHTML

<ejs-listbox id="listbox" dataSource="@ViewBag.data" sortOrder="@ViewBag.value">
</ejs-listbox>

Sorting.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class ListBoxController : Controller
    {
        public IActionResult sorting()
        {
            ViewBag.data = new string[] { "Austrlia", "Bermuda", "Canada", "Cameroon", "Denmark", "France", "Finland", "Germany", "Hong kong" };
            ViewBag.value = "Descending";
            return View();
        }
    }
}

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.

CSHTML

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

Grouping.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class ListBoxController : Controller
    {
        public IActionResult grouping()
        {
            List<object> Data = new List<object> {
            new { Vegetable = "Cabbage", Category = "Leafy and Salad", Id = "item1" },
            new { Vegetable = "Spinach", Category = "Leafy and Salad", Id = "item2" },
            new { Vegetable = "Wheat grass", Category = "Leafy and Salad", Id = "item3" },
            new { Vegetable = "Yarrow", Category = "Leafy and Salad", Id = "item4" },
            new { Vegetable = "Pumpkins", Category = "Leafy and Salad", Id = "item5" },
            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.data = Data;
            return View();
        }
    }
}