Skip to content

documentation(890132): Added pending topics in multicolumn combobox for core and mvc. #3082

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 14, 2024
Merged

documentation(890132): Added pending topics in multicolumn combobox for core and mvc. #3082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/checkbox/checkbox.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
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; }
}
12 changes: 12 additions & 0 deletions ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/checkbox/razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@using Syncfusion.EJ2.MultiColumnComboBox;

<div id="container" style="width: 500px">
@Html.EJS().MultiColumnComboBox("checkbox").DataSource((IEnumerable<object>)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()
</div>
13 changes: 13 additions & 0 deletions ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/checkbox/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@using Syncfusion.EJ2.MultiColumnComboBox;

<div class="container" style="width: 500px">
<ejs-multicolumncombobox id="checkbox" dataSource="ViewBag.EmpData" text="Michael">
<e-multicolumncombobox-fields text="Name" value="EmpID"></e-multicolumncombobox-fields>
<e-multicolumncombobox-columns>
<e-multicolumncombobox-column field="EmpID" header="Employee ID" width="90" displayAsCheckbox=true></e-multicolumncombobox-column>
<e-multicolumncombobox-column field="Name" header="Name" width="90"></e-multicolumncombobox-column>
<e-multicolumncombobox-column field="Designation" header="Designation" width="90"></e-multicolumncombobox-column>
<e-multicolumncombobox-column field="Country" header="Country" width="70"></e-multicolumncombobox-column>
</e-multicolumncombobox-columns>
</ejs-multicolumncombobox>
</div>
37 changes: 37 additions & 0 deletions ...asp-core-mvc/code-snippet/multicolumn-combobox/columns/customattribute/customattribute.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
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; }
}
12 changes: 12 additions & 0 deletions ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/customattribute/razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@using Syncfusion.EJ2.MultiColumnComboBox;

<div id="container" style="width: 500px">
@Html.EJS().MultiColumnComboBox("attributes").DataSource((IEnumerable<object>)Model).Fields(new MultiColumnComboBoxFieldSettings
{ Text = "Name", Value = "EmpID" }).Columns(col =>
{
col.Field("EmpID").Header("Employee ID").Width("90").CustomAttributes((new Dictionary<string, object> { { "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()
</div>
13 changes: 13 additions & 0 deletions ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/customattribute/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@using Syncfusion.EJ2.MultiColumnComboBox;

<div class="container" style="width: 500px">
<ejs-multicolumncombobox id="attribute" dataSource="ViewBag.EmpData" text="Michael">
<e-multicolumncombobox-fields text="Name" value="EmpID"></e-multicolumncombobox-fields>
<e-multicolumncombobox-columns>
<e-multicolumncombobox-column field="EmpID" header="Employee ID" width="90" customAttributes="@(new Dictionary<string, object> { { "class", "e-custom-multicolumn" } })"></e-multicolumncombobox-column>
<e-multicolumncombobox-column field="Name" header="Name" width="90"></e-multicolumncombobox-column>
<e-multicolumncombobox-column field="Designation" header="Designation" width="90"></e-multicolumncombobox-column>
<e-multicolumncombobox-column field="Country" header="Country" width="70"></e-multicolumncombobox-column>
</e-multicolumncombobox-columns>
</ejs-multicolumncombobox>
</div>
12 changes: 12 additions & 0 deletions ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/localization/localization.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
public ActionResult Demo()
{
var employees = new List<Employee>{ };
ViewBag.EmpData = employees;
return View(ViewBag.EmpData);
}

public class Employee
{
public int ContactName { get; set; }
public string CustomerID { get; set; }
}
19 changes: 19 additions & 0 deletions ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/localization/razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
@using Syncfusion.EJ2.MultiColumnComboBox;

<div id="container" style="width: 500px">
@Html.EJS().MultiColumnComboBox("localization").Locale("fr-BE").Placeholder("Sélectionnez un client").DataSource((IEnumerable<object>)Model).Columns(col =>
{
col.Field("ContactName").Header("Contact Name").Width("90").Add();
col.Field("CustomerID").Header("Customer ID").Width("90").Add();
}).Render()
</div>

<script>
ej.base.L10n.load({
'fr-BE': {
'multicolumncombobox': {
'noRecordsTemplate': "Aucun enregistrement trouvé"
}
}
});
</script>
20 changes: 20 additions & 0 deletions ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/localization/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
@using Syncfusion.EJ2.MultiColumnComboBox;

<div class="container" style="width: 500px">
<ejs-multicolumncombobox id="localization" dataSource="ViewBag.EmpData" locale="fr-BE" placeholder="Sélectionnez un client">
<e-multicolumncombobox-columns>
<e-multicolumncombobox-column field="ContactName" header="Contact Name" width="90"></e-multicolumncombobox-column>
<e-multicolumncombobox-column field="CustomerID" header="Customer ID" width="90"></e-multicolumncombobox-column>
</e-multicolumncombobox-columns>
</ejs-multicolumncombobox>
</div>

<script>
ej.base.L10n.load({
'fr-BE': {
'multicolumncombobox': {
'noRecordsTemplate': "Aucun enregistrement trouvé"
}
}
});
</script>
12 changes: 12 additions & 0 deletions ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/template/razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@using Syncfusion.EJ2.MultiColumnComboBox;

<div id="container" style="width: 500px">
@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("<div><img class=\"empImage\" src=\"../Content/images/${Eimg}.png\" alt=\"employee\"/> </div>").Add();
col.Field("Name").Header("Employee Name").Width("160").Template("<div class=\"ename\"> ${Name} </div><div class=\"job\"> ${Designation} </div>").Add();
col.Field("DateofJoining").Header("Date Of Joining").Width("165").Template("<div class=\"dateOfJoining\"> ${DateofJoining} </div>").Add();
col.Field("Country").Header("Country").Width("100").Template("<div class=\"country\"> ${Country} </div>").Add();
}).DataSource((IEnumerable<object>)Model).PopupHeight("230px").GridSettings(new MultiColumnComboBoxGridSettings { RowHeight = 40 }).Render()
</div>
15 changes: 15 additions & 0 deletions ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/template/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
@using Syncfusion.EJ2.MultiColumnComboBox;

<div class="container" style="width: 500px">
<ejs-multicolumncombobox id="template" dataSource="ViewBag.EmpData" cssClass="multicolumn-customize" popupHeight="230px"
placeholder="Select an employee">
<e-multicolumncombobox-gridsettings rowHeight=40></e-multicolumncombobox-gridsettings>
<e-multicolumncombobox-fields text="Name" value="Eimg"></e-multicolumncombobox-fields>
<e-multicolumncombobox-columns>
<e-multicolumncombobox-column field="Eimg" header="Photos" width="90" template='<div><img class="empImage" src="./../images/${Eimg}.png" alt="employee"/> </div>'></e-multicolumncombobox-column>
<e-multicolumncombobox-column field="Name" header="Employee Name" width="160" template='<div class="ename"> ${Name} </div><div class="job"> ${Designation} </div>'></e-multicolumncombobox-column>
<e-multicolumncombobox-column field="DateofJoining" header="Date Of Joining" width="165" template='<div class="dateOfJoining"> ${DateofJoining} </div>'></e-multicolumncombobox-column>
<e-multicolumncombobox-column field="Country" header="Country" width="100" template='<div class="country"> ${Country} </div>'></e-multicolumncombobox-column>
</e-multicolumncombobox-columns>
</ejs-multicolumncombobox>
</div>
26 changes: 26 additions & 0 deletions ej2-asp-core-mvc/code-snippet/multicolumn-combobox/columns/template/template.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
public ActionResult Demo()
{
var employees = new List<EmployeeList>
{
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; }
}
4 changes: 4 additions & 0 deletions ...ode-snippet/multicolumn-combobox/templates/actionfailuretemplate/actionfailuretemplate.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
public ActionResult Demo()
{
return View();
}
11 changes: 11 additions & 0 deletions ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/actionfailuretemplate/razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@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>
13 changes: 13 additions & 0 deletions ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/actionfailuretemplate/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@using Syncfusion.EJ2.MultiColumnComboBox;

<div class="container" style="width: 500px">
<ejs-multicolumncombobox id="actionfailureTemp" popupHeight="230px" placeholder="Select a country" actionFailureTemplate="@Html.Raw("<span class='action-failure'> Data fetch get fails</span>")">
<e-data-manager url="https://services.syncfusion.com/js/production/api/Order" adaptor="WebApiAdaptor" crossdomain="true"></e-data-manager>
<e-multicolumncombobox-fields text="ShipCountry" value="CustomerID"></e-multicolumncombobox-fields>
<e-multicolumncombobox-columns>
<e-multicolumncombobox-column field="OrderID" header="Order ID" width="120"></e-multicolumncombobox-column>
<e-multicolumncombobox-column field="CustomerID" header="Customer ID" width="130"></e-multicolumncombobox-column>
<e-multicolumncombobox-column field="ShipCountry" header="Ship Country" width="120"></e-multicolumncombobox-column>
</e-multicolumncombobox-columns>
</ejs-multicolumncombobox>
</div>
37 changes: 37 additions & 0 deletions ...asp-core-mvc/code-snippet/multicolumn-combobox/templates/footertemplate/footertemplate.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
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; }
}
12 changes: 12 additions & 0 deletions ej2-asp-core-mvc/code-snippet/multicolumn-combobox/templates/footertemplate/razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@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>
Loading