Skip to content

Commit 400a8e4

Browse files
author
Karthik Ravichandran
committed
Updated the dropdowns and inputs samples
1 parent 77e30f0 commit 400a8e4

File tree

16 files changed

+284
-244
lines changed

16 files changed

+284
-244
lines changed

‎ej2-blazor-samples/Pages/DropDowns/AutoComplete/DataBinding.razor‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,9 @@
5858
<div id='local-data'>
5959
<div class='content'>
6060
<h4>Local Data</h4>
61-
<EjsAutoComplete ID="country" PlaceHolder="e.g. Australia" DataSource="@localdata" SortOrder="@sort" AutoFill="true" FilterType="@FilterType.StartsWith" Fields="@AutoCompleteFieldSettings"></EjsAutoComplete>
61+
<EjsAutoComplete ID="country" PlaceHolder="e.g. Australia" DataSource="@country" SortOrder="@sort" AutoFill="true" FilterType="@Syncfusion.EJ2.RazorComponents.DropDowns.FilterType.StartsWith">
62+
<AutoCompleteFieldSettings value="Name"></AutoCompleteFieldSettings>
63+
</EjsAutoComplete>
6264
</div>
6365
</div>
6466
</div>
@@ -71,30 +73,36 @@
7173
}
7274
</style>
7375

74-
@functions{
75-
List<object> localdata = new List<object>
76+
@code{
77+
public class countries
7678
{
77-
new { Name = "Australia", Code = "AU" },
78-
new { Name = "Bermuda", Code = "BM" },
79-
new { Name = "Canada", Code = "CA" },
80-
new { Name = "Cameroon", Code = "CM" },
81-
new { Name = "Denmark", Code = "DK" },
82-
new { Name = "France", Code = "FR" },
83-
new { Name = "Finland", Code = "FI" },
84-
new { Name = "Germany", Code = "DE" },
85-
new { Name = "Greenland", Code = "GL" },
86-
new { Name = "Hong Kong", Code = "HK" },
87-
new { Name = "India", Code = "IN" },
88-
new { Name = "Italy", Code = "IT" },
89-
new { Name = "Japan", Code = "JP" },
90-
new { Name = "Mexico", Code = "MX" },
91-
new { Name = "Norway", Code = "NO" },
92-
new { Name = "Poland", Code = "PL" },
93-
new { Name = "Switzerland", Code = "CH" },
94-
new { Name = "United Kingdom", Code = "GB" },
95-
new { Name = "United States", Code = "US" },
96-
};
79+
public string Name { get; set; }
9780

98-
public object AutoCompleteFieldSettings = new { value = "Name" };
99-
public string sort { get; set; } = "Ascending";
81+
public string Code { get; set; }
10082
}
83+
84+
List<countries> country = new List<countries>
85+
{
86+
new countries() { Name = "Australia", Code = "AU" },
87+
new countries() { Name = "Bermuda", Code = "BM" },
88+
new countries() { Name = "Canada", Code = "CA" },
89+
new countries() { Name = "Cameroon", Code = "CM" },
90+
new countries() { Name = "Denmark", Code = "DK" },
91+
new countries() { Name = "France", Code = "FR" },
92+
new countries() { Name = "Finland", Code = "FI" },
93+
new countries() { Name = "Germany", Code = "DE" },
94+
new countries() { Name = "Greenland", Code = "GL" },
95+
new countries() { Name = "Hong Kong", Code = "HK" },
96+
new countries() { Name = "India", Code = "IN" },
97+
new countries() { Name = "Italy", Code = "IT" },
98+
new countries() { Name = "Japan", Code = "JP" },
99+
new countries() { Name = "Mexico", Code = "MX" },
100+
new countries() { Name = "Norway", Code = "NO" },
101+
new countries() { Name = "Poland", Code = "PL" },
102+
new countries() { Name = "Switzerland", Code = "CH" },
103+
new countries() { Name = "United Kingdom", Code = "GB" },
104+
new countries() { Name = "United States", Code = "US" },
105+
};
106+
107+
public string sort { get; set; } = "Ascending";
108+
}

‎ej2-blazor-samples/Pages/DropDowns/AutoComplete/DefaultFunctionalities.razor‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@
3030

3131
<div class="col-lg-12 control-section">
3232
<div class="control_wrapper">
33-
<EjsAutoComplete ID="games" PlaceHolder="e.g. Basketball" DataSource="@games"></EjsAutoComplete>
33+
<EjsAutoComplete ID="games" PlaceHolder="e.g. Basketball" DataSource="@games">
34+
<AutoCompleteFieldSettings Value="text"></AutoCompleteFieldSettings>
35+
</EjsAutoComplete>
3436
</div>
3537
</div>
3638

@@ -42,17 +44,26 @@
4244
}
4345
</style>
4446

45-
@functions{
46-
List<object> games = new List<object> {
47-
new { id= "Game1", text= "American Football" },
48-
new { id= "Game2", text= "Badminton" },
49-
new { id= "Game3", text= "Basketball" },
50-
new { id= "Game4", text= "Cricket" },
51-
new { id= "Game5", text= "Football" },
52-
new { id= "Game6", text= "Golf" },
53-
new { id= "Game7", text= "Hockey" },
54-
new { id= "Game8", text= "Rugby"},
55-
new { id= "Game9", text= "Snooker" },
56-
new { id= "Game10", text= "Tennis"},
57-
};
58-
}
47+
@code{
48+
public class GameFields
49+
{
50+
public string id { get; set; }
51+
52+
public string text { get; set; }
53+
}
54+
55+
List<GameFields> games = new List<GameFields>
56+
()
57+
{
58+
new GameFields(){ id= "Game1", text= "American Football" },
59+
new GameFields(){ id= "Game2", text= "Badminton" },
60+
new GameFields(){ id= "Game3", text= "Basketball" },
61+
new GameFields(){ id= "Game4", text= "Cricket" },
62+
new GameFields(){ id= "Game5", text= "Football" },
63+
new GameFields(){ id= "Game6", text= "Golf" },
64+
new GameFields(){ id= "Game7", text= "Hockey" },
65+
new GameFields(){ id= "Game8", text= "Rugby"},
66+
new GameFields(){ id= "Game9", text= "Snooker" },
67+
new GameFields(){ id= "Game10", text= "Tennis"},
68+
};
69+
}

‎ej2-blazor-samples/Pages/DropDowns/ComboBox/DataBinding.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
}
7070
</style>
7171

72-
@functions{
72+
@code{
7373
List<object> games = new List<object>
7474
{
7575
new { id= "Game1", text= "American Football" },

‎ej2-blazor-samples/Pages/DropDowns/ComboBox/DefaultFunctionalities.razor‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@
2727

2828
<div class="col-lg-12 control-section">
2929
<div class="control_wrapper">
30-
<EjsComboBox ID="games" PopupHeight="230px" fields="@comboBoxFields" index="2" placeholder="Select a game" DataSource="@games"></EjsComboBox>
30+
<EjsComboBox ID="games" PopupHeight="230px" index="2" placeholder="Select a game" DataSource="@games">
31+
<ComboBoxFieldSettings Text="text" Value="id"></ComboBoxFieldSettings>
32+
</EjsComboBox>
3133
</div>
3234
</div>
3335

@@ -39,24 +41,25 @@
3941
}
4042
</style>
4143

42-
@functions{
43-
List<object> games = new List<object>
44-
{
45-
new { id= "Game1", text= "American Football" },
46-
new { id= "Game2", text= "Badminton" },
47-
new { id= "Game3", text= "Basketball" },
48-
new { id= "Game4", text= "Cricket" },
49-
new { id= "Game5", text= "Football" },
50-
new { id= "Game6", text= "Golf" },
51-
new { id= "Game7", text= "Hockey" },
52-
new { id= "Game8", text= "Rugby"},
53-
new { id= "Game9", text= "Snooker" },
54-
new { id= "Game10", text= "Tennis"},
55-
};
44+
@code{
45+
public class GameFields
46+
{
47+
public string id { get; set; }
5648

57-
public object comboBoxFields = new
49+
public string text { get; set; }
50+
}
51+
52+
List<GameFields> games = new List<GameFields>()
5853
{
59-
Text = "Game",
60-
Value = "Id"
54+
new GameFields(){ id= "Game1", text= "American Football" },
55+
new GameFields(){ id= "Game2", text= "Badminton" },
56+
new GameFields(){ id= "Game3", text= "Basketball" },
57+
new GameFields(){ id= "Game4", text= "Cricket" },
58+
new GameFields(){ id= "Game5", text= "Football" },
59+
new GameFields(){ id= "Game6", text= "Golf" },
60+
new GameFields(){ id= "Game7", text= "Hockey" },
61+
new GameFields(){ id= "Game8", text= "Rugby"},
62+
new GameFields(){ id= "Game9", text= "Snooker" },
63+
new GameFields(){ id= "Game10", text= "Tennis"},
6164
};
62-
}
65+
}

‎ej2-blazor-samples/Pages/DropDowns/ComboBox/Filtering.razor‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,9 @@
3232

3333
<div class="col-lg-12 control-section">
3434
<div class="control_wrapper">
35-
<EjsComboBox ID="country" PlaceHolder="Select a country" AllowFiltering="true" DataSource="@country" Fields="@ComboBoxFieldSettings"></EjsComboBox>
35+
<EjsComboBox ID="country" PlaceHolder="Select a country" AllowFiltering="true" DataSource="@country">
36+
<ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
37+
</EjsComboBox>
3638
</div>
3739
</div>
3840

@@ -44,34 +46,34 @@
4446
}
4547
</style>
4648

47-
@functions{
48-
List<object>
49-
country = new List<object>
50-
{
51-
new { Name = "Australia", Code = "AU" },
52-
new { Name = "Bermuda", Code = "BM" },
53-
new { Name = "Canada", Code = "CA" },
54-
new { Name = "Cameroon", Code = "CM" },
55-
new { Name = "Denmark", Code = "DK" },
56-
new { Name = "France", Code = "FR" },
57-
new { Name = "Finland", Code = "FI" },
58-
new { Name = "Germany", Code = "DE" },
59-
new { Name = "Greenland", Code = "GL" },
60-
new { Name = "Hong Kong", Code = "HK" },
61-
new { Name = "India", Code = "IN" },
62-
new { Name = "Italy", Code = "IT" },
63-
new { Name = "Japan", Code = "JP" },
64-
new { Name = "Mexico", Code = "MX" },
65-
new { Name = "Norway", Code = "NO" },
66-
new { Name = "Poland", Code = "PL" },
67-
new { Name = "Switzerland", Code = "CH" },
68-
new { Name = "United Kingdom", Code = "GB" },
69-
new { Name = "United States", Code = "US" },
70-
};
49+
@code{
50+
public class countries
51+
{
52+
public string Name { get; set; }
53+
54+
public string Code { get; set; }
55+
}
7156

72-
public object ComboBoxFieldSettings = new
57+
List<countries> country = new List<countries>
7358
{
74-
text = "Name",
75-
value = "Code"
59+
new countries() { Name = "Australia", Code = "AU" },
60+
new countries() { Name = "Bermuda", Code = "BM" },
61+
new countries() { Name = "Canada", Code = "CA" },
62+
new countries() { Name = "Cameroon", Code = "CM" },
63+
new countries() { Name = "Denmark", Code = "DK" },
64+
new countries() { Name = "France", Code = "FR" },
65+
new countries() { Name = "Finland", Code = "FI" },
66+
new countries() { Name = "Germany", Code = "DE" },
67+
new countries() { Name = "Greenland", Code = "GL" },
68+
new countries() { Name = "Hong Kong", Code = "HK" },
69+
new countries() { Name = "India", Code = "IN" },
70+
new countries() { Name = "Italy", Code = "IT" },
71+
new countries() { Name = "Japan", Code = "JP" },
72+
new countries() { Name = "Mexico", Code = "MX" },
73+
new countries() { Name = "Norway", Code = "NO" },
74+
new countries() { Name = "Poland", Code = "PL" },
75+
new countries() { Name = "Switzerland", Code = "CH" },
76+
new countries() { Name = "United Kingdom", Code = "GB" },
77+
new countries() { Name = "United States", Code = "US" }
7678
};
77-
}
79+
}

‎ej2-blazor-samples/Pages/DropDowns/DropDownList/DataBinding.razor‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,9 @@
5959
<div id='local-data'>
6060
<div class='content'>
6161
<h4>Local Data</h4>
62-
<EjsDropDownList ID="games" PopupHeight="200px" fields="@dropDownFields" placeholder="Select a game" DataSource="@games"></EjsDropDownList>
62+
<EjsDropDownList ID="games" Index="2" PopupHeight="220px" placeholder="Select a game" DataSource="@games">
63+
<DropDownListFieldSettings text="text" value="id"></DropDownListFieldSettings>
64+
</EjsDropDownList>
6365
</div>
6466
</div>
6567
</div>
@@ -72,25 +74,25 @@
7274
}
7375
</style>
7476

75-
@functions{
76-
List<object> games = new List<object>
77-
{
78-
new { id= "Game1", text= "American Football" },
79-
new { id= "Game2", text= "Badminton" },
80-
new { id= "Game3", text= "Basketball" },
81-
new { id= "Game4", text= "Cricket" },
82-
new { id= "Game5", text= "Football" },
83-
new { id= "Game6", text= "Golf" },
84-
new { id= "Game7", text= "Hockey" },
85-
new { id= "Game8", text= "Rugby"},
86-
new { id= "Game9", text= "Snooker" },
87-
new { id= "Game10", text= "Tennis"},
88-
};
77+
@code{
78+
public class GameFields
79+
{
80+
public string id { get; set; }
8981

90-
public object dropDownFields = new
82+
public string text { get; set; }
83+
}
84+
85+
List<GameFields> games = new List<GameFields>()
9186
{
92-
text = "text",
93-
value = "id"
87+
new GameFields(){ id= "Game1", text= "American Football" },
88+
new GameFields(){ id= "Game2", text= "Badminton" },
89+
new GameFields(){ id= "Game3", text= "Basketball" },
90+
new GameFields(){ id= "Game4", text= "Cricket" },
91+
new GameFields(){ id= "Game5", text= "Football" },
92+
new GameFields(){ id= "Game6", text= "Golf" },
93+
new GameFields(){ id= "Game7", text= "Hockey" },
94+
new GameFields(){ id= "Game8", text= "Rugby"},
95+
new GameFields(){ id= "Game9", text= "Snooker" },
96+
new GameFields(){ id= "Game10", text= "Tennis"},
9497
};
95-
9698
}

‎ej2-blazor-samples/Pages/DropDowns/DropDownList/DefaultFunctionalities.razor‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@
3434

3535
<div class="col-lg-12 control-section">
3636
<div class="control_wrapper">
37-
<EjsDropDownList ID="games" Index="2" PopupHeight="220px" fields="@dropDownFields" placeholder="Select a game" CssClass="e-textbox right" DataSource="@games"></EjsDropDownList>
37+
<EjsDropDownList ID="games" Index="2" PopupHeight="220px" placeholder="Select a game" DataSource="@games" CssClass="e-textbox right">
38+
<DropDownListFieldSettings text="text" value="id"></DropDownListFieldSettings>
39+
</EjsDropDownList>
3840
</div>
3941
</div>
4042

@@ -46,24 +48,25 @@
4648
}
4749
</style>
4850

49-
@functions{
50-
List<object> games = new List<object>
51-
{
52-
new { id= "Game1", text= "American Football" },
53-
new { id= "Game2", text= "Badminton" },
54-
new { id= "Game3", text= "Basketball" },
55-
new { id= "Game4", text= "Cricket" },
56-
new { id= "Game5", text= "Football" },
57-
new { id= "Game6", text= "Golf" },
58-
new { id= "Game7", text= "Hockey" },
59-
new { id= "Game8", text= "Rugby"},
60-
new { id= "Game9", text= "Snooker" },
61-
new { id= "Game10", text= "Tennis"},
62-
};
51+
@code{
52+
public class GameFields
53+
{
54+
public string id { get; set; }
55+
56+
public string text { get; set; }
57+
}
6358

64-
public object dropDownFields = new
59+
List<GameFields> games = new List<GameFields>()
6560
{
66-
text = "text",
67-
value = "id"
61+
new GameFields(){ id= "Game1", text= "American Football" },
62+
new GameFields(){ id= "Game2", text= "Badminton" },
63+
new GameFields(){ id= "Game3", text= "Basketball" },
64+
new GameFields(){ id= "Game4", text= "Cricket" },
65+
new GameFields(){ id= "Game5", text= "Football" },
66+
new GameFields(){ id= "Game6", text= "Golf" },
67+
new GameFields(){ id= "Game7", text= "Hockey" },
68+
new GameFields(){ id= "Game8", text= "Rugby"},
69+
new GameFields(){ id= "Game9", text= "Snooker" },
70+
new GameFields(){ id= "Game10", text= "Tennis"},
6871
};
6972
}

0 commit comments

Comments
 (0)