Skip to content

Commit eb6b89c

Browse files
PrinceOliverPrinceOliver
authored
Merge pull request #4893 from syncfusion-content/BLAZ-910685-doc2
910685: Need to update the documentation for the multicolumn combobox component
2 parents 654f733 + 6e0e39c commit eb6b89c

File tree

74 files changed

+2700
-0
lines changed

Some content is hidden

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

74 files changed

+2700
-0
lines changed

‎blazor/multicolumn-combobox/code-snippet/data-binding/action-begin.razor‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
@using Syncfusion.Blazor.Data
3+
4+
<SfMultiColumnComboBox TItem="EmployeeData" TValue="string" AllowFiltering=true ValueField="EmployeeID" OnActionBegin="@OnActionBeginhandler" TextField="FirstName" PopupWidth="600px" Placeholder="e.g. Andrew">
5+
<SfDataManager Url="https://blazor.syncfusion.com/services/release/api/Employees" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
6+
</SfMultiColumnComboBox>
7+
8+
@code {
9+
public Query RemoteQuery = new Query();
10+
public class EmployeeData
11+
{
12+
public int EmployeeID { get; set; }
13+
public string FirstName { get; set; }
14+
public string LastName { get; set; }
15+
public string Country { get; set; }
16+
}
17+
private void OnActionBeginhandler(ActionBeginEventArgs args)
18+
{
19+
// Here, you can customize your code.
20+
}
21+
}

‎blazor/multicolumn-combobox/code-snippet/data-binding/action-complete.razor‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
@using Syncfusion.Blazor.Data
3+
4+
<SfMultiColumnComboBox TItem="EmployeeData" TValue="string" AllowFiltering=true ValueField="EmployeeID" OnActionComplete="@OnActionCompletehandler" TextField="FirstName" PopupWidth="600px" Placeholder="e.g. Andrew">
5+
<SfDataManager Url="https://blazor.syncfusion.com/services/release/api/Employees" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
6+
</SfMultiColumnComboBox>
7+
8+
@code {
9+
public Query RemoteQuery = new Query();
10+
public class EmployeeData
11+
{
12+
public int EmployeeID { get; set; }
13+
public string FirstName { get; set; }
14+
public string LastName { get; set; }
15+
public string Country { get; set; }
16+
}
17+
private void OnActionCompletehandler(ActionCompleteEventArgs<EmployeeData> args)
18+
{
19+
// Here, you can customize your code.
20+
}
21+
}

‎blazor/multicolumn-combobox/code-snippet/data-binding/action-failure.razor‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
@using Syncfusion.Blazor.Data
3+
4+
<SfMultiColumnComboBox TItem="EmployeeData" TValue="string" AllowFiltering=true ValueField="EmployeeID" OnActionFailure="@OnActionFailurehandler" TextField="FirstName" PopupWidth="600px" Placeholder="e.g. Andrew">
5+
<SfDataManager Url="https://blazor.syncfusion.com/services/release/api/Employees" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
6+
</SfMultiColumnComboBox>
7+
8+
@code {
9+
public Query RemoteQuery = new Query();
10+
public class EmployeeData
11+
{
12+
public int EmployeeID { get; set; }
13+
public string FirstName { get; set; }
14+
public string LastName { get; set; }
15+
public string Country { get; set; }
16+
}
17+
private void OnActionFailurehandler(Exception args)
18+
{
19+
// Here, you can customize your code.
20+
}
21+
}

‎blazor/multicolumn-combobox/code-snippet/data-binding/add-new-item.razor‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
@using Syncfusion.Blazor.Data
3+
@using Syncfusion.Blazor.Buttons
4+
5+
<div>
6+
<SfMultiColumnComboBox @ref="multicolumnObj" TItem="Games" TValue="string" DataSource="LocalData" AllowFiltering=true ValueField="Game" TextField="Game" PopupWidth="600px" >
7+
</SfMultiColumnComboBox>
8+
</div>
9+
<div>
10+
<SfButton Content="Click to add a new item" OnClick="OnBtnClick"></SfButton>
11+
</div>
12+
13+
14+
@code {
15+
SfMultiColumnComboBox<string, Games> multicolumnObj;
16+
17+
public class Games
18+
{
19+
public string ID { get; set; }
20+
public string Game { get; set; }
21+
public string Category { get; set; } // New field
22+
}
23+
List<Games> LocalData = new List<Games> {
24+
new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
25+
new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
26+
new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
27+
new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
28+
new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
29+
new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
30+
new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
31+
new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
32+
new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
33+
};
34+
35+
public async Task OnBtnClick()
36+
{
37+
await this.multicolumnObj.AddItemsAsync(new List<Games> { new Games() { ID = "Game11", Game = "Tennis", Category ="Outdoor" } });
38+
}
39+
}

‎blazor/multicolumn-combobox/code-snippet/data-binding/combobox-with-web-api-adaptor.razor‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
@using Syncfusion.Blazor
3+
@using Syncfusion.Blazor.Data
4+
5+
<SfMultiColumnComboBox TItem="Order" TValue="string" AllowFiltering=true ValueField="ShipCountry" TextField="ShipCountry" PopupWidth="1000px" Placeholder="e.g. Andrew">
6+
<SfDataManager Url="api/Default" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>
7+
</SfMultiColumnComboBox>
8+
9+
@code {
10+
public class Order
11+
{
12+
public int? OrderID { get; set; }
13+
public string ShipCountry { get; set; }
14+
}
15+
}

‎blazor/multicolumn-combobox/code-snippet/data-binding/complex-data-type.razor‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
@using Syncfusion.Blazor.Data
3+
4+
<SfMultiColumnComboBox TValue="string" TItem="Complex" @bind-Value="@CountryValue" AllowFiltering=true ShowClearButton=true DataSource="@LocalData" PopupWidth="600px" ValueField="Code.ID" TextField="Country.CountryID" Placeholder="Select any product"></SfMultiColumnComboBox>
5+
6+
@code {
7+
8+
public string CountryValue { get; set; } = "CM";
9+
public IEnumerable<Complex> LocalData { get; set; } = new Complex().GetData();
10+
11+
public class Code
12+
{
13+
public string ID { get; set; }
14+
}
15+
16+
public class Country
17+
{
18+
public string CountryID { get; set; }
19+
}
20+
21+
public class Complex
22+
{
23+
public Country Country { get; set; }
24+
public Code Code { get; set; }
25+
public List<Complex> GetData()
26+
{
27+
List<Complex> Data = new List<Complex>();
28+
Data.Add(new Complex() { Country = new Country() { CountryID = "Australia" }, Code = new Code() { ID = "AU" } });
29+
Data.Add(new Complex() { Country = new Country() { CountryID = "Bermuda" }, Code = new Code() { ID = "BM" } });
30+
Data.Add(new Complex() { Country = new Country() { CountryID = "Canada" }, Code = new Code() { ID = "CA" } });
31+
Data.Add(new Complex() { Country = new Country() { CountryID = "Cameroon" }, Code = new Code() { ID = "CM" } });
32+
Data.Add(new Complex() { Country = new Country() { CountryID = "Denmark" }, Code = new Code() { ID = "DK" } });
33+
Data.Add(new Complex() { Country = new Country() { CountryID = "France" }, Code = new Code() { ID = "FR" } });
34+
return Data;
35+
}
36+
}
37+
}

‎blazor/multicolumn-combobox/code-snippet/data-binding/custom-adaptor.razor‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
@using Syncfusion.Blazor
2+
@using Syncfusion.Blazor.Data
3+
@using Syncfusion.Blazor.MultiColumnComboBox
4+
<SfMultiColumnComboBox TValue="string" Query="RemoteDataQuery" TItem="OrdersDetails" ValueField="OrderID" TextField="CustomID">
5+
<SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor" ></SfDataManager>
6+
</SfMultiColumnComboBox>
7+
8+
@code{
9+
10+
public Query RemoteDataQuery = new Query().Take(50).RequiresCount();
11+
12+
public class OrdersDetails
13+
{
14+
public int OrderID { get; set; }
15+
public string CustomerID { get; set; }
16+
public string ProductName { get; set; } // New field added
17+
18+
// Example static method to get all records
19+
public static List<OrdersDetails> GetAllRecords()
20+
{
21+
var records = new List<OrdersDetails>();
22+
for (int i = 1; i <= 250; i++)
23+
{
24+
records.Add(new OrdersDetails
25+
{
26+
OrderID = i,
27+
CustomerID = $"Customer {i}",
28+
ProductName = $"Product {i}" // Assigning value to the new field
29+
});
30+
}
31+
return records;
32+
}
33+
}
34+
35+
public class CustomAdaptor : DataAdaptor
36+
{
37+
static readonly HttpClient client = new HttpClient();
38+
public static List<OrdersDetails> order = OrdersDetails.GetAllRecords();
39+
public override async Task<object> ReadAsync(DataManagerRequest dm, string key = null)
40+
{
41+
IEnumerable<OrdersDetails> DataSource = order;
42+
if (dm.Search != null && dm.Search.Count > 0)
43+
{
44+
DataSource = DataOperations.PerformSearching(DataSource, dm.Search); //Search
45+
}
46+
if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
47+
{
48+
DataSource = DataOperations.PerformSorting(DataSource, dm.Sorted);
49+
}
50+
if (dm.Where != null && dm.Where.Count > 0) //Filtering
51+
{
52+
DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);
53+
}
54+
int count = DataSource.Cast<OrdersDetails>().Count();
55+
if (dm.Skip != 0)
56+
{
57+
DataSource = DataOperations.PerformSkip(DataSource, dm.Skip); //Paging
58+
}
59+
if (dm.Take != 0)
60+
{
61+
DataSource = DataOperations.PerformTake(DataSource, dm.Take);
62+
}
63+
return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;
64+
}
65+
}
66+
}

‎blazor/multicolumn-combobox/code-snippet/data-binding/data-bound.razor‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@using Syncfusion.Blazor.DropDowns
2+
3+
<SfComboBox TItem="GameFields" TValue="string" DataSource="@Games">
4+
<ComboBoxEvents TItem="GameFields" TValue="string" DataBound="@DataBoundHandler"></ComboBoxEvents>
5+
<ComboBoxFieldSettings Text="Text" Value="ID"></ComboBoxFieldSettings>
6+
</SfComboBox>
7+
8+
@code {
9+
public class GameFields
10+
{
11+
public string ID { get; set; }
12+
public string Text { get; set; }
13+
}
14+
15+
private List<GameFields> Games = new List<GameFields>() {
16+
new GameFields(){ ID= "Game1", Text= "American Football" },
17+
new GameFields(){ ID= "Game2", Text= "Badminton" },
18+
new GameFields(){ ID= "Game3", Text= "Basketball" },
19+
new GameFields(){ ID= "Game4", Text= "Cricket" },
20+
};
21+
22+
private void DataBoundHandler(DataBoundEventArgs args)
23+
{
24+
// Here, you can customize your code.
25+
}
26+
}

‎blazor/multicolumn-combobox/code-snippet/data-binding/dynamic-object-binding.razor‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
@using System.Dynamic
3+
@using Syncfusion.Blazor.Data
4+
5+
<SfMultiColumnComboBox TItem="DynamicDictionary" TValue="string" @bind-Value="@NameValue" DataSource="Orders" AllowFiltering=true ValueField="CustomerName" TextField="CustomerName" PopupWidth="600px" Placeholder="e.g. Andrew">
6+
</SfMultiColumnComboBox>
7+
8+
@code {
9+
public string NameValue { get; set; } = "Margaret";
10+
public List<DynamicDictionary> Orders = new List<DynamicDictionary>() { };
11+
protected override void OnInitialized()
12+
{
13+
Orders = Enumerable.Range(1, 15).Select((x) =>
14+
{
15+
dynamic d = new DynamicDictionary();
16+
d.OrderID = 1000 + x;
17+
d.CustomerName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Anne", "Nige", "Fuller", "Dodsworth", "Leverling", "Callahan", "Suyama", "Davolio" }[x - 1]);
18+
return d;
19+
}).Cast<DynamicDictionary>().ToList<DynamicDictionary>();
20+
}
21+
public class DynamicDictionary : System.Dynamic.DynamicObject
22+
{
23+
Dictionary<string, object> dictionary = new Dictionary<string, object>();
24+
public override bool TryGetMember(GetMemberBinder binder, out object result)
25+
{
26+
string name = binder.Name;
27+
return dictionary.TryGetValue(name, out result);
28+
}
29+
public override bool TrySetMember(SetMemberBinder binder, object value)
30+
{
31+
dictionary[binder.Name] = value;
32+
return true;
33+
}
34+
//The GetDynamicMemberNames method of DynamicObject class must be overridden and return the property names to perform data operation and editing while using DynamicObject.
35+
public override System.Collections.Generic.IEnumerable<string> GetDynamicMemberNames()
36+
{
37+
return this.dictionary?.Keys;
38+
}
39+
}
40+
}

‎blazor/multicolumn-combobox/code-snippet/data-binding/enum-data-binding.razor‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@using Syncfusion.Blazor.DropDowns;
2+
3+
<SfComboBox TValue="Values" TItem="string" Placeholder="e.g. Australia" DataSource="@EnumValues" @bind-Value="@ddlVal" Width="300px">
4+
</SfComboBox>
5+
6+
@code {
7+
8+
public string[] EnumValues = Enum.GetNames(typeof(Values));
9+
public Values ddlVal { get; set; } = Values.Canada;
10+
11+
public enum Values
12+
{
13+
Australia,
14+
Bermuda,
15+
Canada,
16+
Denmark,
17+
India,
18+
US
19+
20+
}
21+
}

0 commit comments

Comments
 (0)