Templates in ASP.NET MVC MultiColumn Combobox control

14 Jun 202423 minutes to read

The MultiColumn ComboBox provides several template options to customize each items, groups, header and footer elements.

Item template

You can use the ItemTemplate property to customize each list item within the MultiColumn ComboBox.

@using Syncfusion.EJ2.MultiColumnComboBox;

<div id="container" style="width: 500px">
    @Html.EJS().MultiColumnComboBox("itemTemplate").DataSource((IEnumerable<object>)Model).Fields(new MultiColumnComboBoxFieldSettings
    { Text = "Name", Value = "EmpID" }).Columns(col =>
    {
        col.Field("EmpID").Header("Employee ID").Width("120").Add();
        col.Field("Name").Header("Name").Width("100").Add();
        col.Field("Designation").Header("Designation").Width("120").Add();
    }).ItemTemplate("<tr><td class ='emp-id'>${EmpID}</td><td class='name'>${Name}</td><td class ='city'>${Designation}</td></tr>").Render()
</div>

<style>
    .name, .emp-id, .city {
        border: 1px solid;
        border-color: #e0e0e0;
        padding: 2px 2px 3px 4px;
    }
</style>
public ActionResult Demo()
{
    var employees = new List<Employee>
    {
        new Employee { EmpID = 1001, Name = "Andrew Fuller", Designation = "Team Lead", Country = "England" },
        new Employee { EmpID = 1002, Name = "Robert", Designation = "Developer", Country = "USA" },
        new Employee { EmpID = 1003, Name = "Michael", Designation = "HR", Country = "Russia" },
        new Employee { EmpID = 1004, Name = "Steven Buchanan", Designation = "Product Manager", Country = "Ukraine" },
        new Employee { EmpID = 1005, Name = "Margaret Peacock", Designation = "Developer", Country = "Egypt" },
        new Employee { EmpID = 1006, Name = "Janet Leverling", Designation = "Team Lead", Country = "Africa" },
        new Employee { EmpID = 1007, Name = "Alice", Designation = "Product Manager", Country = "Australia" },
        new Employee { EmpID = 1008, Name = "Bob", Designation = "Developer", Country = "India" },
        new Employee { EmpID = 1009, Name = "John", Designation = "Product Manager", Country = "Ireland" },
        new Employee { EmpID = 1010, Name = "Mario Pontes", Designation = "Team Lead", Country = "South Africa" },
        new Employee { EmpID = 1011, Name = "Yang Wang", Designation = "Developer", Country = "Russia" },
        new Employee { EmpID = 1012, Name = "David", Designation = "Product Manager", Country = "Egypt" },
        new Employee { EmpID = 1013, Name = "Antonio Bianchi", Designation = "Team Lead", Country = "USA" },
        new Employee { EmpID = 1014, Name = "Laura", Designation = "Developer", Country = "England" },
        new Employee { EmpID = 1015, Name = "Carlos Hernandez", Designation = "Developer", Country = "Canada" },
        new Employee { EmpID = 1016, Name = "Lily", Designation = "Product Manager", Country = "France" },
        new Employee { EmpID = 1017, Name = "Tom Williams", Designation = "Developer", Country = "Ukraine" },
        new Employee { EmpID = 1018, Name = "Grace", Designation = "Developer", Country = "Australia" },
        new Employee { EmpID = 1019, Name = "Olivia", Designation = "Team Lead", Country = "Ireland" },
        new Employee { EmpID = 1020, Name = "James", Designation = "Developer", Country = "China" }
    };

    ViewBag.EmpData = employees;
    return View(ViewBag.EmpData);
}

public class Employee
{
	public int EmpID { get; set; }
	public string Name { get; set; }
	public string Designation { get; set; }
	public string Country { get; set; }
}

Item template

Header template

You can add a custom element as a header element by using the HeaderTemplate property.

@using Syncfusion.EJ2.MultiColumnComboBox;

<div id="container" style="width: 500px">
    @Html.EJS().MultiColumnComboBox("headerTemplate").DataSource((IEnumerable<object>)Model).Fields(new MultiColumnComboBoxFieldSettings
    { Text = "Name", Value = "EmpID" }).Placeholder("Select an employee").Columns(col =>
    {
        col.Field("EmpID").HeaderTemplate("<div class=\"header\"> <span>Employee ID</span> </div>").Width("90").Add();
        col.Field("Name").HeaderTemplate("<div class=\"header\"> <span>Employee Name</span> </div>").Width("160").Add();
        col.Field("Designation").HeaderTemplate("<div class=\"header\"> <span>Designation</span> </div>").Width("90").Add();
        col.Field("Country").HeaderTemplate("<div class=\"header\"> <span>Country</span> </div>").Width("80").Add();
    }).Render()
</div>
public ActionResult Demo()
{
    var employees = new List<Employee>
    {
        new Employee { EmpID = 1001, Name = "Andrew Fuller", Designation = "Team Lead", Country = "England" },
        new Employee { EmpID = 1002, Name = "Robert", Designation = "Developer", Country = "USA" },
        new Employee { EmpID = 1003, Name = "Michael", Designation = "HR", Country = "Russia" },
        new Employee { EmpID = 1004, Name = "Steven Buchanan", Designation = "Product Manager", Country = "Ukraine" },
        new Employee { EmpID = 1005, Name = "Margaret Peacock", Designation = "Developer", Country = "Egypt" },
        new Employee { EmpID = 1006, Name = "Janet Leverling", Designation = "Team Lead", Country = "Africa" },
        new Employee { EmpID = 1007, Name = "Alice", Designation = "Product Manager", Country = "Australia" },
        new Employee { EmpID = 1008, Name = "Bob", Designation = "Developer", Country = "India" },
        new Employee { EmpID = 1009, Name = "John", Designation = "Product Manager", Country = "Ireland" },
        new Employee { EmpID = 1010, Name = "Mario Pontes", Designation = "Team Lead", Country = "South Africa" },
        new Employee { EmpID = 1011, Name = "Yang Wang", Designation = "Developer", Country = "Russia" },
        new Employee { EmpID = 1012, Name = "David", Designation = "Product Manager", Country = "Egypt" },
        new Employee { EmpID = 1013, Name = "Antonio Bianchi", Designation = "Team Lead", Country = "USA" },
        new Employee { EmpID = 1014, Name = "Laura", Designation = "Developer", Country = "England" },
        new Employee { EmpID = 1015, Name = "Carlos Hernandez", Designation = "Developer", Country = "Canada" },
        new Employee { EmpID = 1016, Name = "Lily", Designation = "Product Manager", Country = "France" },
        new Employee { EmpID = 1017, Name = "Tom Williams", Designation = "Developer", Country = "Ukraine" },
        new Employee { EmpID = 1018, Name = "Grace", Designation = "Developer", Country = "Australia" },
        new Employee { EmpID = 1019, Name = "Olivia", Designation = "Team Lead", Country = "Ireland" },
        new Employee { EmpID = 1020, Name = "James", Designation = "Developer", Country = "China" }
    };

    ViewBag.EmpData = employees;
    return View(ViewBag.EmpData);
}

public class Employee
{
	public int EmpID { get; set; }
	public string Name { get; set; }
	public string Designation { get; set; }
	public string Country { get; set; }
}

Header template

Group template

You can use the GroupTemplate property to customize the group header in the popup list.

@using Syncfusion.EJ2.MultiColumnComboBox;

<div id="container" style="width: 500px">
    @Html.EJS().MultiColumnComboBox("groupTemplate").DataSource((IEnumerable<object>)Model).Fields(new MultiColumnComboBoxFieldSettings
    { Text = "CustomerID", Value = "OrderID", GroupBy= "CustomerID" }).Columns(col =>
    {
        col.Field("OrderID").Header("Order ID").Width("120").Add();
        col.Field("CustomerID").Header("Customer ID").Width("140").Add();
        col.Field("Freight").Header("Freight").Width("120").Add();
        col.Field("OrderDate").Header("Order Date").Width("140").Add();
    }).GroupTemplate("<div class=\"e-group-temp\">Key is: ${key}, Field is: ${field}, Count is: ${count}</div>").Render()
</div>
public ActionResult Demo()
{
    var orders = new List<Order>
    {
        new Order { OrderID = 10248, CustomerID = "VINET", OrderDate = new DateTime(1996, 7, 4), Freight = 32.38m },
        new Order { OrderID = 10249, CustomerID = "TOMSP", OrderDate = new DateTime(1996, 7, 5), Freight = 11.61m },
        new Order { OrderID = 10250, CustomerID = "HANAR", OrderDate = new DateTime(1996, 7, 8), Freight = 65.83m },
        new Order { OrderID = 10251, CustomerID = "VICTE", OrderDate = new DateTime(1996, 7, 8), Freight = 41.34m },
        new Order { OrderID = 10252, CustomerID = "SUPRD", OrderDate = new DateTime(1996, 7, 9), Freight = 51.3m },
        new Order { OrderID = 10253, CustomerID = "HANAR", OrderDate = new DateTime(1996, 7, 10), Freight = 58.17m },
        new Order { OrderID = 10254, CustomerID = "CHOPS", OrderDate = new DateTime(1996, 7, 11), Freight = 22.98m },
        new Order { OrderID = 10255, CustomerID = "RICSU", OrderDate = new DateTime(1996, 7, 12), Freight = 148.33m },
        new Order { OrderID = 10256, CustomerID = "WELLI", OrderDate = new DateTime(1996, 7, 15), Freight = 13.97m }
    };

    ViewBag.OrderData = orders;
    return View(ViewBag.OrderData);
}

public class Order
{
    public int OrderID { get; set; }
    public string CustomerID { get; set; }
    public DateTime OrderDate { get; set; }
    public decimal Freight { get; set; }
}

Group template

You can add a custom element as a footer element by using the FooterTemplate property.

@using Syncfusion.EJ2.MultiColumnComboBox;

<div id="container" style="width: 500px">
    @Html.EJS().MultiColumnComboBox("footertemplate").Placeholder("Select an employee").DataSource((IEnumerable<object>)Model).Fields(new MultiColumnComboBoxFieldSettings
    { Text = "Name", Value = "EmpID" }).Columns(col =>
    {
        col.Field("EmpID").Header("Employee ID").Width("90").Add();
        col.Field("Name").Header("Name").Width("90").Add();
        col.Field("Designation").Header("Designation").Width("90").Add();
        col.Field("Country").Header("Country").Width("70").Add();
    }).FooterTemplate("<span class='foot' style='font-weight: bolder; margin: 0 10px'> Total list of employees: " + 20 + "</span>").Render()
</div>
public ActionResult Demo()
{
    var employees = new List<Employee>
    {
        new Employee { EmpID = 1001, Name = "Andrew Fuller", Designation = "Team Lead", Country = "England" },
        new Employee { EmpID = 1002, Name = "Robert", Designation = "Developer", Country = "USA" },
        new Employee { EmpID = 1003, Name = "Michael", Designation = "HR", Country = "Russia" },
        new Employee { EmpID = 1004, Name = "Steven Buchanan", Designation = "Product Manager", Country = "Ukraine" },
        new Employee { EmpID = 1005, Name = "Margaret Peacock", Designation = "Developer", Country = "Egypt" },
        new Employee { EmpID = 1006, Name = "Janet Leverling", Designation = "Team Lead", Country = "Africa" },
        new Employee { EmpID = 1007, Name = "Alice", Designation = "Product Manager", Country = "Australia" },
        new Employee { EmpID = 1008, Name = "Bob", Designation = "Developer", Country = "India" },
        new Employee { EmpID = 1009, Name = "John", Designation = "Product Manager", Country = "Ireland" },
        new Employee { EmpID = 1010, Name = "Mario Pontes", Designation = "Team Lead", Country = "South Africa" },
        new Employee { EmpID = 1011, Name = "Yang Wang", Designation = "Developer", Country = "Russia" },
        new Employee { EmpID = 1012, Name = "David", Designation = "Product Manager", Country = "Egypt" },
        new Employee { EmpID = 1013, Name = "Antonio Bianchi", Designation = "Team Lead", Country = "USA" },
        new Employee { EmpID = 1014, Name = "Laura", Designation = "Developer", Country = "England" },
        new Employee { EmpID = 1015, Name = "Carlos Hernandez", Designation = "Developer", Country = "Canada" },
        new Employee { EmpID = 1016, Name = "Lily", Designation = "Product Manager", Country = "France" },
        new Employee { EmpID = 1017, Name = "Tom Williams", Designation = "Developer", Country = "Ukraine" },
        new Employee { EmpID = 1018, Name = "Grace", Designation = "Developer", Country = "Australia" },
        new Employee { EmpID = 1019, Name = "Olivia", Designation = "Team Lead", Country = "Ireland" },
        new Employee { EmpID = 1020, Name = "James", Designation = "Developer", Country = "China" }
    };

    ViewBag.EmpData = employees;
    return View(ViewBag.EmpData);
}

public class Employee
{
	public int EmpID { get; set; }
	public string Name { get; set; }
	public string Designation { get; set; }
	public string Country { get; set; }
}

Footer template

No records template

You can customize the popup list for when no data is found or no matches are found by using the NoRecordsTemplate property.

@using Syncfusion.EJ2.MultiColumnComboBox;

<div id="container" style="width: 500px">
    @Html.EJS().MultiColumnComboBox("norecordtemplate").Placeholder("Select an employee").DataSource((IEnumerable<object>)Model).Fields(new MultiColumnComboBoxFieldSettings
    { Text = "Name", Value = "EmpID" }).Columns(col =>
    {
        col.Field("EmpID").Header("Employee ID").Width("90").Add();
        col.Field("Name").Header("Name").Width("90").Add();
        col.Field("Designation").Header("Designation").Width("90").Add();
        col.Field("Country").Header("Country").Width("70").Add();
    }).NoRecordsTemplate("<span class='norecord'> NO RECORDS FOUND </span>").Render()
</div>
public ActionResult Demo()
{
    var employees = new List<Employee> {};

    ViewBag.EmpData = employees;
    return View(ViewBag.EmpData);
}

public class Employee
{
	public int EmpID { get; set; }
	public string Name { get; set; }
	public string Designation { get; set; }
	public string Country { get; set; }
}

No records template

Action failure template

There is also an option to custom design the popup list content when the data fetch request fails at the remote server. This can be achieved using the ActionFailureTemplate property.

@using Syncfusion.EJ2.MultiColumnComboBox;

<div id="container" style="width: 500px">
    @Html.EJS().MultiColumnComboBox("actionfailureTemp").Placeholder("Select the country").DataSource(obj => obj.Url("https://services.syncfusion.com/js/production/api/Order").Adaptor(
    "WebApiAdaptor").CrossDomain(true)).Fields(new MultiColumnComboBoxFieldSettings { Text = "ShipCountry", Value = "CustomerID" }).Columns(col =>
    {
        col.Field("OrderID").Header("Order ID").TextAlign(TextAlign.Right).Width("120").Add();
        col.Field("CustomerID").Header("Customer ID").Width("130").Add();
        col.Field("ShipCountry").Header("Ship Country").Width("120").Add();
    }).ActionFailureTemplate("<span class='action-failure'> Data fetch get fails</span>").PopupHeight("230px").Render()
</div>
public ActionResult Demo()
{
    return View();
}

Action failure template