Add the ability to make the drop down list expanded contents wider than the closed control, or just automatically determine appropriate width (doesn't always work well for very long text fields, so you need both properties).
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
When bound to a nullable GUID, the DropDownList invokes validation and shows validation messages as soon as the view loads.
Expected: the same behavior as with nullable int - validation is to be triggered by the form submission or selection from the dropdown.
Worked as expected in 1.2.0.
Reproducible:
@using Telerik.Blazor.Components.DropDownList@using System.ComponentModel.DataAnnotations<EditForm Model="@person" OnValidSubmit="@HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <p class="gender"> Gender: <TelerikDropDownList @bind-Value="person.Gender" DefaultItem="@ddlHint" Data="@genders" TextField="MyTextField" ValueField="MyValueField"> </TelerikDropDownList> <ValidationMessage For="@(() => person.Gender)"></ValidationMessage> </p> <button type="submit">Submit</button></EditForm>@code { // Usually the model classes would be in different files public class Person { [Required(ErrorMessage = "Gender is mandatory.")]//the value field in the dropdown model must be null in the default item public Guid? Gender { get; set; } } public class MyDdlModel { //nullable so the default item can allow required field validation public Guid? MyValueField { get; set; } public string MyTextField { get; set; } } Person person = new Person(); MyDdlModel ddlHint = new MyDdlModel { MyValueField = null, MyTextField = "Gender" }; IEnumerable<MyDdlModel> genders = new List<MyDdlModel>{ new MyDdlModel {MyTextField = "female", MyValueField = new Guid()}, new MyDdlModel {MyTextField = "male", MyValueField = new Guid()}, new MyDdlModel {MyTextField = "other", MyValueField = new Guid()}, new MyDdlModel {MyTextField = "I'd rather not say", MyValueField = new Guid()} }; void HandleValidSubmit() { Console.WriteLine("OnValidSubmit"); }}
This will allow the dropdown to be large enough to fit a reasonable number of items without a scrollbar. Alternatively, you could limit it through a pixel value you can set, or through the MaxPopupHeight property if it gets implemented: https://feedback.telerik.com/blazor/1412653-maxpopupheight.
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***
When the Value you bind to the DropDownList is null (for example, because it is a model that is not filled in by the user yet, and you need to perform validation), the component throws a null reference exception.
This does not happen for a nullable integer (example here)
Reproducible:
@using System.ComponentModel.DataAnnotations@using Telerik.Blazor.Components.DropDownList <EditForm Model="@PageData" OnValidSubmit="@HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> @PageData.QuoteState <TelerikDropDownList bind-Value="@PageData.QuoteState" DefaultItem="@Hint" Width="300px" Data="@states" TextField="stateName" ValueField="stateID"> </TelerikDropDownList> <ValidationMessage For="@(() => PageData.QuoteState)"></ValidationMessage> <button type="submit">Submit</button> </EditForm>@functions { public MyViewModel PageData { get; set; } = new MyViewModel(); public statesModel Hint { get; set; } = new statesModel { stateID = null, stateName = "Not Selected" }; public class statesModel { public string stateID { get; set; } public string stateName { get; set; } } public class MyViewModel { [Required(ErrorMessage = "State is mandatory.")]//the value field in the dropdown model must be null in the default item public string QuoteState { get; set; } } public IEnumerable<statesModel> states = new List<statesModel> { new statesModel { stateID = "ACT", stateName = "ACT" }, new statesModel { stateID = "NSW", stateName = "NSW" }, new statesModel { stateID = "NT", stateName = "NT" }, new statesModel { stateID = "QLD", stateName = "QLD" }, new statesModel { stateID = "SA", stateName = "SA" }, new statesModel { stateID = "TAS", stateName = "TAS" }, new statesModel { stateID = "VIC", stateName = "VIC" }, new statesModel { stateID = "WA", stateName = "WA" } }; void HandleValidSubmit() { Console.WriteLine("OnValidSubmit"); }}
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.