1- @page " /"
2- @using Syncfusion .Blazor
3- @using Syncfusion .Blazor .DropDowns
4- @using Syncfusion .Blazor .Data
5- @using BlazorWASAM_Multi_Column .Shared ;
6- @inject HttpClient Http
7-
8- <h1 >Multi-column ComboBox!</h1 >
9-
10- Welcome to your new app.
11-
12- <div id =" ControlRegion" >
13- <div class =" control-section col-lg-12" >
14- <div id =" remote-data" class =" col-lg-6" >
15- <div class =" content" >
16- <SfComboBox @ref =" selectProduct" TValue =" string" TItem =" Product" PopupWidth =" 700px" DataSource =" @_productsList" PopupHeight =" 400px" CssClass =" e-multi-column" Placeholder =" Select a Product" AllowFiltering =" true" >
17- <ComboBoxTemplates TItem =" Product" >
18- <HeaderTemplate >
19- <table ><tr ><th class =" e-text-center" >Product ID</th ><th width =" 240px" >Product Name</th ><th >Unit Price</th ><th >Units In Stock</th ><th >Units On Order</th ></tr ></table >
20- </HeaderTemplate >
21- <ItemTemplate >
22- <table ><tbody ><tr ><td class =" e-text-center" >@( (context as Product ).ProductID ) </td ><td width =" 240px" >@( (context as Product ).ProductName ) </td ><td >@( (context as Product ).UnitPrice ) </td ><td >@( (context as Product ).UnitsInStock ) </td ><td >@( (context as Product ).UnitsOnOrder ) </td ></tr > </tbody ></table >
23- </ItemTemplate >
24- </ComboBoxTemplates >
25- <ComboBoxFieldSettings Text =" ProductName" Value =" ProductID" ></ComboBoxFieldSettings >
26- <ComboBoxEvents TValue =" string" TItem =" Product" Filtering =" OnFiltering" ></ComboBoxEvents >
27- </SfComboBox >
28- </div >
29- </div >
30- </div >
31- </div >
32-
33- @code {
34-
35- SfComboBox <string , Product > selectProduct ;
36-
37- private Product [] _productsList ;
38-
39- protected override async Task OnInitializedAsync ()
40- {
41- _productsList = await Http .GetFromJsonAsync <Product []>(" Product" );
42- }
43- // Filter event
44- private async Task OnFiltering (FilteringEventArgs args )
45- {
46- // Prevent the default filtering action and make custom seacrh.
47- args .PreventDefaultAction = true ;
48- var CustomSearch = new WhereFilter ();
49- var predicate = new List <WhereFilter >();
50- // Add multiple predicate and make filter action in multiple columns.
51- predicate .Add (new WhereFilter () { Condition = " or" , Field = " ProductName" , value = args .Text , Operator = " contains" , IgnoreCase = true });
52- predicate .Add (new WhereFilter () { Condition = " or" , Field = " UnitPrice" , value = args .Text , Operator = " contains" , IgnoreCase = true });
53- predicate .Add (new WhereFilter () { Condition = " or" , Field = " UnitsInStock" , value = args .Text , Operator = " contains" , IgnoreCase = true });
54- predicate .Add (new WhereFilter () { Condition = " or" , Field = " UnitsOnOrder" , value = args .Text , Operator = " contains" , IgnoreCase = true });
55- CustomSearch = WhereFilter .Or (predicate );
56- var query = new Query ().Where (CustomSearch );
57- // call the FilterAsync public method and pass the data source and modified query.
58- await selectProduct .FilterAsync (_productsList , query );
59- }
60-
1+ @page " /"
2+ @using Syncfusion .Blazor
3+ @using Syncfusion .Blazor .DropDowns
4+ @using Syncfusion .Blazor .Data
5+ @using MultiColumnComboBoxSample .Shared ;
6+ @inject HttpClient Http
7+
8+ <h1 >Multi-column ComboBox!</h1 >
9+
10+ Welcome to your new app.
11+
12+ <div id =" ControlRegion" >
13+ <div class =" control-section col-lg-12" >
14+ <div id =" remote-data" class =" col-lg-6" >
15+ <div class =" content" >
16+ <SfComboBox @ref =" selectProduct" TValue =" string" TItem =" Product" PopupWidth =" 700px" DataSource =" @_productsList" PopupHeight =" 400px" CssClass =" e-multi-column" Placeholder =" Select a Product" AllowFiltering =" true" >
17+ <ComboBoxTemplates TItem =" Product" >
18+ <HeaderTemplate >
19+ <table ><tr ><th class =" e-text-center" >Product ID</th ><th width =" 240px" >Product Name</th ><th >Unit Price</th ><th >Units In Stock</th ><th >Units On Order</th ></tr ></table >
20+ </HeaderTemplate >
21+ <ItemTemplate >
22+ <table ><tbody ><tr ><td class =" e-text-center" >@( (context as Product ).ProductID ) </td ><td width =" 240px" >@( (context as Product ).ProductName ) </td ><td >@( (context as Product ).UnitPrice ) </td ><td >@( (context as Product ).UnitsInStock ) </td ><td >@( (context as Product ).UnitsOnOrder ) </td ></tr > </tbody ></table >
23+ </ItemTemplate >
24+ </ComboBoxTemplates >
25+ <ComboBoxFieldSettings Text =" ProductName" Value =" ProductID" ></ComboBoxFieldSettings >
26+ <ComboBoxEvents TValue =" string" TItem =" Product" Filtering =" OnFiltering" ></ComboBoxEvents >
27+ </SfComboBox >
28+ </div >
29+ </div >
30+ </div >
31+ </div >
32+
33+ @code {
34+
35+ SfComboBox <string , Product > selectProduct ;
36+
37+ private Product [] _productsList ;
38+
39+ protected override async Task OnInitializedAsync ()
40+ {
41+ _productsList = await Http .GetFromJsonAsync <Product []>(" Product" );
42+ }
43+ // Filter event
44+ private async Task OnFiltering (FilteringEventArgs args )
45+ {
46+ // Prevent the default filtering action and make custom seacrh.
47+ args .PreventDefaultAction = true ;
48+ var CustomSearch = new WhereFilter ();
49+ var predicate = new List <WhereFilter >();
50+ // Add multiple predicate and make filter action in multiple columns.
51+ predicate .Add (new WhereFilter () { Condition = " or" , Field = " ProductName" , value = args .Text , Operator = " contains" , IgnoreCase = true });
52+ predicate .Add (new WhereFilter () { Condition = " or" , Field = " UnitPrice" , value = args .Text , Operator = " contains" , IgnoreCase = true });
53+ predicate .Add (new WhereFilter () { Condition = " or" , Field = " UnitsInStock" , value = args .Text , Operator = " contains" , IgnoreCase = true });
54+ predicate .Add (new WhereFilter () { Condition = " or" , Field = " UnitsOnOrder" , value = args .Text , Operator = " contains" , IgnoreCase = true });
55+ CustomSearch = WhereFilter .Or (predicate );
56+ var query = new Query ().Where (CustomSearch );
57+ // call the FilterAsync public method and pass the data source and modified query.
58+ await selectProduct .FilterAsync (_productsList , query );
59+ }
60+
6161}
0 commit comments