Multiple Column Pull Down Menu

Question

How do I program the pull down menu below to display multiple columns?

---

GitHub: https://github.com/DeanEverhart/ContosoUniversity1

Tutorial: https://learn.microsoft.com/en-us/aspnet/core/data/ef-mvc/intro?view=aspnetcore-6.0

Environment: Net Core 6, Visual Studio Community 2022 (64 bit), WIndows 11

---

Answer 1

Hi @Dean Everhart ,

Would you like to display a multi-column dropdown like this:

You can use ejs-combobox to achieve it.

Since the GitHub link you provided can't be found anymore, I made a simple example, you can refer to it.

First, install Newtonsoft.Json and Syncfusion.EJ2.AspNet.Core Nuget package.

Second, add tag helper of Syncfusion.EJ2 in _ViewImports.cshtml:

@addTagHelper *, Syncfusion.EJ2

And then add ejs tag container in _Layout.cshtml:

<div class="container">
    <main role="main" class="pb-3">
        @RenderBody()
    </main>
    @*add this line*@
    <ejs-scripts></ejs-scripts>
</div>

Third, I have a Compony model as viewmodel and a Employee model as selectlist:

public class Company
{
    public string Name { get; set; }
    public int EmployeeID { get; set; }
}
public class Employee
{
    public string FirstName { get; set; }
    public string EmployeeID { get; set; }
    public string Designation { get; set; }
    public string Country { get; set; }
}

And my Create method in controller:

public IActionResult Create()
{
    List<Employee> emp = new List<Employee>();
    emp.Add(new Employee { FirstName = "Andrew Fuller", EmployeeID = "1", Designation = "Team Lead", Country = "England" });
    emp.Add(new Employee { FirstName = "Anne Dodsworth", EmployeeID = "2", Designation = "Developer", Country = "USA" });
    emp.Add(new Employee { FirstName = "Janet Leverling", EmployeeID = "3", Designation = "HR", Country = "USA" });
    emp.Add(new Employee { FirstName = "Laura Callahan", EmployeeID = "4", Designation = "Product Manager", Country = "USA" });
    emp.Add(new Employee { FirstName = "Margaret Peacock", EmployeeID = "5", Designation = "Developer", Country = "USA" });
    emp.Add(new Employee { FirstName = "Michael Suyama", EmployeeID = "6", Designation = "Team Lead", Country = "USA" });
    emp.Add(new Employee { FirstName = "Nancy Davolio", EmployeeID = "7", Designation = "Product Manager", Country = "USA" });
    emp.Add(new Employee { FirstName = "Robert King", EmployeeID = "8", Designation = "Developer ", Country = "England" });
    emp.Add(new Employee { FirstName = "Steven Buchanan", EmployeeID = "9", Designation = "CEO", Country = "England" });
    ViewData["emp"] = emp;
    //
    return View();
}

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Company company)
{
    if (ModelState.IsValid)
    {
        //do something
    }
    //do something
}

Fourth, use ejs-combobox in Create.cshtml (Don't forget to quote the corresponding Css and Js file):

@model ProjectName.Models.Company
@using Syncfusion.EJ2;
@using Newtonsoft.Json;

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/21.1.35/fluent.css" />
<div class="col-lg-12 control-section">
    <div class="control-wrapper">
        <div style='padding-top:70px;'>
            <form asp-action="Create" method="post">
                <div class="form-group">
                    <label asp-for="Name" class="control-label"></label>
                    <input asp-for="Name" class="form-control" />
                </div>
                <div class="form-group">
                    <label asp-for="EmployeeID" class="control-label"></label>
                    <ejs-combobox id="EmployeeID" open="isCheckScroll" dataBound="isCheckScroll" dataSource="@ViewData["emp"]" cssClass="e-multi-column" filtering="onfiltering" allowFiltering="true" placeholder="Select an employee" popupHeight="400px"
                                  headerTemplate="@Html.Raw("<table><tr><th class=\"e-text-center\" style=\"width: 75px;\">Emp ID</th><th>First Name</th><th>Designation</th></tr></table>")"
                                  itemTemplate="@Html.Raw("<table><tbody><tr><td class=\"e-text-center\" style=\"width: 75px;\">${EmployeeID}</td><td>${FirstName}</td><td>${Designation}</td></tr> </tbody></table>")">
                        <e-combobox-fields text="FirstName" value="EmployeeID"></e-combobox-fields>
                    </ejs-combobox>
                </div>
                <div class="form-group">
                    <input type="submit" value="Create" class="btn btn-primary" />
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js"></script>
<script type="text/javascript">
    function onfiltering(e) {
        var query = new ej.data.Query().select(['FirstName', 'EmployeeID', 'Designation']);
        var predicateQuery = query.where(new ej.data.Predicate('FirstName', 'contains', e.text, true).or('Designation', 'contains', e.text, true));
        query = (e.text !== '') ? predicateQuery : query;
        e.updateData(@Html.Raw(JsonConvert.SerializeObject(@ViewData["emp"])), query);
        isCheckScroll.call(this);
    }
    function isCheckScroll() {
        if (this.popupObj && this.popupObj.element && this.liCollections.length > 0) {
            var offsetHeight = this.popupObj.element.querySelector('.e-content').offsetHeight;
            var contentHight = (offsetHeight < this.liCollections[0].offsetHeight * this.liCollections.length);
            (contentHight || offsetHeight === 0) ? this.popupObj.element.classList.add('e-scroller') : this.popupObj.element.classList.remove('e-scroller');
        }
    }
</script>

Test Result:

Of course, if you want to use it long term, this control requires a Syncfusion License key. You can create an account and use the Free Community License:

And then use this way to Register Syncfusion License key:

Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("Your License Key");

For more details, you can refer to this link: Getting Started with ASP.NET Core ComboBox Control.

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,

Chen Li