Skip to content

v29.1.33 #180

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 3 commits into from
Apr 4, 2025
Merged

v29.1.33 #180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a1574ae
v29.1.33
SubathraKaliamoorthy Apr 2, 2025
076d852
v29.1.33
SubathraKaliamoorthy Apr 3, 2025
8977513
v29.1.33
kmuthukumarmkm Apr 4, 2025
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
109 changes: 109 additions & 0 deletions Blazor-MAUI-Demos/Pages/DropDowns/MultiColumnComboBox/DefaultFunctionalities.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
@page "/MultiColumn-ComboBox/Default-Functionalities"

@using Syncfusion.Blazor.MultiColumnComboBox

@*Hidden:Lines*@
@inherits SampleBaseComponent
@*End:Hidden*@

<SampleDescription>
<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>
</SampleDescription>
<ActionDescription>
<p>The MultiColumn ComboBox allows users to either input a value or select from a list that is organized into multiple columns.</p>
<p><b>See also</b></p>
<ul>
<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>
</ul>
</ActionDescription>

<div class="col-lg-12">
<div class="col-lg-8 control-section sb-property-border">
<div class="control-wrapper">
<label class="example-label">Select a product</label>
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
</div>
</div>
<div class="col-lg-4">
<div class="property-panel-section">
<div class="property-panel-header">Properties</div>
<div class="property-panel-content">
<div class="property-value">Selected Value : <b>@Value</b></div>
</div>
</div>
</div>
</div>

<style>
.control-section {
min-height: 370px;
}

.control-wrapper {
max-width: 250px;
margin: 0 auto;
padding: 50px 0px 0px;
}

.example-label {
font-size: 14px;
margin-bottom: 6px;
}

.property-panel-section .property-value {
padding: 5px 0px 10px;
font-size: 14px;
}

.property-panel-content {
padding: 0px 0px 15px 0px;
}

.property-panel-content:last-child {
padding: 0px 0px 40px 0px;
}
</style>

@code {

public class Product
{
public string Name { get; set; }
public decimal Price { get; set; }
public string Availability { get; set; }
public string Category { get; set; }
public double Rating { get; set; }
}

private List<Product> Products = new List<Product>();

private string Value { get; set; } = "Smartphone";

protected override Task OnInitializedAsync()
{
Products = new List<Product>
{
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 },
new Product { Name = "Smartwatch", Price = 199.99m, Availability = "Limited Stock", Category = "Wearables", Rating = 4.4 },
new Product { Name = "Monitor", Price = 129.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },
new Product { Name = "Keyboard", Price = 39.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.1 },
new Product { Name = "Mouse", Price = 19.99m, Availability = "Out of Stock", Category = "Accessories", Rating = 4.3 },
new Product { Name = "Printer", Price = 89.99m, Availability = "In Stock", Category = "Office Supplies", Rating = 4.2 },
new Product { Name = "Camera", Price = 499.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.7 },
new Product { Name = "Speakers", Price = 149.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.5 },
new Product { Name = "Router", Price = 79.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.4 },
new Product { Name = "External Hard Drive", Price = 59.99m, Availability = "In Stock", Category = "Storage", Rating = 4.6 },
new Product { Name = "USB Flash Drive", Price = 9.99m, Availability = "In Stock", Category = "Storage", Rating = 4.2 },
new Product { Name = "Webcam", Price = 29.99m, Availability = "Limited Stock", Category = "Accessories", Rating = 4.1 },
new Product { Name = "Smart TV", Price = 799.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.8 },
new Product { Name = "Projector", Price = 299.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.5 },
new Product { Name = "VR Headset", Price = 349.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.7 },
new Product { Name = "Drone", Price = 599.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },
new Product { Name = "Fitness Tracker", Price = 99.99m, Availability = "In Stock", Category = "Wearables", Rating = 4.3 }
};
return base.OnInitializedAsync();
}
}
161 changes: 161 additions & 0 deletions Blazor-MAUI-Demos/Pages/DropDowns/MultiColumnComboBox/Filtering.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
@page "/MultiColumn-ComboBox/Filtering"

@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.DropDowns

@*Hidden:Lines*@
@inherits SampleBaseComponent
@*End:Hidden*@

<SampleDescription>
<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>
</SampleDescription>
<ActionDescription>
<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>
<p><b>See also</b></p>
<ul>
<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>
</ul>
</ActionDescription>

<div class="col-lg-12">
<div class="col-lg-8 control-section sb-property-border">
<div class="control-wrapper">
<label class="example-label">Select an employee</label>
<SfMultiColumnComboBox TItem="Employee" TValue="string" AllowFiltering="true" PopupWidth="600px"
@bind-Value="@Value" DataSource="@Employees" ValueField="Name"
TextField="Name" Placeholder="e.g. Alice Johnson">
</SfMultiColumnComboBox>
</div>
</div>
<div class="col-lg-4">
<div class='property-panel-section'>
<div class="property-panel-header">Properties</div>
<div class="property-panel-content">
<label class="example-label">Choose filter type</label>
<SfDropDownList TValue="Syncfusion.Blazor.MultiColumnComboBox.FilterType"
TItem="string" Placeholder="Select a filter type"
DataSource="@EnumValues" @bind-Value="@SelectedFilterType" Id="ddlFilterType">
</SfDropDownList>
</div>
</div>
</div>
</div>

@code {
public class Employee
{
public string Name { get; set; }
public string Department { get; set; }
public string Role { get; set; }
public string Location { get; set; }
public int Experience { get; set; }
}

private string Value { get; set; } = "Alice Johnson";

private List<Employee> Employees = new List<Employee>();

protected override Task OnInitializedAsync()
{
Employees = new List<Employee>
{
new Employee
{
Name = "Alice Johnson",
Department = "Engineering",
Role = "Software Engineer",
Location = "New York",
Experience = 5
},
new Employee
{
Name = "Bob Smith",
Department = "Marketing",
Role = "Marketing Manager",
Location = "San Francisco",
Experience = 7
},
new Employee
{
Name = "Catherine Lee",
Department = "Finance",
Role = "Financial Analyst",
Location = "Chicago",
Experience = 4
},
new Employee
{
Name = "David Kim",
Department = "Engineering",
Role = "DevOps Engineer",
Location = "Austin",
Experience = 6
},
new Employee
{
Name = "Eva Brown",
Department = "Sales",
Role = "Sales Executive",
Location = "Boston",
Experience = 3
},
new Employee
{
Name = "Frank White",
Department = "Human Resources",
Role = "HR Manager",
Location = "Seattle",
Experience = 8
},
new Employee
{
Name = "Grace Green",
Department = "Design",
Role = "UX Designer",
Location = "Los Angeles",
Experience = 5
},
new Employee
{
Name = "Hank Wilson",
Department = "Engineering",
Role = "Front-end Developer",
Location = "Denver",
Experience = 4
}
};

return base.OnInitializedAsync();
}

public string[] EnumValues = Enum.GetNames(typeof(Syncfusion.Blazor.MultiColumnComboBox.FilterType));

public Syncfusion.Blazor.MultiColumnComboBox.FilterType SelectedFilterType { get; set; } = Syncfusion.Blazor.MultiColumnComboBox.FilterType.Contains;
}

<style>
.control-section {
min-height: 370px;
}

.control-wrapper {
max-width: 250px;
margin: 0 auto;
padding: 40px 0px 0px;
}

.example-label {
font-size: 14px;
margin-bottom: 6px;
}

.property-panel-content {
padding: 0px 0px 20px 0px;
}

.property-panel-content:last-child {
padding: 0px 0px 40px 0px;
}
</style>

Loading