Skip to content

Commit b5e6d99

Browse files
MalleshRavichandranMalleshRavichandran
committed
910110: Update the popup setting section in Multi column documentation.
1 parent d59e2c8 commit b5e6d99

12 files changed

+381
-2
lines changed

‎blazor-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3408,6 +3408,7 @@
34083408
<li> <a href="/blazor/multicolumn-combobox/getting-started">Blazor Server and WASM App</a></li>
34093409
</ul>
34103410
</li>
3411+
<li> <a href="/blazor/multicolumn-combobox/popup-setting">Popup Setting</a></li>
34113412
<li><a href="/blazor/multicolumn-combobox/sorting">Sorting</a></li>
34123413
<li> <a href="/blazor/multicolumn-combobox/virtualization">Virtualization</a></li>
34133414
</ul>

‎blazor/multicolumn-combobox/code-snippet/popup-setting/popup-height.razor‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product" PopupHeight="500px"></SfMultiColumnComboBox>
4+
@code {
5+
public class Product
6+
{
7+
public string Name { get; set; }
8+
public decimal Price { get; set; }
9+
public string Availability { get; set; }
10+
public string Category { get; set; }
11+
public double Rating { get; set; }
12+
}
13+
private List<Product> Products = new List<Product>();
14+
private string Value { get; set; } = "Smartphone";
15+
protected override Task OnInitializedAsync()
16+
{
17+
Products = new List<Product>
18+
{
19+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
20+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
21+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
22+
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 },
23+
new Product { Name = "Smartwatch", Price = 199.99m, Availability = "Limited Stock", Category = "Wearables", Rating = 4.4 },
24+
new Product { Name = "Monitor", Price = 129.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 }
25+
};
26+
return base.OnInitializedAsync();
27+
}
28+
}

‎blazor/multicolumn-combobox/code-snippet/popup-setting/popup-resize.razor‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
@inject IJSRuntime JsRuntime
3+
<SfMultiColumnComboBox ID="multicolumncombobox" @bind-Value="@Value" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
4+
@code {
5+
public class Product
6+
{
7+
public string Name { get; set; }
8+
public decimal Price { get; set; }
9+
public string Availability { get; set; }
10+
public string Category { get; set; }
11+
public double Rating { get; set; }
12+
}
13+
private List<Product> Products = new List<Product>();
14+
private string Value { get; set; } = "Smartphone";
15+
protected override Task OnInitializedAsync()
16+
{
17+
Products = new List<Product>
18+
{
19+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
20+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
21+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
22+
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }
23+
};
24+
return base.OnInitializedAsync();
25+
}
26+
}

‎blazor/multicolumn-combobox/code-snippet/popup-setting/popup-width.razor‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
4+
@code {
5+
public class Product
6+
{
7+
public string Name { get; set; }
8+
public decimal Price { get; set; }
9+
public string Availability { get; set; }
10+
public string Category { get; set; }
11+
public double Rating { get; set; }
12+
}
13+
private List<Product> Products = new List<Product>();
14+
private string Value { get; set; } = "Smartphone";
15+
protected override Task OnInitializedAsync()
16+
{
17+
Products = new List<Product>
18+
{
19+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
20+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
21+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
22+
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 },
23+
new Product { Name = "Smartwatch", Price = 199.99m, Availability = "Limited Stock", Category = "Wearables", Rating = 4.4 },
24+
new Product { Name = "Monitor", Price = 129.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 }
25+
};
26+
return base.OnInitializedAsync();
27+
}
28+
}

‎blazor/multicolumn-combobox/code-snippet/popup-setting/popupclosed-event.razor‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product" PopupClosed="@ClosedHandler"></SfMultiColumnComboBox>
4+
@code {
5+
public class Product
6+
{
7+
public string Name { get; set; }
8+
public decimal Price { get; set; }
9+
public string Availability { get; set; }
10+
public string Category { get; set; }
11+
public double Rating { get; set; }
12+
}
13+
private List<Product> Products = new List<Product>();
14+
private string Value { get; set; } = "Smartphone";
15+
protected override Task OnInitializedAsync()
16+
{
17+
Products = new List<Product>
18+
{
19+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
20+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
21+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
22+
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }
23+
};
24+
return base.OnInitializedAsync();
25+
}
26+
private void ClosedHandler(object e)
27+
{
28+
// Here, you can customize your code.
29+
}
30+
}

‎blazor/multicolumn-combobox/code-snippet/popup-setting/popupclosing-event.razor‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product" PopupClosing="@HandlePopupClose"></SfMultiColumnComboBox>
3+
@code {
4+
public class Product
5+
{
6+
public string Name { get; set; }
7+
public decimal Price { get; set; }
8+
public string Availability { get; set; }
9+
public string Category { get; set; }
10+
public double Rating { get; set; }
11+
}
12+
private List<Product> Products = new List<Product>();
13+
private string Value { get; set; } = "Smartphone";
14+
protected override Task OnInitializedAsync()
15+
{
16+
Products = new List<Product>
17+
{
18+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
19+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
20+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
21+
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }
22+
};
23+
return base.OnInitializedAsync();
24+
}
25+
private void HandlePopupClose(PopupClosingEventArgs args)
26+
{
27+
// Here, you can customize your code.
28+
}
29+
}

‎blazor/multicolumn-combobox/code-snippet/popup-setting/popupopening-event.razor‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product" PopupOpening="@HandlePopupOpen"></SfMultiColumnComboBox>
3+
@code {
4+
public class Product
5+
{
6+
public string Name { get; set; }
7+
public decimal Price { get; set; }
8+
public string Availability { get; set; }
9+
public string Category { get; set; }
10+
public double Rating { get; set; }
11+
}
12+
private List<Product> Products = new List<Product>();
13+
private string Value { get; set; } = "Smartphone";
14+
protected override Task OnInitializedAsync()
15+
{
16+
Products = new List<Product>
17+
{
18+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
19+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
20+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
21+
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }
22+
};
23+
return base.OnInitializedAsync();
24+
}
25+
private void HandlePopupOpen(PopupOpeningEventArgs args)
26+
{
27+
// Here, you can customize your code.
28+
}
29+
}

‎blazor/multicolumn-combobox/code-snippet/popup-setting/preventing-opening-closing.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+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product" PopupClosing="@HandlePopupClose"></SfMultiColumnComboBox>
3+
4+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product" PopupOpening="@HandlePopupOpen"></SfMultiColumnComboBox>
5+
6+
7+
@code {
8+
public class Product
9+
{
10+
public string Name { get; set; }
11+
public decimal Price { get; set; }
12+
public string Availability { get; set; }
13+
public string Category { get; set; }
14+
public double Rating { get; set; }
15+
}
16+
private List<Product> Products = new List<Product>();
17+
private string Value { get; set; } = "Smartphone";
18+
protected override Task OnInitializedAsync()
19+
{
20+
Products = new List<Product>
21+
{
22+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
23+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
24+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
25+
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }
26+
};
27+
return base.OnInitializedAsync();
28+
}
29+
private void HandlePopupClose(PopupClosingEventArgs args)
30+
{
31+
args.Cancel = true;
32+
}
33+
private void HandlePopupOpen(PopupOpeningEventArgs args)
34+
{
35+
args.Cancel = true;
36+
}
37+
}

‎blazor/multicolumn-combobox/code-snippet/popup-setting/show-popup-on-initial-loading.razor‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
@using Syncfusion.Blazor.Data
3+
4+
<SfMultiColumnComboBox @ref="multicolumnObj" TValue="string" TItem="Product" AllowFiltering=true ShowClearButton=true DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product" Created="@CreatedHandler"></SfMultiColumnComboBox>
5+
6+
@code {
7+
8+
SfMultiColumnComboBox<string, Product> multicolumnObj { get; set; }
9+
public class Product
10+
{
11+
public string Name { get; set; }
12+
public decimal Price { get; set; }
13+
public string Availability { get; set; }
14+
public string Category { get; set; }
15+
public double Rating { get; set; }
16+
}
17+
private List<Product> Products = new List<Product>();
18+
private string Value { get; set; } = "Smartphone";
19+
protected override Task OnInitializedAsync()
20+
{
21+
Products = new List<Product>
22+
{
23+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
24+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
25+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
26+
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }
27+
28+
};
29+
return base.OnInitializedAsync();
30+
}
31+
private void CreatedHandler(object e)
32+
{
33+
multicolumnObj.ShowPopupAsync();
34+
}
35+
}

‎blazor/multicolumn-combobox/getting-started-with-web-app.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ By default, the width of the popup list automatically adjusts to match the width
176176

177177
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhJjECYAMdTnsmm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Popup Height and Width in Blazor MultiColumn ComboBox](./images/blazor-multicolumncombobox-popup-customization.png)" %}
178178

179-
N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ComboBox).
179+
N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MultiColumnComboBox).
180180

181181
## See also
182182

0 commit comments

Comments
 (0)