Skip to content

Commit 0cf32a0

Browse files
Merge pull request #3082 from syncfusion-content/EJ2-890132-MCCBHtfix
documentation(890132): Added pending topics in multicolumn combobox for core and mvc.
2 parents cb84c09 + 33ff1c9 commit 0cf32a0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+866
-15
lines changed
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
public ActionResult Demo()
2+
{
3+
var employees = new List<Employee>
4+
{
5+
new Employee { EmpID = 1001, Name = "Andrew Fuller", Designation = "Team Lead", Country = "England" },
6+
new Employee { EmpID = 1002, Name = "Robert", Designation = "Developer", Country = "USA" },
7+
new Employee { EmpID = 1003, Name = "Michael", Designation = "HR", Country = "Russia" },
8+
new Employee { EmpID = 1004, Name = "Steven Buchanan", Designation = "Product Manager", Country = "Ukraine" },
9+
new Employee { EmpID = 1005, Name = "Margaret Peacock", Designation = "Developer", Country = "Egypt" },
10+
new Employee { EmpID = 1006, Name = "Janet Leverling", Designation = "Team Lead", Country = "Africa" },
11+
new Employee { EmpID = 1007, Name = "Alice", Designation = "Product Manager", Country = "Australia" },
12+
new Employee { EmpID = 1008, Name = "Bob", Designation = "Developer", Country = "India" },
13+
new Employee { EmpID = 1009, Name = "John", Designation = "Product Manager", Country = "Ireland" },
14+
new Employee { EmpID = 1010, Name = "Mario Pontes", Designation = "Team Lead", Country = "South Africa" },
15+
new Employee { EmpID = 1011, Name = "Yang Wang", Designation = "Developer", Country = "Russia" },
16+
new Employee { EmpID = 1012, Name = "David", Designation = "Product Manager", Country = "Egypt" },
17+
new Employee { EmpID = 1013, Name = "Antonio Bianchi", Designation = "Team Lead", Country = "USA" },
18+
new Employee { EmpID = 1014, Name = "Laura", Designation = "Developer", Country = "England" },
19+
new Employee { EmpID = 1015, Name = "Carlos Hernandez", Designation = "Developer", Country = "Canada" },
20+
new Employee { EmpID = 1016, Name = "Lily", Designation = "Product Manager", Country = "France" },
21+
new Employee { EmpID = 1017, Name = "Tom Williams", Designation = "Developer", Country = "Ukraine" },
22+
new Employee { EmpID = 1018, Name = "Grace", Designation = "Developer", Country = "Australia" },
23+
new Employee { EmpID = 1019, Name = "Olivia", Designation = "Team Lead", Country = "Ireland" },
24+
new Employee { EmpID = 1020, Name = "James", Designation = "Developer", Country = "China" }
25+
};
26+
27+
ViewBag.EmpData = employees;
28+
return View(ViewBag.EmpData);
29+
}
30+
31+
public class Employee
32+
{
33+
public int EmpID { get; set; }
34+
public string Name { get; set; }
35+
public string Designation { get; set; }
36+
public string Country { get; set; }
37+
}
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@using Syncfusion.EJ2.MultiColumnComboBox;
2+
3+
<div id="container" style="width: 500px">
4+
@Html.EJS().MultiColumnComboBox("checkbox").DataSource((IEnumerable<object>)Model).Fields(new MultiColumnComboBoxFieldSettings
5+
{ Text = "Name", Value = "EmpID", GroupBy="Country" }).Columns(col =>
6+
{
7+
col.Field("EmpID").Header("Employee ID").DisplayAsCheckBox(true).Width("90").Add();
8+
col.Field("Name").Header("Name").Width("90").Add();
9+
col.Field("Designation").Header("Designation").Width("90").Add();
10+
col.Field("Country").Header("Country").Width("70").Add();
11+
}).Render()
12+
</div>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@using Syncfusion.EJ2.MultiColumnComboBox;
2+
3+
<div class="container" style="width: 500px">
4+
<ejs-multicolumncombobox id="checkbox" dataSource="ViewBag.EmpData" text="Michael">
5+
<e-multicolumncombobox-fields text="Name" value="EmpID"></e-multicolumncombobox-fields>
6+
<e-multicolumncombobox-columns>
7+
<e-multicolumncombobox-column field="EmpID" header="Employee ID" width="90" displayAsCheckbox=true></e-multicolumncombobox-column>
8+
<e-multicolumncombobox-column field="Name" header="Name" width="90"></e-multicolumncombobox-column>
9+
<e-multicolumncombobox-column field="Designation" header="Designation" width="90"></e-multicolumncombobox-column>
10+
<e-multicolumncombobox-column field="Country" header="Country" width="70"></e-multicolumncombobox-column>
11+
</e-multicolumncombobox-columns>
12+
</ejs-multicolumncombobox>
13+
</div>
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
public ActionResult Demo()
2+
{
3+
var employees = new List<Employee>
4+
{
5+
new Employee { EmpID = 1001, Name = "Andrew Fuller", Designation = "Team Lead", Country = "England" },
6+
new Employee { EmpID = 1002, Name = "Robert", Designation = "Developer", Country = "USA" },
7+
new Employee { EmpID = 1003, Name = "Michael", Designation = "HR", Country = "Russia" },
8+
new Employee { EmpID = 1004, Name = "Steven Buchanan", Designation = "Product Manager", Country = "Ukraine" },
9+
new Employee { EmpID = 1005, Name = "Margaret Peacock", Designation = "Developer", Country = "Egypt" },
10+
new Employee { EmpID = 1006, Name = "Janet Leverling", Designation = "Team Lead", Country = "Africa" },
11+
new Employee { EmpID = 1007, Name = "Alice", Designation = "Product Manager", Country = "Australia" },
12+
new Employee { EmpID = 1008, Name = "Bob", Designation = "Developer", Country = "India" },
13+
new Employee { EmpID = 1009, Name = "John", Designation = "Product Manager", Country = "Ireland" },
14+
new Employee { EmpID = 1010, Name = "Mario Pontes", Designation = "Team Lead", Country = "South Africa" },
15+
new Employee { EmpID = 1011, Name = "Yang Wang", Designation = "Developer", Country = "Russia" },
16+
new Employee { EmpID = 1012, Name = "David", Designation = "Product Manager", Country = "Egypt" },
17+
new Employee { EmpID = 1013, Name = "Antonio Bianchi", Designation = "Team Lead", Country = "USA" },
18+
new Employee { EmpID = 1014, Name = "Laura", Designation = "Developer", Country = "England" },
19+
new Employee { EmpID = 1015, Name = "Carlos Hernandez", Designation = "Developer", Country = "Canada" },
20+
new Employee { EmpID = 1016, Name = "Lily", Designation = "Product Manager", Country = "France" },
21+
new Employee { EmpID = 1017, Name = "Tom Williams", Designation = "Developer", Country = "Ukraine" },
22+
new Employee { EmpID = 1018, Name = "Grace", Designation = "Developer", Country = "Australia" },
23+
new Employee { EmpID = 1019, Name = "Olivia", Designation = "Team Lead", Country = "Ireland" },
24+
new Employee { EmpID = 1020, Name = "James", Designation = "Developer", Country = "China" }
25+
};
26+
27+
ViewBag.EmpData = employees;
28+
return View(ViewBag.EmpData);
29+
}
30+
31+
public class Employee
32+
{
33+
public int EmpID { get; set; }
34+
public string Name { get; set; }
35+
public string Designation { get; set; }
36+
public string Country { get; set; }
37+
}
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@using Syncfusion.EJ2.MultiColumnComboBox;
2+
3+
<div id="container" style="width: 500px">
4+
@Html.EJS().MultiColumnComboBox("attributes").DataSource((IEnumerable<object>)Model).Fields(new MultiColumnComboBoxFieldSettings
5+
{ Text = "Name", Value = "EmpID" }).Columns(col =>
6+
{
7+
col.Field("EmpID").Header("Employee ID").Width("90").CustomAttributes((new Dictionary<string, object> { { "class", "e-custom-multicolumn" } })).Add();
8+
col.Field("Name").Header("Name").Width("90").Add();
9+
col.Field("Designation").Header("Designation").Width("90").Add();
10+
col.Field("Country").Header("Country").Width("70").Add();
11+
}).Render()
12+
</div>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@using Syncfusion.EJ2.MultiColumnComboBox;
2+
3+
<div class="container" style="width: 500px">
4+
<ejs-multicolumncombobox id="attribute" dataSource="ViewBag.EmpData" text="Michael">
5+
<e-multicolumncombobox-fields text="Name" value="EmpID"></e-multicolumncombobox-fields>
6+
<e-multicolumncombobox-columns>
7+
<e-multicolumncombobox-column field="EmpID" header="Employee ID" width="90" customAttributes="@(new Dictionary<string, object> { { "class", "e-custom-multicolumn" } })"></e-multicolumncombobox-column>
8+
<e-multicolumncombobox-column field="Name" header="Name" width="90"></e-multicolumncombobox-column>
9+
<e-multicolumncombobox-column field="Designation" header="Designation" width="90"></e-multicolumncombobox-column>
10+
<e-multicolumncombobox-column field="Country" header="Country" width="70"></e-multicolumncombobox-column>
11+
</e-multicolumncombobox-columns>
12+
</ejs-multicolumncombobox>
13+
</div>
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
public ActionResult Demo()
2+
{
3+
var employees = new List<Employee>{ };
4+
ViewBag.EmpData = employees;
5+
return View(ViewBag.EmpData);
6+
}
7+
8+
public class Employee
9+
{
10+
public int ContactName { get; set; }
11+
public string CustomerID { get; set; }
12+
}
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@using Syncfusion.EJ2.MultiColumnComboBox;
2+
3+
<div id="container" style="width: 500px">
4+
@Html.EJS().MultiColumnComboBox("localization").Locale("fr-BE").Placeholder("Sélectionnez un client").DataSource((IEnumerable<object>)Model).Columns(col =>
5+
{
6+
col.Field("ContactName").Header("Contact Name").Width("90").Add();
7+
col.Field("CustomerID").Header("Customer ID").Width("90").Add();
8+
}).Render()
9+
</div>
10+
11+
<script>
12+
ej.base.L10n.load({
13+
'fr-BE': {
14+
'multicolumncombobox': {
15+
'noRecordsTemplate': "Aucun enregistrement trouvé"
16+
}
17+
}
18+
});
19+
</script>
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@using Syncfusion.EJ2.MultiColumnComboBox;
2+
3+
<div class="container" style="width: 500px">
4+
<ejs-multicolumncombobox id="localization" dataSource="ViewBag.EmpData" locale="fr-BE" placeholder="Sélectionnez un client">
5+
<e-multicolumncombobox-columns>
6+
<e-multicolumncombobox-column field="ContactName" header="Contact Name" width="90"></e-multicolumncombobox-column>
7+
<e-multicolumncombobox-column field="CustomerID" header="Customer ID" width="90"></e-multicolumncombobox-column>
8+
</e-multicolumncombobox-columns>
9+
</ejs-multicolumncombobox>
10+
</div>
11+
12+
<script>
13+
ej.base.L10n.load({
14+
'fr-BE': {
15+
'multicolumncombobox': {
16+
'noRecordsTemplate': "Aucun enregistrement trouvé"
17+
}
18+
}
19+
});
20+
</script>
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@using Syncfusion.EJ2.MultiColumnComboBox;
2+
3+
<div id="container" style="width: 500px">
4+
@Html.EJS().MultiColumnComboBox("template").CssClass("multicolumn-customize").Placeholder("Select an employee").Fields(new MultiColumnComboBoxFieldSettings
5+
{ Text = "Name", Value = "Eimg" }).Columns(col =>
6+
{
7+
col.Field("Eimg").Header("Photos").Width("90").Template("<div><img class=\"empImage\" src=\"../Content/images/${Eimg}.png\" alt=\"employee\"/> </div>").Add();
8+
col.Field("Name").Header("Employee Name").Width("160").Template("<div class=\"ename\"> ${Name} </div><div class=\"job\"> ${Designation} </div>").Add();
9+
col.Field("DateofJoining").Header("Date Of Joining").Width("165").Template("<div class=\"dateOfJoining\"> ${DateofJoining} </div>").Add();
10+
col.Field("Country").Header("Country").Width("100").Template("<div class=\"country\"> ${Country} </div>").Add();
11+
}).DataSource((IEnumerable<object>)Model).PopupHeight("230px").GridSettings(new MultiColumnComboBoxGridSettings { RowHeight = 40 }).Render()
12+
</div>
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@using Syncfusion.EJ2.MultiColumnComboBox;
2+
3+
<div class="container" style="width: 500px">
4+
<ejs-multicolumncombobox id="template" dataSource="ViewBag.EmpData" cssClass="multicolumn-customize" popupHeight="230px"
5+
placeholder="Select an employee">
6+
<e-multicolumncombobox-gridsettings rowHeight=40></e-multicolumncombobox-gridsettings>
7+
<e-multicolumncombobox-fields text="Name" value="Eimg"></e-multicolumncombobox-fields>
8+
<e-multicolumncombobox-columns>
9+
<e-multicolumncombobox-column field="Eimg" header="Photos" width="90" template='<div><img class="empImage" src="./../images/${Eimg}.png" alt="employee"/> </div>'></e-multicolumncombobox-column>
10+
<e-multicolumncombobox-column field="Name" header="Employee Name" width="160" template='<div class="ename"> ${Name} </div><div class="job"> ${Designation} </div>'></e-multicolumncombobox-column>
11+
<e-multicolumncombobox-column field="DateofJoining" header="Date Of Joining" width="165" template='<div class="dateOfJoining"> ${DateofJoining} </div>'></e-multicolumncombobox-column>
12+
<e-multicolumncombobox-column field="Country" header="Country" width="100" template='<div class="country"> ${Country} </div>'></e-multicolumncombobox-column>
13+
</e-multicolumncombobox-columns>
14+
</ejs-multicolumncombobox>
15+
</div>
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
public ActionResult Demo()
2+
{
3+
var employees = new List<EmployeeList>
4+
{
5+
new EmployeeList { Name = "Andrew Fuller", Eimg = 7, Designation = "Team Lead", Country = "England", DateofJoining = "2010/12/10" },
6+
new EmployeeList { Name = "Anne Dodsworth", Eimg = 1, Designation = "Developer", Country = "USA", DateofJoining = "2000/10/05" },
7+
new EmployeeList { Name = "Janet Leverling", Eimg = 3, Designation = "HR", Country = "Russia", DateofJoining = "2016/02/23" },
8+
new EmployeeList { Name = "Laura Callahan", Eimg = 2, Designation = "Product Manager", Country = "Ukraine", DateofJoining = "2012/01/30" },
9+
new EmployeeList { Name = "Margaret Peacock", Eimg = 6, Designation = "Developer", Country = "Egypt", DateofJoining = "2014/08/15" },
10+
new EmployeeList { Name = "Michael Suyama", Eimg = 9, Designation = "Team Lead", Country = "Africa", DateofJoining = "2015/07/27" },
11+
new EmployeeList { Name = "Nancy Davolio", Eimg = 4, Designation = "Product Manager", Country = "Australia", DateofJoining = "2017/05/24" },
12+
new EmployeeList { Name = "Robert King", Eimg = 8, Designation = "Developer", Country = "India", DateofJoining = "2018/09/08" },
13+
new EmployeeList { Name = "Steven Buchanan", Eimg = 10, Designation = "CEO", Country = "Ireland", DateofJoining = "2020/03/05" }
14+
};
15+
ViewBag.EmpData = employees;
16+
return View(ViewBag.EmpData);
17+
}
18+
19+
public class EmployeeList
20+
{
21+
public string Name { get; set; }
22+
public int Eimg { get; set; }
23+
public string Designation { get; set; }
24+
public string Country { get; set; }
25+
public string DateofJoining { get; set; }
26+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public ActionResult Demo()
2+
{
3+
return View();
4+
}
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@using Syncfusion.EJ2.MultiColumnComboBox;
2+
3+
<div id="container" style="width: 500px">
4+
@Html.EJS().MultiColumnComboBox("actionfailureTemp").Placeholder("Select the country").DataSource(obj => obj.Url("https://services.syncfusion.com/js/production/api/Order").Adaptor(
5+
"WebApiAdaptor").CrossDomain(true)).Fields(new MultiColumnComboBoxFieldSettings { Text = "ShipCountry", Value = "CustomerID" }).Columns(col =>
6+
{
7+
col.Field("OrderID").Header("Order ID").TextAlign(TextAlign.Right).Width("120").Add();
8+
col.Field("CustomerID").Header("Customer ID").Width("130").Add();
9+
col.Field("ShipCountry").Header("Ship Country").Width("120").Add();
10+
}).ActionFailureTemplate("<span class='action-failure'> Data fetch get fails</span>").PopupHeight("230px").Render()
11+
</div>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@using Syncfusion.EJ2.MultiColumnComboBox;
2+
3+
<div class="container" style="width: 500px">
4+
<ejs-multicolumncombobox id="actionfailureTemp" popupHeight="230px" placeholder="Select a country" actionFailureTemplate="@Html.Raw("<span class='action-failure'> Data fetch get fails</span>")">
5+
<e-data-manager url="https://services.syncfusion.com/js/production/api/Order" adaptor="WebApiAdaptor" crossdomain="true"></e-data-manager>
6+
<e-multicolumncombobox-fields text="ShipCountry" value="CustomerID"></e-multicolumncombobox-fields>
7+
<e-multicolumncombobox-columns>
8+
<e-multicolumncombobox-column field="OrderID" header="Order ID" width="120"></e-multicolumncombobox-column>
9+
<e-multicolumncombobox-column field="CustomerID" header="Customer ID" width="130"></e-multicolumncombobox-column>
10+
<e-multicolumncombobox-column field="ShipCountry" header="Ship Country" width="120"></e-multicolumncombobox-column>
11+
</e-multicolumncombobox-columns>
12+
</ejs-multicolumncombobox>
13+
</div>
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
public ActionResult Demo()
2+
{
3+
var employees = new List<Employee>
4+
{
5+
new Employee { EmpID = 1001, Name = "Andrew Fuller", Designation = "Team Lead", Country = "England" },
6+
new Employee { EmpID = 1002, Name = "Robert", Designation = "Developer", Country = "USA" },
7+
new Employee { EmpID = 1003, Name = "Michael", Designation = "HR", Country = "Russia" },
8+
new Employee { EmpID = 1004, Name = "Steven Buchanan", Designation = "Product Manager", Country = "Ukraine" },
9+
new Employee { EmpID = 1005, Name = "Margaret Peacock", Designation = "Developer", Country = "Egypt" },
10+
new Employee { EmpID = 1006, Name = "Janet Leverling", Designation = "Team Lead", Country = "Africa" },
11+
new Employee { EmpID = 1007, Name = "Alice", Designation = "Product Manager", Country = "Australia" },
12+
new Employee { EmpID = 1008, Name = "Bob", Designation = "Developer", Country = "India" },
13+
new Employee { EmpID = 1009, Name = "John", Designation = "Product Manager", Country = "Ireland" },
14+
new Employee { EmpID = 1010, Name = "Mario Pontes", Designation = "Team Lead", Country = "South Africa" },
15+
new Employee { EmpID = 1011, Name = "Yang Wang", Designation = "Developer", Country = "Russia" },
16+
new Employee { EmpID = 1012, Name = "David", Designation = "Product Manager", Country = "Egypt" },
17+
new Employee { EmpID = 1013, Name = "Antonio Bianchi", Designation = "Team Lead", Country = "USA" },
18+
new Employee { EmpID = 1014, Name = "Laura", Designation = "Developer", Country = "England" },
19+
new Employee { EmpID = 1015, Name = "Carlos Hernandez", Designation = "Developer", Country = "Canada" },
20+
new Employee { EmpID = 1016, Name = "Lily", Designation = "Product Manager", Country = "France" },
21+
new Employee { EmpID = 1017, Name = "Tom Williams", Designation = "Developer", Country = "Ukraine" },
22+
new Employee { EmpID = 1018, Name = "Grace", Designation = "Developer", Country = "Australia" },
23+
new Employee { EmpID = 1019, Name = "Olivia", Designation = "Team Lead", Country = "Ireland" },
24+
new Employee { EmpID = 1020, Name = "James", Designation = "Developer", Country = "China" }
25+
};
26+
27+
ViewBag.EmpData = employees;
28+
return View(ViewBag.EmpData);
29+
}
30+
31+
public class Employee
32+
{
33+
public int EmpID { get; set; }
34+
public string Name { get; set; }
35+
public string Designation { get; set; }
36+
public string Country { get; set; }
37+
}
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@using Syncfusion.EJ2.MultiColumnComboBox;
2+
3+
<div id="container" style="width: 500px">
4+
@Html.EJS().MultiColumnComboBox("footertemplate").Placeholder("Select an employee").DataSource((IEnumerable<object>)Model).Fields(new MultiColumnComboBoxFieldSettings
5+
{ Text = "Name", Value = "EmpID" }).Columns(col =>
6+
{
7+
col.Field("EmpID").Header("Employee ID").Width("90").Add();
8+
col.Field("Name").Header("Name").Width("90").Add();
9+
col.Field("Designation").Header("Designation").Width("90").Add();
10+
col.Field("Country").Header("Country").Width("70").Add();
11+
}).FooterTemplate("<span class='foot' style='font-weight: bolder; margin: 0 10px'> Total list of employees: " + 20 + "</span>").Render()
12+
</div>

0 commit comments

Comments
 (0)