docs(DropDowns): update examples based on the suggestion

telerik · Aug 16, 2024 · 4a76c3d · 4a76c3d
1 parent c74aff1
commit 4a76c3d
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 31 deletions.
diff --git a/components/autocomplete/overview.md b/components/autocomplete/overview.md
@@ -113,19 +113,23 @@ You can find more options for customizing the AutoComplete styling in the [Appea
 The AutoComplete exposes settings for its dropdown (popup). To configure the options, declare an  `<AutoCompletePopupSettings>` tag inside the `<AutoCompleteSettings>` tag:
 
 ````CSHTML
-<TelerikAutoComplete Data="@Data"
-                     @bind-Value="@selectedRole"
-                     Width="300px"
-                     Placeholder="Please select your role, e.g. Developer">
+<TelerikAutoComplete Data="@AutoCompleteData"
+                     @bind-Value="@SelectedItem"
+                     Filterable="true"
+                     FilterOperator="@StringFilterOperator.Contains"
+                     Placeholder="Filter by digit or letter"
+                     Width="240px">
     <AutoCompleteSettings>
-        <AutoCompletePopupSettings Height="auto" MaxHeight="300px" MinHeight="50px" />
+        <AutoCompletePopupSettings Height="auto" MaxHeight="200px" MinHeight="75px" />
     </AutoCompleteSettings>
 </TelerikAutoComplete>
 
 @code {
-    private List<string> Data = new List<string>() { "Developer", "Team Leader", "Solution Architect", "Manager", "DevOps Engineer", "Quality Assurance Engineer", "Security Specialist" };
+    private List<string> AutoCompleteData { get; set; } = Enumerable.Range(1, 50)
+        .Select(x => { return $"Item {x} {(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}"; })
+        .ToList();
 
-    private string selectedRole { get; set; }
+    private string SelectedItem { get; set; }
 }
 ````
 

diff --git a/components/combobox/overview.md b/components/combobox/overview.md
@@ -113,22 +113,26 @@ The following parameters enable you to customize the [appearance]({%slug combobo
 
 ### Popup settings
 
-The popup of the component can be additionally customized via nested tags:
+The ComboBox exposes settings for its dropdown (popup). To configure the options, declare a  `<ComboBoxPopupSettings>` tag inside a `<ComboBoxSettings>` tag:
 
 ````CSHTML
-<TelerikComboBox Data="@Data"
-                 @bind-Value="@selectedRole"
-                 Width="300px"
-                 Placeholder="Please select your role, e.g. Developer">
+<TelerikComboBox Data="@ComboBoxData"
+                     @bind-Value="@SelectedItem"
+                     Filterable="true"
+                     FilterOperator="@StringFilterOperator.Contains"
+                     Placeholder="Filter by digit or letter"
+                     Width="240px">
     <ComboBoxSettings>
-        <ComboBoxPopupSettings Height="auto" MaxHeight="300px" MinHeight="50px" />
+        <ComboBoxPopupSettings Height="auto" MaxHeight="200px" MinHeight="75px" />
     </ComboBoxSettings>
 </TelerikComboBox>
 
 @code {
-    private List<string> Data = new List<string>() { "Developer", "Team Leader", "Solution Architect", "Manager", "DevOps Engineer", "Quality Assurance Engineer", "Security Specialist" };
+    private List<string> ComboBoxData { get; set; } = Enumerable.Range(1, 50)
+        .Select(x => { return $"Item {x} {(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}"; })
+        .ToList();
 
-    private string selectedRole { get; set; }
+    private string SelectedItem { get; set; }
 }
 ````
 

diff --git a/components/dropdownbutton/overview.md b/components/dropdownbutton/overview.md
@@ -90,7 +90,7 @@ The DropDownButton exposes settings for its dropdown (popup). To configure the o
     <DropDownButtonContent>Share</DropDownButtonContent>
 
     <DropDownButtonSettings>
-        <DropDownButtonPopupSettings Height="auto" MaxHeight="300px" MinHeight="50px" />
+        <DropDownButtonPopupSettings Height="auto" MaxHeight="100px"/>
     </DropDownButtonSettings>
 
     <DropDownButtonItems>

diff --git a/components/dropdownlist/overview.md b/components/dropdownlist/overview.md
@@ -116,19 +116,23 @@ The following parameters enable you to customize the [appearance]({%slug dropdow
 The DropDownList exposes settings for its dropdown (popup). To configure the options, declare a  `<DropDownListPopupSettings>` tag inside a `<DropDownListSettings>` tag:
 
 ````CHTML
-<TelerikDropDownList Data="@Data"
-                     @bind-Value="selectedRole"
-                     Width="300px"
-                     DefaultText="Please select your role, e.g. Developer">
+<TelerikDropDownList Data="@DropDownData"
+                     @bind-Value="@SelectedItem"
+                     Filterable="true"
+                     FilterOperator="@StringFilterOperator.Contains"
+                     FilterPlaceholder="Filter by digit or letter"
+                     Width="240px">
     <DropDownListSettings>
-        <DropDownListPopupSettings Height="auto" MaxHeight="300px" MinHeight="50px" />
+        <DropDownListPopupSettings Height="auto" MaxHeight="200px" MinHeight="75px" />
     </DropDownListSettings>
 </TelerikDropDownList>
 
 @code {
-    private List<string> Data = new List<string>() { "Developer", "Team Leader", "Solution Architect", "Manager", "DevOps Engineer", "Quality Assurance Engineer", "Security Specialist" };
+    private List<string> DropDownData { get; set; } = Enumerable.Range(1, 50)
+        .Select(x => { return $"Item {x} {(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}"; })
+        .ToList();
 
-    private string selectedRole { get; set; }
+    private string SelectedItem { get; set; }
 }
 ````
 

diff --git a/components/multiselect/overview.md b/components/multiselect/overview.md
@@ -132,19 +132,23 @@ The following parameters enable you to customize the [appearance]({%slug multise
 The MultiSelect exposes settings for its dropdown (popup). To configure the options, declare a  `<MultiSelectPopupSettings>` tag inside a `<MultiSelectSettings>` tag:
 
 ````CSHTML
-<TelerikMultiSelect Data="@Data"
-                    @bind-Value="@selectedRoles"
-                    Width="300px"
-                    Placeholder="Please select your role, e.g. Developer">
+<TelerikMultiSelect Data="@MultiSelectData"
+                    @bind-Value="@SelectedItems"
+                    Filterable="true"
+                    FilterOperator="@StringFilterOperator.Contains"
+                    Placeholder="Filter by digit or letter"
+                    AutoClose="false"
+                    Width="240px">
     <MultiSelectSettings>
-        <MultiSelectPopupSettings Height="auto" MaxHeight="300px" MinHeight="50px" />
+        <MultiSelectPopupSettings Height="auto" MaxHeight="200px" MinHeight="75px" />
     </MultiSelectSettings>
 </TelerikMultiSelect>
-
 @code {
-    private List<string> Data = new List<string>() { "Developer", "Team Leader", "Solution Architect", "Manager", "DevOps Engineer", "Quality Assurance Engineer", "Security Specialist" };
+    private List<string> MultiSelectData { get; set; } = Enumerable.Range(1, 50)
+        .Select(x => { return $"Item {x} {(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}"; })
+        .ToList();
 
-    private List<string> selectedRoles { get; set; }
+    private List<string> SelectedItems { get; set; } = new List<string>();
 }
 ````