Skip to content

Commit a1574ae

Browse files
SubathraKaliamoorthySubathraKaliamoorthy
committed
v29.1.33
1 parent eb700e9 commit a1574ae

File tree

21 files changed

+2032
-28
lines changed

21 files changed

+2032
-28
lines changed

‎Blazor-MAUI-Demos/Pages/DropDowns/MultiColumnComboBox/DefaultFunctionalities.razor

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
@page "/MultiColumn-ComboBox/Default-Functionalities"
2+
3+
@using Syncfusion.Blazor.MultiColumnComboBox
4+
5+
@*Hidden:Lines*@
6+
@inherits SampleBaseComponent
7+
@*End:Hidden*@
8+
9+
<SampleDescription>
10+
<p>This example demonstrates the primary features of the <a href="https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox" aria-label="Feature Tour of Blazor MultiColumn ComboBox">Blazor MultiColumn ComboBox</a>. You can type into the ComboBox or click the dropdown icon to choose an item from multiple columns.</p>
11+
</SampleDescription>
12+
<ActionDescription>
13+
<p>The MultiColumn ComboBox allows users to either input a value or select from a list that is organized into multiple columns.</p>
14+
<p><b>See also</b></p>
15+
<ul>
16+
<li><a href="https://blazor.syncfusion.com/documentation/multicolumn-combobox/getting-started/" target="_blank" aria-label="Blazor MultiColumn ComboBox Getting Started documentation">Getting Started with Blazor MultiColumn ComboBox</a></li>
17+
</ul>
18+
</ActionDescription>
19+
20+
<div class="col-lg-12">
21+
<div class="col-lg-8 control-section sb-property-border">
22+
<div class="control-wrapper">
23+
<label class="example-label">Select a product</label>
24+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
25+
</div>
26+
</div>
27+
<div class="col-lg-4">
28+
<div class="property-panel-section">
29+
<div class="property-panel-header">Properties</div>
30+
<div class="property-panel-content">
31+
<div class="property-value">Selected Value : <b>@Value</b></div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
37+
<style>
38+
.control-section {
39+
min-height: 370px;
40+
}
41+
42+
.control-wrapper {
43+
max-width: 250px;
44+
margin: 0 auto;
45+
padding: 50px 0px 0px;
46+
}
47+
48+
.example-label {
49+
font-size: 14px;
50+
margin-bottom: 6px;
51+
}
52+
53+
.property-panel-section .property-value {
54+
padding: 5px 0px 10px;
55+
font-size: 14px;
56+
}
57+
58+
.property-panel-content {
59+
padding: 0px 0px 15px 0px;
60+
}
61+
62+
.property-panel-content:last-child {
63+
padding: 0px 0px 40px 0px;
64+
}
65+
</style>
66+
67+
@code {
68+
69+
public class Product
70+
{
71+
public string Name { get; set; }
72+
public decimal Price { get; set; }
73+
public string Availability { get; set; }
74+
public string Category { get; set; }
75+
public double Rating { get; set; }
76+
}
77+
78+
private List<Product> Products = new List<Product>();
79+
80+
private string Value { get; set; } = "Smartphone";
81+
82+
protected override Task OnInitializedAsync()
83+
{
84+
Products = new List<Product>
85+
{
86+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
87+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
88+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
89+
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 },
90+
new Product { Name = "Smartwatch", Price = 199.99m, Availability = "Limited Stock", Category = "Wearables", Rating = 4.4 },
91+
new Product { Name = "Monitor", Price = 129.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },
92+
new Product { Name = "Keyboard", Price = 39.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.1 },
93+
new Product { Name = "Mouse", Price = 19.99m, Availability = "Out of Stock", Category = "Accessories", Rating = 4.3 },
94+
new Product { Name = "Printer", Price = 89.99m, Availability = "In Stock", Category = "Office Supplies", Rating = 4.2 },
95+
new Product { Name = "Camera", Price = 499.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.7 },
96+
new Product { Name = "Speakers", Price = 149.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.5 },
97+
new Product { Name = "Router", Price = 79.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.4 },
98+
new Product { Name = "External Hard Drive", Price = 59.99m, Availability = "In Stock", Category = "Storage", Rating = 4.6 },
99+
new Product { Name = "USB Flash Drive", Price = 9.99m, Availability = "In Stock", Category = "Storage", Rating = 4.2 },
100+
new Product { Name = "Webcam", Price = 29.99m, Availability = "Limited Stock", Category = "Accessories", Rating = 4.1 },
101+
new Product { Name = "Smart TV", Price = 799.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.8 },
102+
new Product { Name = "Projector", Price = 299.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.5 },
103+
new Product { Name = "VR Headset", Price = 349.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.7 },
104+
new Product { Name = "Drone", Price = 599.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },
105+
new Product { Name = "Fitness Tracker", Price = 99.99m, Availability = "In Stock", Category = "Wearables", Rating = 4.3 }
106+
};
107+
return base.OnInitializedAsync();
108+
}
109+
}

‎Blazor-MAUI-Demos/Pages/DropDowns/MultiColumnComboBox/Filtering.razor

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
@page "/MultiColumn-ComboBox/Filtering"
2+
3+
@using Syncfusion.Blazor.MultiColumnComboBox
4+
@using Syncfusion.Blazor.DropDowns
5+
6+
@*Hidden:Lines*@
7+
@inherits SampleBaseComponent
8+
@*End:Hidden*@
9+
10+
<SampleDescription>
11+
<p>This example demonstrates the filtering capabilities of the <a href="https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox" aria-label="Feature Tour of Blazor MultiColumn ComboBox">Blazor MultiColumn ComboBox</a>. Users can type in the ComboBox to filter and narrow down the list of items across multiple columns, making it easier to find specific entries.</p>
12+
</SampleDescription>
13+
<ActionDescription>
14+
<p>The MultiColumn ComboBox supports filtering, which allows users to search for and select items by typing keywords. The available items are dynamically filtered based on the input, ensuring quick access to the desired data.</p>
15+
<p><b>See also</b></p>
16+
<ul>
17+
<li><a href="https://blazor.syncfusion.com/documentation/multicolumn-combobox/getting-started/" target="_blank" aria-label="Blazor MultiColumn ComboBox Getting Started documentation">Getting Started with Blazor MultiColumn ComboBox</a></li>
18+
</ul>
19+
</ActionDescription>
20+
21+
<div class="col-lg-12">
22+
<div class="col-lg-8 control-section sb-property-border">
23+
<div class="control-wrapper">
24+
<label class="example-label">Select an employee</label>
25+
<SfMultiColumnComboBox TItem="Employee" TValue="string" AllowFiltering="true" PopupWidth="600px"
26+
@bind-Value="@Value" DataSource="@Employees" ValueField="Name"
27+
TextField="Name" Placeholder="e.g. Alice Johnson">
28+
</SfMultiColumnComboBox>
29+
</div>
30+
</div>
31+
<div class="col-lg-4">
32+
<div class='property-panel-section'>
33+
<div class="property-panel-header">Properties</div>
34+
<div class="property-panel-content">
35+
<label class="example-label">Choose filter type</label>
36+
<SfDropDownList TValue="Syncfusion.Blazor.MultiColumnComboBox.FilterType"
37+
TItem="string" Placeholder="Select a filter type"
38+
DataSource="@EnumValues" @bind-Value="@SelectedFilterType" Id="ddlFilterType">
39+
</SfDropDownList>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
45+
@code {
46+
public class Employee
47+
{
48+
public string Name { get; set; }
49+
public string Department { get; set; }
50+
public string Role { get; set; }
51+
public string Location { get; set; }
52+
public int Experience { get; set; }
53+
}
54+
55+
private string Value { get; set; } = "Alice Johnson";
56+
57+
private List<Employee> Employees = new List<Employee>();
58+
59+
protected override Task OnInitializedAsync()
60+
{
61+
Employees = new List<Employee>
62+
{
63+
new Employee
64+
{
65+
Name = "Alice Johnson",
66+
Department = "Engineering",
67+
Role = "Software Engineer",
68+
Location = "New York",
69+
Experience = 5
70+
},
71+
new Employee
72+
{
73+
Name = "Bob Smith",
74+
Department = "Marketing",
75+
Role = "Marketing Manager",
76+
Location = "San Francisco",
77+
Experience = 7
78+
},
79+
new Employee
80+
{
81+
Name = "Catherine Lee",
82+
Department = "Finance",
83+
Role = "Financial Analyst",
84+
Location = "Chicago",
85+
Experience = 4
86+
},
87+
new Employee
88+
{
89+
Name = "David Kim",
90+
Department = "Engineering",
91+
Role = "DevOps Engineer",
92+
Location = "Austin",
93+
Experience = 6
94+
},
95+
new Employee
96+
{
97+
Name = "Eva Brown",
98+
Department = "Sales",
99+
Role = "Sales Executive",
100+
Location = "Boston",
101+
Experience = 3
102+
},
103+
new Employee
104+
{
105+
Name = "Frank White",
106+
Department = "Human Resources",
107+
Role = "HR Manager",
108+
Location = "Seattle",
109+
Experience = 8
110+
},
111+
new Employee
112+
{
113+
Name = "Grace Green",
114+
Department = "Design",
115+
Role = "UX Designer",
116+
Location = "Los Angeles",
117+
Experience = 5
118+
},
119+
new Employee
120+
{
121+
Name = "Hank Wilson",
122+
Department = "Engineering",
123+
Role = "Front-end Developer",
124+
Location = "Denver",
125+
Experience = 4
126+
}
127+
};
128+
129+
return base.OnInitializedAsync();
130+
}
131+
132+
public string[] EnumValues = Enum.GetNames(typeof(Syncfusion.Blazor.MultiColumnComboBox.FilterType));
133+
134+
public Syncfusion.Blazor.MultiColumnComboBox.FilterType SelectedFilterType { get; set; } = Syncfusion.Blazor.MultiColumnComboBox.FilterType.Contains;
135+
}
136+
137+
<style>
138+
.control-section {
139+
min-height: 370px;
140+
}
141+
142+
.control-wrapper {
143+
max-width: 250px;
144+
margin: 0 auto;
145+
padding: 40px 0px 0px;
146+
}
147+
148+
.example-label {
149+
font-size: 14px;
150+
margin-bottom: 6px;
151+
}
152+
153+
.property-panel-content {
154+
padding: 0px 0px 20px 0px;
155+
}
156+
157+
.property-panel-content:last-child {
158+
padding: 0px 0px 40px 0px;
159+
}
160+
</style>
161+

0 commit comments

Comments
 (0)