DropDown/DropDownDataGrid ShowValueTemplateOnEmpty added

Fix #2536
The TextProperty/ValueProperty case from the issue stays unsupported -making that work would require redefining what @bind-Value means for editable templates, which would be a breaking change.

Radzen.Blazor/RadzenDropDown.razor

@@ -19,10 +19,10 @@
                    aria-label="@(!Multiple && internalValue != null ? internalValue : EmptyAriaLabel)" @attributes="InputAttributes"/>
         </div>
 
-        @if (ValueTemplate != null && selectedItem != null)
+        @if (ValueTemplate != null && (selectedItem != null || (ShowValueTemplateOnEmpty && !Multiple)))
         {
             <span class="rz-dropdown-label rz-inputtext" style="width:100%;" @onkeydown:stopPropagation="stopKeydownPropagation" @onkeydown="OnGuardKeyDown">
-                @ValueTemplate(selectedItem)
+                @ValueTemplate(selectedItem!)
             </span>
         }
         else if (Template != null && selectedItem != null)

Radzen.Blazor/RadzenDropDown.razor.cs

@@ -65,6 +65,15 @@ namespace Radzen.Blazor
         [Parameter]
         public RenderFragment<dynamic>? ValueTemplate { get; set; }
 
+        /// <summary>
+        /// Gets or sets whether <see cref="ValueTemplate"/> is rendered even when there is no selected item.
+        /// When <c>true</c>, the template is invoked with a <c>null</c> context so it can render an editor
+        /// (e.g. a text box) for an empty value. Templates must handle a null context.
+        /// </summary>
+        /// <value><c>true</c> to render <see cref="ValueTemplate"/> on empty value; otherwise <c>false</c>. Default is <c>false</c>.</value>
+        [Parameter]
+        public bool ShowValueTemplateOnEmpty { get; set; }
+
         /// <summary>
         /// Gets or sets the template displayed when the dropdown data source is empty or no items match the filter.
         /// Use this to show a custom "No items found" or "Empty list" message.

Radzen.Blazor/RadzenDropDownDataGrid.razor

@@ -18,10 +18,10 @@
 
         </div>
 
-        @if (ValueTemplate != null && selectedItem != null)
+        @if (ValueTemplate != null && (selectedItem != null || (ShowValueTemplateOnEmpty && !Multiple)))
         {
             <span class="rz-dropdown-label rz-inputtext" style="width:100%;" @onkeydown:stopPropagation="stopKeydownPropagation" @onkeydown="OnGuardKeyDown">
-                @ValueTemplate(selectedItem)
+                @ValueTemplate(selectedItem!)
             </span>
         }
         else if (Template != null && selectedItem != null)

Radzen.Blazor/RadzenDropDownDataGrid.razor.cs

@@ -257,6 +257,15 @@ namespace Radzen.Blazor
         [Parameter]
         public RenderFragment<dynamic>? ValueTemplate { get; set; }
 
+        /// <summary>
+        /// Gets or sets whether <see cref="ValueTemplate"/> is rendered even when there is no selected item.
+        /// When <c>true</c>, the template is invoked with a <c>null</c> context so it can render an editor
+        /// (e.g. a text box) for an empty value. Templates must handle a null context.
+        /// </summary>
+        /// <value><c>true</c> to render <see cref="ValueTemplate"/> on empty value; otherwise <c>false</c>. Default is <c>false</c>.</value>
+        [Parameter]
+        public bool ShowValueTemplateOnEmpty { get; set; }
+
         /// <summary>
         /// Gets or sets a value indicating DataGrid density.
         /// </summary>

RadzenBlazorDemos/Pages/DropDownEdit.razor

@@ -1,8 +1,8 @@
 @inherits DbContextPage
 
 <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Gap="0.5rem" class="rz-p-sm-12">
-    <RadzenLabel id="DropDownEditLabel" Text="Select Value" Component="DropDownEdit" />
-    <RadzenDropDown @bind-Value=@value Data=@companyNames Style="width: 100%; max-width: 400px;" Name="DropDownEdit">
+    <RadzenLabel id="DropDownEditLabel" Text="Select or type a value" Component="DropDownEdit" />
+    <RadzenDropDown @bind-Value=@value Data=@companyNames ShowValueTemplateOnEmpty="true" Style="width: 100%; max-width: 400px;" Name="DropDownEdit">
         <ValueTemplate>
             <RadzenTextBox @bind-Value=@value Style="width:120%; height:120%; margin:-15px" aria-labelledby="DropDownEditLabel" />
         </ValueTemplate>
@@ -10,7 +10,7 @@
 </RadzenStack>
 
 @code {
-    string value = "Around the Horn";
+    string value = "";
     IEnumerable<string> companyNames;
 
     protected override async Task OnInitializedAsync()

RadzenBlazorDemos/Pages/DropDownPage.razor

@@ -71,7 +71,7 @@
     Editable DropDown
 </RadzenText>
 <RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
-    Use the <code>AllowFiltering</code> property to enable editable mode, allowing users to type and filter dropdown items.
+    Use the <code>ValueTemplate</code> with an embedded input bound to the same value to let users edit the selected item in place. Set <code>ShowValueTemplateOnEmpty</code> to <code>true</code> to render the template (and its editor) even when no item is selected, so the user can type an initial value without first picking from the list. The pattern requires the DropDown <code>Value</code> to be the displayed text itself (e.g. a primitive type) and is not designed for use with <code>TextProperty</code>/<code>ValueProperty</code>.
 </RadzenText>
 <RadzenExample ComponentName="DropDown" Example="DropDownEdit">
     <DropDownEdit/>