diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/checkbox/checkbox.cs b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/checkbox/checkbox.cs new file mode 100644 index 0000000000..6a52a05710 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/checkbox/checkbox.cs @@ -0,0 +1,37 @@ +public ActionResult Demo() +{ + var employees = new List + { + 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; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/checkbox/razor b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/checkbox/razor new file mode 100644 index 0000000000..52ed60b4c7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/checkbox/razor @@ -0,0 +1,12 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ @Html.EJS().MultiColumnComboBox("checkbox").DataSource((IEnumerable)Model).Fields(new MultiColumnComboBoxFieldSettings + { Text = "Name", Value = "EmpID", GroupBy="Country" }).Columns(col => + { + col.Field("EmpID").Header("Employee ID").DisplayAsCheckBox(true).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(); + }).Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/checkbox/tagHelper b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/checkbox/tagHelper new file mode 100644 index 0000000000..b7459dc971 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/checkbox/tagHelper @@ -0,0 +1,13 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ + + + + + + + + +
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/customattribute/customattribute.cs b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/customattribute/customattribute.cs new file mode 100644 index 0000000000..6a52a05710 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/customattribute/customattribute.cs @@ -0,0 +1,37 @@ +public ActionResult Demo() +{ + var employees = new List + { + 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; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/customattribute/razor b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/customattribute/razor new file mode 100644 index 0000000000..06c53a0a0c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/customattribute/razor @@ -0,0 +1,12 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ @Html.EJS().MultiColumnComboBox("attributes").DataSource((IEnumerable)Model).Fields(new MultiColumnComboBoxFieldSettings + { Text = "Name", Value = "EmpID" }).Columns(col => + { + col.Field("EmpID").Header("Employee ID").Width("90").CustomAttributes((new Dictionary { { "class", "e-custom-multicolumn" } })).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(); + }).Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/customattribute/tagHelper b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/customattribute/tagHelper new file mode 100644 index 0000000000..fa0991ffcf --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/customattribute/tagHelper @@ -0,0 +1,13 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ + + + + + + + + +
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/localization/localization.cs b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/localization/localization.cs new file mode 100644 index 0000000000..e3d2cd7e12 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/localization/localization.cs @@ -0,0 +1,12 @@ +public ActionResult Demo() +{ + var employees = new List{ }; + ViewBag.EmpData = employees; + return View(ViewBag.EmpData); +} + +public class Employee +{ + public int ContactName { get; set; } + public string CustomerID { get; set; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/localization/razor b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/localization/razor new file mode 100644 index 0000000000..289acf2685 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/localization/razor @@ -0,0 +1,19 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ @Html.EJS().MultiColumnComboBox("localization").Locale("fr-BE").Placeholder("Sélectionnez un client").DataSource((IEnumerable)Model).Columns(col => + { + col.Field("ContactName").Header("Contact Name").Width("90").Add(); + col.Field("CustomerID").Header("Customer ID").Width("90").Add(); + }).Render() + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/localization/tagHelper b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/localization/tagHelper new file mode 100644 index 0000000000..e93b79742e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/localization/tagHelper @@ -0,0 +1,20 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ + + + + + +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/template/razor b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/template/razor new file mode 100644 index 0000000000..87b1f06833 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/template/razor @@ -0,0 +1,12 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ @Html.EJS().MultiColumnComboBox("template").CssClass("multicolumn-customize").Placeholder("Select an employee").Fields(new MultiColumnComboBoxFieldSettings + { Text = "Name", Value = "Eimg" }).Columns(col => + { + col.Field("Eimg").Header("Photos").Width("90").Template("
\"employee\"/
").Add(); + col.Field("Name").Header("Employee Name").Width("160").Template("
${Name}
${Designation}
").Add(); + col.Field("DateofJoining").Header("Date Of Joining").Width("165").Template("
${DateofJoining}
").Add(); + col.Field("Country").Header("Country").Width("100").Template("
${Country}
").Add(); + }).DataSource((IEnumerable)Model).PopupHeight("230px").GridSettings(new MultiColumnComboBoxGridSettings { RowHeight = 40 }).Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/template/tagHelper b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/template/tagHelper new file mode 100644 index 0000000000..7386d450c0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/template/tagHelper @@ -0,0 +1,15 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ + + + + + + + + + +
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/template/template.cs b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/template/template.cs new file mode 100644 index 0000000000..2cfd9c16a9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/template/template.cs @@ -0,0 +1,26 @@ +public ActionResult Demo() +{ + var employees = new List + { + new EmployeeList { Name = "Andrew Fuller", Eimg = 7, Designation = "Team Lead", Country = "England", DateofJoining = "2010/12/10" }, + new EmployeeList { Name = "Anne Dodsworth", Eimg = 1, Designation = "Developer", Country = "USA", DateofJoining = "2000/10/05" }, + new EmployeeList { Name = "Janet Leverling", Eimg = 3, Designation = "HR", Country = "Russia", DateofJoining = "2016/02/23" }, + new EmployeeList { Name = "Laura Callahan", Eimg = 2, Designation = "Product Manager", Country = "Ukraine", DateofJoining = "2012/01/30" }, + new EmployeeList { Name = "Margaret Peacock", Eimg = 6, Designation = "Developer", Country = "Egypt", DateofJoining = "2014/08/15" }, + new EmployeeList { Name = "Michael Suyama", Eimg = 9, Designation = "Team Lead", Country = "Africa", DateofJoining = "2015/07/27" }, + new EmployeeList { Name = "Nancy Davolio", Eimg = 4, Designation = "Product Manager", Country = "Australia", DateofJoining = "2017/05/24" }, + new EmployeeList { Name = "Robert King", Eimg = 8, Designation = "Developer", Country = "India", DateofJoining = "2018/09/08" }, + new EmployeeList { Name = "Steven Buchanan", Eimg = 10, Designation = "CEO", Country = "Ireland", DateofJoining = "2020/03/05" } + }; + ViewBag.EmpData = employees; + return View(ViewBag.EmpData); +} + +public class EmployeeList +{ + public string Name { get; set; } + public int Eimg { get; set; } + public string Designation { get; set; } + public string Country { get; set; } + public string DateofJoining { get; set; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/actionfailuretemplate/actionfailuretemplate.cs b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/actionfailuretemplate/actionfailuretemplate.cs new file mode 100644 index 0000000000..7a5dcc0f6a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/actionfailuretemplate/actionfailuretemplate.cs @@ -0,0 +1,4 @@ +public ActionResult Demo() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/actionfailuretemplate/razor b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/actionfailuretemplate/razor new file mode 100644 index 0000000000..dae0105226 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/actionfailuretemplate/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ @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(" Data fetch get fails").PopupHeight("230px").Render() +
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/actionfailuretemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/actionfailuretemplate/tagHelper new file mode 100644 index 0000000000..191e4a2ae0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/actionfailuretemplate/tagHelper @@ -0,0 +1,13 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ Data fetch get fails")"> + + + + + + + + +
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/footertemplate/footertemplate.cs b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/footertemplate/footertemplate.cs new file mode 100644 index 0000000000..6a52a05710 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/footertemplate/footertemplate.cs @@ -0,0 +1,37 @@ +public ActionResult Demo() +{ + var employees = new List + { + 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; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/footertemplate/razor b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/footertemplate/razor new file mode 100644 index 0000000000..1b579a9f8f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/footertemplate/razor @@ -0,0 +1,12 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ @Html.EJS().MultiColumnComboBox("footertemplate").Placeholder("Select an employee").DataSource((IEnumerable)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(" Total list of employees: " + 20 + "").Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/footertemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/footertemplate/tagHelper new file mode 100644 index 0000000000..aff83d0a06 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/footertemplate/tagHelper @@ -0,0 +1,13 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ Total list of employees: " + 20 + "")"> + + + + + + + + +
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/grouptemplate/grouptemplate.cs b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/grouptemplate/grouptemplate.cs new file mode 100644 index 0000000000..349d0cf9ad --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/grouptemplate/grouptemplate.cs @@ -0,0 +1,26 @@ +public ActionResult Demo() +{ + var orders = new List + { + 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; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/grouptemplate/razor b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/grouptemplate/razor new file mode 100644 index 0000000000..6f21d564c5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/grouptemplate/razor @@ -0,0 +1,12 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ @Html.EJS().MultiColumnComboBox("groupTemplate").DataSource((IEnumerable)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("
Key is: ${key}, Field is: ${field}, Count is: ${count}
").Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/grouptemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/grouptemplate/tagHelper new file mode 100644 index 0000000000..556e4439c6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/grouptemplate/tagHelper @@ -0,0 +1,13 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ + + + + + + + + +
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/headertemplate/headertemplate.cs b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/headertemplate/headertemplate.cs new file mode 100644 index 0000000000..6a52a05710 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/headertemplate/headertemplate.cs @@ -0,0 +1,37 @@ +public ActionResult Demo() +{ + var employees = new List + { + 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; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/headertemplate/razor b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/headertemplate/razor new file mode 100644 index 0000000000..6a7a15023d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/headertemplate/razor @@ -0,0 +1,12 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ @Html.EJS().MultiColumnComboBox("headerTemplate").DataSource((IEnumerable)Model).Fields(new MultiColumnComboBoxFieldSettings + { Text = "Name", Value = "EmpID" }).Placeholder("Select an employee").Columns(col => + { + col.Field("EmpID").HeaderTemplate("
Employee ID
").Width("90").Add(); + col.Field("Name").HeaderTemplate("
Employee Name
").Width("160").Add(); + col.Field("Designation").HeaderTemplate("
Designation
").Width("90").Add(); + col.Field("Country").HeaderTemplate("
Country
").Width("80").Add(); + }).Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/headertemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/headertemplate/tagHelper new file mode 100644 index 0000000000..5b2c8e1f09 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/headertemplate/tagHelper @@ -0,0 +1,13 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ + + + + + + + + +
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/itemtemplate/itemtemplate.cs b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/itemtemplate/itemtemplate.cs new file mode 100644 index 0000000000..6a52a05710 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/itemtemplate/itemtemplate.cs @@ -0,0 +1,37 @@ +public ActionResult Demo() +{ + var employees = new List + { + 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; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/itemtemplate/razor b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/itemtemplate/razor new file mode 100644 index 0000000000..c98a9e566b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/itemtemplate/razor @@ -0,0 +1,19 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ @Html.EJS().MultiColumnComboBox("itemTemplate").DataSource((IEnumerable)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("${EmpID}${Name}${Designation}").Render() + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/itemtemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/itemtemplate/tagHelper new file mode 100644 index 0000000000..166dc4925c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/itemtemplate/tagHelper @@ -0,0 +1,20 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ + + + + + + + +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/norecordtemplate/norecordtemplate.cs b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/norecordtemplate/norecordtemplate.cs new file mode 100644 index 0000000000..1a6606b0e4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/norecordtemplate/norecordtemplate.cs @@ -0,0 +1,15 @@ +public ActionResult Demo() +{ + var employees = new List {}; + + 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 newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/norecordtemplate/razor b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/norecordtemplate/razor new file mode 100644 index 0000000000..f3231b5bcb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/norecordtemplate/razor @@ -0,0 +1,12 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ @Html.EJS().MultiColumnComboBox("norecordtemplate").Placeholder("Select an employee").DataSource((IEnumerable)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(" NO RECORDS FOUND ").Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/norecordtemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/norecordtemplate/tagHelper new file mode 100644 index 0000000000..1672aaae9c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/norecordtemplate/tagHelper @@ -0,0 +1,13 @@ +@using Syncfusion.EJ2.MultiColumnComboBox; + +
+ NO RECORDS FOUND ")"> + + + + + + + + +
\ No newline at end of file diff --git a/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.MVC/columns.md b/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.MVC/columns.md index 0e98407ec3..f82a03ce24 100644 --- a/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.MVC/columns.md +++ b/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.MVC/columns.md @@ -10,17 +10,19 @@ documentation: ug # Columns in ##Platform_Name## MultiColumn Combobox control -The [Columns](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.MultiColumnComboBox.MultiColumnComboBox.html#Syncfusion_EJ2_MultiColumnComboBox_MultiColumnComboBox_Columns) property allow you to define what data fields is to be displayed in the MultiColumn ComboBox. +The [Columns](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.MultiColumnComboBox.MultiColumnComboBox.html#Syncfusion_EJ2_MultiColumnComboBox_MultiColumnComboBox_Columns) property allows to define the data fields to be displayed in the MultiColumn ComboBox. You can customize the column by using [Columns](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.MultiColumnComboBox.MultiColumnComboBox.html#Syncfusion_EJ2_MultiColumnComboBox_MultiColumnComboBox_Columns) property, which provides options such as `Field`, `Header`, `Width`, `Format`, `Template` and more. In the following examples, column is customized with `field`, `header` and `width`. -* `field` property - Specifies the data fields to be displayed in each column, mapping the fields from the data source to the multicolumn combobox. +* `field` - Specifies the fields to be displayed in each column, mapped from the data source to the multicolumn combobox. -* `header` property - which is used to display the column header. +* `header` - Specifes the data to be displayed in the column header. -* `width` property - which is used to define the column width. +* `width` - Specifes the column width. + +In the following example, the column is customized with `field`, `header` and `width` properties. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -52,10 +54,41 @@ You can use the `TextAlign` property to define the text alignment of the column. You can use the `Template` property to customize the each cell of the column. It accepts either a template string or an HTML element. +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/columns/template/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Template.cs" %} +{% include code-snippet/multicolumn-combobox/columns/template/template.cs %} +{% endhighlight %} +{% endtabs %} + +![Template](images/template.png) + ## Setting display as checkBox You can use `DisplayAsCheckBox` property to display the column value as checkbox instead of a boolean value. By default, the value is `false`. +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/columns/checkbox/razor %} +{% endhighlight %} +{% highlight c# tabtitle="DisplayAsCheckBox.cs" %} +{% include code-snippet/multicolumn-combobox/columns/checkbox/checkbox.cs %} +{% endhighlight %} +{% endtabs %} + +![DisplayAsCheckBox](images/checkbox.png) + ## Setting custom attributes -You can use the `CustomAttributes` property to customize the CSS styles and attributes of each column's content cells. \ No newline at end of file +You can use the `CustomAttributes` property to customize the CSS styles and attributes of each column's content cells. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/columns/customattribute/razor %} +{% endhighlight %} +{% highlight c# tabtitle="CustomAttribute.cs" %} +{% include code-snippet/multicolumn-combobox/columns/customattribute/customattribute.cs %} +{% endhighlight %} +{% endtabs %} diff --git a/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.MVC/localization.md b/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.MVC/localization.md index 8fe0eb2c8f..1eb5c242d2 100644 --- a/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.MVC/localization.md +++ b/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.MVC/localization.md @@ -18,4 +18,17 @@ The Localization library allows you to localize static text content of the [NoRe ## Loading translations -To load translation object to your application, use `load` function of **L10n** class. \ No newline at end of file +To load translation object to your application, use `load` function of **L10n** class. + +In the following sample, French culture is set to the MultiColumn ComboBox and no data is loaded. Hence, the noRecordsTemplate property displays its text in French culture. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/columns/localization/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Localization.cs" %} +{% include code-snippet/multicolumn-combobox/columns/localization/localization.cs %} +{% endhighlight %} +{% endtabs %} + +![Localization](images/localization.png) diff --git a/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.MVC/templates.md b/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.MVC/templates.md index 55ff8292fb..977f263aeb 100644 --- a/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.MVC/templates.md +++ b/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.MVC/templates.md @@ -16,22 +16,88 @@ The MultiColumn ComboBox provides several template options to customize each ite You can use the [ItemTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.MultiColumnComboBox.MultiColumnComboBox.html#Syncfusion_EJ2_MultiColumnComboBox_MultiColumnComboBox_ItemTemplate) property to customize each list item within the MultiColumn ComboBox. +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/templates/itemtemplate/razor %} +{% endhighlight %} +{% highlight c# tabtitle="ItemTemplate.cs" %} +{% include code-snippet/multicolumn-combobox/templates/itemtemplate/itemtemplate.cs %} +{% endhighlight %} +{% endtabs %} + +![Item template](images/itemTemp.png) + ## Header template You can add a custom element as a header element by using the `HeaderTemplate` property. +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/templates/headertemplate/razor %} +{% endhighlight %} +{% highlight c# tabtitle="HeaderTemplate.cs" %} +{% include code-snippet/multicolumn-combobox/templates/headertemplate/headertemplate.cs %} +{% endhighlight %} +{% endtabs %} + +![Header template](images/headertemplate.png) + ## Group template You can use the [GroupTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.MultiColumnComboBox.MultiColumnComboBox.html#Syncfusion_EJ2_MultiColumnComboBox_MultiColumnComboBox_GroupTemplate) property to customize the group header in the popup list. +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/templates/grouptemplate/razor %} +{% endhighlight %} +{% highlight c# tabtitle="GroupTemplate.cs" %} +{% include code-snippet/multicolumn-combobox/templates/grouptemplate/grouptemplate.cs %} +{% endhighlight %} +{% endtabs %} + +![Group template](images/grouptemplate.png) + ## Footer template You can add a custom element as a footer element by using the [FooterTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.MultiColumnComboBox.MultiColumnComboBox.html#Syncfusion_EJ2_MultiColumnComboBox_MultiColumnComboBox_FooterTemplate) property. +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/templates/footertemplate/razor %} +{% endhighlight %} +{% highlight c# tabtitle="FooterTemplate.cs" %} +{% include code-snippet/multicolumn-combobox/templates/footertemplate/footertemplate.cs %} +{% endhighlight %} +{% endtabs %} + +![Footer template](images/footertemplate.png) + ## No records template You can customize the popup list for when no data is found or no matches are found by using the [NoRecordsTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.MultiColumnComboBox.MultiColumnComboBox.html#Syncfusion_EJ2_MultiColumnComboBox_MultiColumnComboBox_NoRecordsTemplate) property. +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/templates/norecordtemplate/razor %} +{% endhighlight %} +{% highlight c# tabtitle="NoRecordTemplate.cs" %} +{% include code-snippet/multicolumn-combobox/templates/norecordtemplate/norecordtemplate.cs %} +{% endhighlight %} +{% endtabs %} + +![No records template](images/norecordtemplate.png) + ## 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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.MultiColumnComboBox.MultiColumnComboBox.html#Syncfusion_EJ2_MultiColumnComboBox_MultiColumnComboBox_ActionFailureTemplate) property. \ No newline at end of file +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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.MultiColumnComboBox.MultiColumnComboBox.html#Syncfusion_EJ2_MultiColumnComboBox_MultiColumnComboBox_ActionFailureTemplate) property. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/templates/actionfailuretemplate/razor %} +{% endhighlight %} +{% highlight c# tabtitle="ActionFailureTemplate.cs" %} +{% include code-snippet/multicolumn-combobox/templates/actionfailuretemplate/actionfailuretemplate.cs %} +{% endhighlight %} +{% endtabs %} + +![Action failure template](images/actionfailuretemplate.png) diff --git a/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/columns.md b/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/columns.md index 67bb254b50..e9ca5ad783 100644 --- a/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/columns.md +++ b/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/columns.md @@ -10,17 +10,19 @@ documentation: ug # Columns in ##Platform_Name## MultiColumn Combobox control -The `e-multicolumncombobox-column` tag helps allows to define what data fields is to be displayed in the MultiColumn ComboBox. +The `e-multicolumncombobox-column` tag helper allows to define the data fields to be displayed in the MultiColumn ComboBox. You can customize the column, which provides options such as `field`, `header`, `width`, `format`, `template` and more. In the following examples, column is customized with `field`, `header` and `width`. -* `field` property - Specifies the data fields to be displayed in each column, mapping the fields from the data source to the multicolumn combobox. +* `field` - Specifies the fields to be displayed in each column, mapped from the data source to the multicolumn combobox. -* `header` property - which is used to display the column header. +* `header` - Specifes the data to be displayed in the column header. -* `width` property - which is used to define the column width. +* `width` - Specifes the column width. + +In the following example, the column is customized with `field`, `header` and `width` properties. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -52,10 +54,41 @@ You can use the `textAlign` property to define the text alignment of the column. You can use the `template` property to customize the each cell of the column. It accepts either a template string or an HTML element. +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/columns/template/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Template.cs" %} +{% include code-snippet/multicolumn-combobox/columns/template/template.cs %} +{% endhighlight %} +{% endtabs %} + +![Template](images/template.png) + ## Setting display as checkBox You can use `displayAsCheckBox` property to display the column value as checkbox instead of a boolean value. By default, the value is `false`. +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/columns/checkbox/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="DisplayAsCheckBox.cs" %} +{% include code-snippet/multicolumn-combobox/columns/checkbox/checkbox.cs %} +{% endhighlight %} +{% endtabs %} + +![DisplayAsCheckBox](images/checkbox.png) + ## Setting custom attributes -You can use the `customAttributes` property to customize the CSS styles and attributes of each column's content cells. \ No newline at end of file +You can use the `customAttributes` property to customize the CSS styles and attributes of each column's content cells. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/columns/customattribute/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="CustomAttribute.cs" %} +{% include code-snippet/multicolumn-combobox/columns/customattribute/customattribute.cs %} +{% endhighlight %} +{% endtabs %} diff --git a/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/localization.md b/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/localization.md index ce56704a1d..dcb0a4dd26 100644 --- a/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/localization.md +++ b/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/localization.md @@ -18,4 +18,17 @@ The Localization library allows you to localize static text content of the [noRe ## Loading translations -To load translation object to your application, use `load` function of **L10n** class. \ No newline at end of file +To load translation object to your application, use `load` function of **L10n** class. + +In the following sample, French culture is set to the MultiColumn ComboBox and no data is loaded. Hence, the noRecordsTemplate property displays its text in French culture. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/columns/localization/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Localization.cs" %} +{% include code-snippet/multicolumn-combobox/columns/localization/localization.cs %} +{% endhighlight %} +{% endtabs %} + +![Localization](images/localization.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/templates.md b/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/templates.md index 0e04aca8b0..544a0eac76 100644 --- a/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/templates.md +++ b/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/templates.md @@ -16,22 +16,88 @@ The MultiColumn ComboBox provides several template options to customize each ite You can use the [itemTemplate](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.MultiColumnComboBox.MultiColumnComboBox.html#Syncfusion_EJ2_MultiColumnComboBox_MultiColumnComboBox_ItemTemplate) property to customize each list item within the MultiColumn ComboBox. +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/templates/itemtemplate/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="ItemTemplate.cs" %} +{% include code-snippet/multicolumn-combobox/templates/itemtemplate/itemtemplate.cs %} +{% endhighlight %} +{% endtabs %} + +![Item template](images/itemTemp.png) + ## Header template You can add a custom element as a header element by using the `headerTemplate` property. +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/templates/headertemplate/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="HeaderTemplate.cs" %} +{% include code-snippet/multicolumn-combobox/templates/headertemplate/headertemplate.cs %} +{% endhighlight %} +{% endtabs %} + +![Header template](images/headertemplate.png) + ## Group template You can use the [groupTemplate](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.MultiColumnComboBox.MultiColumnComboBox.html#Syncfusion_EJ2_MultiColumnComboBox_MultiColumnComboBox_GroupTemplate) property to customize the group header in the popup list. +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/templates/grouptemplate/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="GroupTemplate.cs" %} +{% include code-snippet/multicolumn-combobox/templates/grouptemplate/grouptemplate.cs %} +{% endhighlight %} +{% endtabs %} + +![Group template](images/grouptemplate.png) + ## Footer template You can add a custom element as a footer element by using the [footerTemplate](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.MultiColumnComboBox.MultiColumnComboBox.html#Syncfusion_EJ2_MultiColumnComboBox_MultiColumnComboBox_FooterTemplate) property. +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/templates/footertemplate/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="FooterTemplate.cs" %} +{% include code-snippet/multicolumn-combobox/templates/footertemplate/footertemplate.cs %} +{% endhighlight %} +{% endtabs %} + +![Footer template](images/footertemplate.png) + ## No records template You can customize the popup list for when no data is found or no matches are found by using the [noRecordsTemplate](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.MultiColumnComboBox.MultiColumnComboBox.html#Syncfusion_EJ2_MultiColumnComboBox_MultiColumnComboBox_NoRecordsTemplate) property. +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/templates/norecordtemplate/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="NoRecordTemplate.cs" %} +{% include code-snippet/multicolumn-combobox/templates/norecordtemplate/norecordtemplate.cs %} +{% endhighlight %} +{% endtabs %} + +![No records template](images/norecordtemplate.png) + ## 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](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.MultiColumnComboBox.MultiColumnComboBox.html#Syncfusion_EJ2_MultiColumnComboBox_MultiColumnComboBox_ActionFailureTemplate) property. \ No newline at end of file +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](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.MultiColumnComboBox.MultiColumnComboBox.html#Syncfusion_EJ2_MultiColumnComboBox_MultiColumnComboBox_ActionFailureTemplate) property. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/multicolumn-combobox/templates/actionfailuretemplate/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="ActionFailureTemplate.cs" %} +{% include code-snippet/multicolumn-combobox/templates/actionfailuretemplate/actionfailuretemplate.cs %} +{% endhighlight %} +{% endtabs %} + +![Action failure template](images/actionfailuretemplate.png) diff --git a/ej2-asp-core-mvc/multicolumn-combobox/accessibility.md b/ej2-asp-core-mvc/multicolumn-combobox/accessibility.md new file mode 100644 index 0000000000..53a68dedc8 --- /dev/null +++ b/ej2-asp-core-mvc/multicolumn-combobox/accessibility.md @@ -0,0 +1,78 @@ +--- +layout: post +title: Accessibility in ##Platform_Name## MultiColumn ComboBox Control | Syncfusion +description: Checkout and learn about Accessibility in Syncfusion ##Platform_Name## MultiColumn ComboBox control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Accessibility +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Accessibility in ##Platform_Name## MultiColumn ComboBox Control + +The MultiColumn ComboBox control followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. + +The accessibility compliance for the MultiColumn ComboBox control is outlined below. + +| Accessibility Criteria | Compatibility | +| -- | -- | +| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | +| [Section 508 Support](../common/accessibility#accessibility-standards) | Yes | +| [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | +| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | +| [Color Contrast](../common/accessibility#color-contrast) | Yes | +| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | +| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | +| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | Yes | +| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | + + + +
Yes - All features of the component meet the requirement.
+ +
Intermediate - Some features of the component do not meet the requirement.
+ +
No - The component does not meet the requirement.
+ +## WAI-ARIA attributes + +The following ARIA attributes are used in the MultiColumn ComboBox control: + +| Attributes | Purpose | +| ------------ | ----------------------- | +| `role=combobox` | Identifies an input element that controls another element, like a listbox or grid, which can pop up to help the user set its value. | +| `aria-expanded` | Indicates whether the popup list has expanded or not. | +| `aria-selected` | Indicates the selected option. | +| `aria-readonly` | Indicates the readonly state of the MultiColumn ComboBox element. | +| `aria-disabled` | Indicates whether the MultiColumn ComboBox control is in a disabled state or not. | +| `aria-owns` | This attribute contains the ID of the popup list to indicate popup as a child element. | + +## Keyboard interaction + +The following keyboard shortcuts are supported by the MultiColumn ComboBox control. + +| **Press** | **To do this** | +| --- | --- | +| Enter | Selects the focused item and popup list closes when it is in open state. | +| Esc | Closes the popup list when it is in an open state and the currently selected item remains the same. | +| Alt +down | Opens the popup list. | +| Alt + Up | Closes the popup list. | +| Arrow Up | Selects the item previous to the currently selected one. | +| Arrow Down | Selects the first item in the MultiColumn ComboBox when no item selected. Otherwise, selects the item next to the currently selected item. | +| Home | Selects the first item in the popup list. | +| End | Selects the last item in the popup list. | +| Tab | Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the control. | +| Shift + Tab | Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the control. | + +## Ensuring accessibility + +The MultiColumn ComboBox control's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. + +## See also + +* [Accessibility in Syncfusion controls](../common/accessibility) diff --git a/ej2-asp-core-mvc/multicolumn-combobox/images/actionfailuretemplate.png b/ej2-asp-core-mvc/multicolumn-combobox/images/actionfailuretemplate.png new file mode 100644 index 0000000000..af709201f8 Binary files /dev/null and b/ej2-asp-core-mvc/multicolumn-combobox/images/actionfailuretemplate.png differ diff --git a/ej2-asp-core-mvc/multicolumn-combobox/images/checkbox.png b/ej2-asp-core-mvc/multicolumn-combobox/images/checkbox.png new file mode 100644 index 0000000000..c40f8d677a Binary files /dev/null and b/ej2-asp-core-mvc/multicolumn-combobox/images/checkbox.png differ diff --git a/ej2-asp-core-mvc/multicolumn-combobox/images/footertemplate.png b/ej2-asp-core-mvc/multicolumn-combobox/images/footertemplate.png new file mode 100644 index 0000000000..1a034e56e1 Binary files /dev/null and b/ej2-asp-core-mvc/multicolumn-combobox/images/footertemplate.png differ diff --git a/ej2-asp-core-mvc/multicolumn-combobox/images/grouptemplate.png b/ej2-asp-core-mvc/multicolumn-combobox/images/grouptemplate.png new file mode 100644 index 0000000000..94eaa75737 Binary files /dev/null and b/ej2-asp-core-mvc/multicolumn-combobox/images/grouptemplate.png differ diff --git a/ej2-asp-core-mvc/multicolumn-combobox/images/headertemplate.png b/ej2-asp-core-mvc/multicolumn-combobox/images/headertemplate.png new file mode 100644 index 0000000000..a20295bb94 Binary files /dev/null and b/ej2-asp-core-mvc/multicolumn-combobox/images/headertemplate.png differ diff --git a/ej2-asp-core-mvc/multicolumn-combobox/images/itemTemp.png b/ej2-asp-core-mvc/multicolumn-combobox/images/itemTemp.png new file mode 100644 index 0000000000..c6ea25c64f Binary files /dev/null and b/ej2-asp-core-mvc/multicolumn-combobox/images/itemTemp.png differ diff --git a/ej2-asp-core-mvc/multicolumn-combobox/images/localization.png b/ej2-asp-core-mvc/multicolumn-combobox/images/localization.png new file mode 100644 index 0000000000..1e7b6af665 Binary files /dev/null and b/ej2-asp-core-mvc/multicolumn-combobox/images/localization.png differ diff --git a/ej2-asp-core-mvc/multicolumn-combobox/images/norecordtemplate.png b/ej2-asp-core-mvc/multicolumn-combobox/images/norecordtemplate.png new file mode 100644 index 0000000000..9f96a2526a Binary files /dev/null and b/ej2-asp-core-mvc/multicolumn-combobox/images/norecordtemplate.png differ diff --git a/ej2-asp-core-mvc/multicolumn-combobox/images/template.png b/ej2-asp-core-mvc/multicolumn-combobox/images/template.png new file mode 100644 index 0000000000..973815e719 Binary files /dev/null and b/ej2-asp-core-mvc/multicolumn-combobox/images/template.png differ diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index b4132597d3..a15aaf2440 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -1733,6 +1733,7 @@
  • Virtualization
  • Templates
  • Localization
    • +
  • Accessibility
  • Events
  • API Reference
    • diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index 58ca9b11a4..a99d14e6af 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -1688,8 +1688,9 @@
  • Virtualization
  • Templates
  • Localization
    • +
  • Accessibility
  • Events
    • -
  • API Reference
    • +
  • API Reference