Hello everyone,
We have opened this Feature Request to gather your insights on the addition of disabled items for the DropDownList.
===
UPDATE: The associated built-in feature is the OnItemRender event, which can help style specific items without a template. Then, use the ValueChanged event to prevent selection of disabled items with the keyboard.
<TelerikDropDownList Data="@Products"
DefaultText="Select Product..."
OnItemRender="@OnDropDownListItemRender"
TextField="@nameof(Product.Name)"
ValueField="@nameof(Product.Id)"
Value="@SelectedProductId"
ValueChanged="@( (int? newValue) => SelectedProductChanged(newValue) )"
Width="200px">
</TelerikDropDownList>
@code {
private List<Product> Products { get; set; } = new();
private TelerikDropDownList<Product, int?>? DropDownListRef { get; set; }
private int? SelectedProductId { get; set; }
private void OnDropDownListItemRender(DropDownListItemRenderEventArgs<Product> args)
{
// args.Item is null for the DefaultText item
if (args.Item != null && !args.Item.Active)
{
args.Class = "k-disabled";
}
}
private void SelectedProductChanged(int? newValue)
{
var newProduct = Products.FirstOrDefault(x => x.Id == newValue);
if (newProduct?.Active == true || !newValue.HasValue)
{
// select only active items or DefaultText
SelectedProductId = newValue;
}
else
{
// skip disabled items during keyboard navigation
var oldProductIndex = Products.FindIndex(x => x.Id == SelectedProductId);
var newProductIndex = Products.FindIndex(x => x.Id == newValue);
if (newProductIndex > oldProductIndex)
{
// skip forward
SelectedProductId = Products[++newProductIndex].Id;
}
else
{
// skip backward
SelectedProductId = Products[--newProductIndex].Id;
}
}
}
protected override void OnInitialized()
{
for (int i = 1; i <= 7; i++)
{
var active = i % 3 != 0;
Products.Add(new Product()
{
Id = i,
Name = (active ? "" : "Disabled ") + "Product " + i,
Active = active
});
}
base.OnInitialized();
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public bool Active { get; set; }
}
}===
The example below shows the legacy approach to style items as disabled with DropDownList ItemTemplate and prevent clicks with @onclick. Again, use the ValueChanged event to skip disabled items during keyboard navigation.
<TelerikDropDownList Data="@Products"
TItem="@Product"
TValue="@(int?)"
Value="@SelectedProductId"
ValueField="@nameof(Product.Id)"
TextField="@nameof(Product.Name)"
DefaultText="Select Product..."
ValueChanged="@( (int? newValue) => SelectedProductChanged(newValue) )"
Width="200px">
<DropDownListSettings>
<DropDownListPopupSettings Class="disabled-items" />
</DropDownListSettings>
<ItemTemplate>
@{ var p = context as Product; }
<div class="item-div @( !p.Active ? "disabled" : "" )"
@onclick:preventDefault="@(!p.Active)"
@onclick:stopPropagation="@(!p.Active)">
@p.Name
</div>
</ItemTemplate>
</TelerikDropDownList>
<style>
/* remove default item padding to prevent selection outside the template div */
.disabled-items .k-list-item {
padding: 0;
}
/* add back inner padding */
.disabled-items .item-div {
padding: 4px 8px;
}
/* style disabled items */
.disabled-items .disabled {
cursor: not-allowed;
width: 100%;
color: #ccc;
}
</style>
@code {
private List<Product> Products { get; set; }
private int? SelectedProductId { get; set; }
private async Task SelectedProductChanged(int? newValue)
{
var newProduct = Products.FirstOrDefault(x => x.Id == newValue);
if (newProduct?.Active == true || !newValue.HasValue)
{
// select only active items or DefaultText
SelectedProductId = newValue;
}
else
{
// skip disabled items during keyboard navigation
var oldProductIndex = Products.FindIndex(x => x.Id == SelectedProductId);
var newProductIndex = Products.FindIndex(x => x.Id == newValue);
if (newProductIndex > oldProductIndex)
{
// skip forward
SelectedProductId = Products[++newProductIndex].Id;
}
else
{
// skip backward
SelectedProductId = Products[--newProductIndex].Id;
}
}
}
protected override void OnInitialized()
{
Products = new List<Product>();
for (int i = 1; i <= 7; i++)
{
var active = i % 3 != 0;
Products.Add(new Product()
{
Id = i,
Name = (active ? "" : "Disabled ") + "Product " + i,
Active = active
});
}
base.OnInitialized();
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public bool Active { get; set; }
}
}
Hi,
Is it possible to implement search/look-ahead in the current version of the DropDown component? If not, will you be adding this feature soon?
Thank you.
Ben
The problem is that if the selected option is in the options added later then it does not show it as the selected value.
Example below shows correct function for "6" but incorrect for "7".
---
ADMIN EDIT
Here is a reproducible with the workaround highlighted in green:
@using System.Collections.ObjectModel
<h4>Option Selected: 6 @selectedSix</h4>
<br />
<TelerikDropDownList Data="@myDdlData"
TextField="MyTextField"
ValueField="MyValueField"
@bind-Value="@selectedSix" />
<h4>Option Selected: 7 @selectedSeven</h4>
<br />
<TelerikDropDownList Data="@myDdlData"
TextField="MyTextField"
ValueField="MyValueField"
@bind-Value="@selectedSeven">
</TelerikDropDownList>
<TelerikButton OnClick="@AddOption">Add Item</TelerikButton>
<ul>
@foreach (var item in myDdlData)
{
<li>@item.MyValueField</li>
}
</ul>
@code {
int selectedSix { get; set; } = 6;
int selectedSeven { get; set; } = 7;
ObservableCollection<MyDdlModel> myDdlData = new ObservableCollection<MyDdlModel>(Enumerable.Range(1, 5).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x }));
protected override async Task OnInitializedAsync()
{
AddOption();
await Task.Delay(TimeSpan.FromSeconds(1));
AddOption();
}
void AddOption()
{
myDdlData.Add(new MyDdlModel { MyTextField = "item " + (myDdlData.Count + 1), MyValueField = myDdlData.Count + 1 });
int origSelection = selectedSeven;
selectedSeven = 0;
StateHasChanged();
//add this if it does not work
//await Task.Delay(30);//wait a rendering frame
selectedSeven = origSelection;
//add this if it does not work
//StateHasChanged();
}
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
}
Note: This behavior also occurs if the initial data is received after the component is initialized. The workaround in this case will be similar - set the selected value after the data is received.
---
Right now when a DropDownList has PopupHeight="Auto" the popup gets the height necesaary to display its items properly.
But when there are many items the popup also displays all items without a vertical scrollbar (maybe over the entire page and beyond), which is not good.
My suggestion would be to add a property for specifyig a "MaxPopupHeight" to limit the growth of the popup.
Also if "PopupHeight" is not specified it should take "Auto" as the default value instead of a static height in px, instead give the new "MaxPopupHeight" a limiting default value.
***Admin Edit***
Released in 3.0.0 through PopupSettings tag: https://docs.telerik.com/blazor-ui/upgrade/breaking-changes/3-0-0#popup-settings
***Admin Edit***
Is it possible to drop dropDownList from outside, for example after its data has been changed, without clicking on it ?
ADMIN EDIT:
This feature is also applicable to ComboBox, AutoComplete, Multiselect, Date and Time Pickers components.
When used in Bootstrap Grid the DropDownList popup is misaligned on the first open. On a second click, it is aligned.
This behavior is also valid for Combobox and Autocomplete.
Reproduction code:
<div class="box">
<div class="row mt-3" style="align-items:center">
<div class="col-12 col-lg-4">
<span class="bold">ComboBox</span>
</div>
<div class="col">
<TelerikComboBox Data="@myComboData" TextField="ComboTextField" ValueField="ComboValueField"
@bind-Value="selectedCombo" ClearButton="true" Filterable="true">
</TelerikComboBox>
</div>
</div>
<div class="row mt-3" style="align-items:center">
<div class="col-12 col-lg-4">
<span class="bold">DropDownList</span>
</div>
<div class="col">
<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField"
@bind-Value="@selectedDropDown">
</TelerikDropDownList>
</div>
</div>
<div class="row mt-3" style="align-items:center">
<div class="col-12 col-lg-4">
<span class="bold">Autocomplete</span>
</div>
<div class="col">
<TelerikAutoComplete Data="@Suggestions" @bind-Value="@AutoCompleteValue"
ClearButton="true" />
</div>
</div>
</div>
@code {
public int selectedDropDown { get; set; }
public int selectedCombo { get; set; }
public string AutoCompleteValue { get; set; }
//ComboBox
public class ComboModel
{
public int ComboValueField { get; set; }
public string ComboTextField { get; set; }
}
IEnumerable<ComboModel> myComboData = Enumerable.Range(1, 20).Select(x => new ComboModel { ComboTextField = "item " + x, ComboValueField = x });
//DropDownList
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
//Autocomplete
List<string> Suggestions { get; set; } = new List<string> {
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
};
}
---
ADMIN EDIT
This behavior is observed in the DropDownList when filtering is enabled and in the ComboBox regardless of whether filtering is enabled or not.
The (filter) input gets focus, which shows the soft keyboard, which changes the viewport size, which causes the dropdown to hide. Unfortunately, there is no workaround at the moment (except perhaps disabling filtering for small viewports).
---
Steps to reproduce:
- Open the Edit in Telerik REPL link from the demo page for DropDownList - Grouping.
- Add Filterable="true" to TelerikDropDownList.
- Run.
- Open the dropdown.
- Type in for instance the last item of the list "Röd Kaviar", that belongs to the category "Seafood".
Expected: the group name should change to "Seafood".
Actual: the group name is still "Beverages".
Posting this feature request as per your suggestion in my original forum post at: https://www.telerik.com/forums/data-source-using-scalar-list
I would like the DropDownList component to support lists of scalar values as data source. I.e:
<TelerikDropDownList Data="@MyList" bind-Value=@MyItem>
</TelerikDropDownList>
@functions {
protected List<string> MyList = new List<string>() { "a", "b", "c" };
protected string MyItem { get; set; } = "b";
}The DropDownList would infer the scalar type from the Data property. The TextField items shown in the list (and the associated ValueField) would be the same: i.e. the value of each scalar in the list.
The following knowledge base article describes how to select the default value in a drop down, but if there's no default value the selection is not cleared using this method.
When setting the bind value to null (or the default, or frankly anything that doesn't exist in the drop down) I'd like the drop down list selection to be cleared when there's no default value set on the DropDownList.
@page "/"
<br />
<TelerikButton OnClick="@ClearSelection">Clear selection</TelerikButton>
<TelerikDropDownList Data="@data" @bind-Value="selectedValue" />
@code {
List<string> data = new() { "selection" };
string selectedValue;
void ClearSelection()
{
// This does not cause the drop down to clear the selection and I think it should.
selectedValue = null;
}
}
This only happens if the popup somehow could otherwise overflow the viewport, i.e. only when the DropDownList, the MultiSelect or the ComboBox component are very close to the bottom of the viewport.
The most obvious example is a required field - it must be nullable so required validation works, but the actual model may have to be non-nullable.