I would like the Blazor Combobox to open the dropdownlist on clicking the input area when there is a placeholder. Something like OpenListOnClick=true
It will cause the Combobox to behave much like the Blazor DropDownList. This was the similar functionality of the RadComboBox in the Telerik UI asp.net Ajax controls found here: https://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx
Note: when a value has been selected the text becomes highlighted, but when the placeholder is there it puts the carat/cursor at the beginning.
Or if there is an simple workaround that would be great.
I just updated our .NET 8 Blazor webapp from Telerik 5.0.1 to 5.1.1. Now, interacting with any input in a form applies validation classes to all other inputs in the form. I hope this behavior is unintentional as it could lead to user confusion. I believe this was introduced in the 5.0.1 update which was supposed to fix the issue of validation classes being present on initial render. I could find no other documentation or discussion regarding this.
This behavior can be seen in the Form - Validation demo...
Blazor Form Demos - Validation | Telerik UI for Blazor
Type valid input in the Graduate Grade field and all other fields turn green even though they don't have valid input...
Clicking Submit to show that those fields are not valid.
Hi,
since not all ARIA attributes are supported, I have to set some attributes manually. Setting aria-required (e.g. for textbox controls) by JavaScript is working:
function activateRequired(targetControlId) {
if (targetControlId) {
field = document.getElementById(targetControlId);
if (field) {
field.setAttribute("aria-required", "true");
}
}
}
Now I have to set aria-hidden for the internal button of combobox.
Is it possible to get this button to set the attribute?
Regards, Stefan
I have a TelerikComboBox that uses the OnRead-Event inside of an EditForm. Binding the selected Value (an Id of type "long") using bindValue to my model in the Edit form is not the problem. However when the component loses focus the selected value resets and I can't submit the form. I guess this is just the default behavior. Using the ValueChanged-Event I realized that it fires not only on selection but also when the component loses focus, which is only the case when using the OnRead-Event. Is there a way for me to disable the firing of the ValueChanged-Event on Blur?
This is my ComboBox:<EditForm Model="model" OnValidSubmit="HandleValidSubmitAsync">
<FluentValidator></FluentValidator>
<p>Selected Value: @model.UserId</p>
<p>
<label class="required" for="...">@FieldsLoc["..."]</label>
<TelerikComboBox TItem="Model"
TValue="long"
OnRead="@ReadItems"
@bind-Value="model.UserId"
ValueField="Id"
TextField="DisplayName"
Filterable="true"
FilterOperator="StringFilterOperator.Contains"
Width="100%">
</TelerikComboBox>
<ValidationMessage For="@(() => model.UserId)"></ValidationMessage>
</p>
<TelerikButton OnClick=@(args=> createDialogOpen=false)>@AppLoc["Cancel"]</TelerikButton>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">@AppLoc["Save"]</TelerikButton>
</EditForm>
I have a combobox component that can draw on available properties such as "Class" and "MaxHeight." However, when I try to implement comboboxes, I see no way to disable them. Below is a portion of the RenderComboBox method. I can only avoid the error by commenting out "d.AddAttribute(302, "Enabled", "false");"
RenderFragment item = d =>
{
d.OpenComponent<ComboBoxPopupSettings>(20);
if (RowCount == 0) { RowCount= 20; }
d.AddAttribute(300, "MaxHeight", $"{(RowCount * 22).ToString()}px");
d.AddAttribute(301, "Class", "telCombo");
d.AddAttribute(302, "Enabled", "false");
d.CloseComponent();
};
The above code earns me the message
"Object of type 'Telerik.Blazor.Components.ComboBoxPopupSettings' does not have a property matching the name 'Enabled'."
Indeed, when I look it up, the list of inherited members has nothing for enabling/ disabling the feature. How can i disable it?
When I create a form with auto-generated fields and disable one of them (see code), the field indeed cannot be edited, but the associated spinner remains active (is a numeric field in this case), allowing the modification of the field's value. I believe that the underlying editor of the field (regardless of its type: datepicker, combobox, dropdownlist, numerictextbox or colorpicker) should be disabled when the FormItem is disabled, as it creates inconsistencies in the UI.
<FormItems>
<FormItem Field="@nameof(ViewModel.SomeField)" />
<FormItem Field="@nameof(ViewModel.NumericField)" Enabled="@some_variable"/>
</FormItems>
Some important background first. There is a lot to share but its important because you'll have a lot of question about why I'm doing some things.
My model is a single, self-referencing table holding hierarchical data. I have three fields: "TaxonomyId", "Name", "ParentId". Taxonomy Id is my ValueField and Name is the TextField. Currently the hierarchy is limited to 5 levels. The previous dropdown filters the next based on the selection. Names are unique in a single hierarchy but not across hierarchies. Clear as mud? LOL
I have separate Lists I use as models for each of the dropdown lists to be cascading through the single hierarchy. I can't use a single table model because each dropdown uses the same model. It appears to overwrite the previous selection and I need to keep track of all the selections. Those lists are bound to each ddl to display the list of Names.
So, to make the dropdowns cascade, I call my GetNextLevel() method for the OnChange() event. I tried ValueChange() but firing on every keystroke seemed to cause some UI performance issues. May have just been my ignorance. Anyway, I pass the level (1-5) and the bound value (Name) to get the next ddl values. All this works perfect.
Now to the ask. I'm trying to get the ValueField (TaxonomyId) and pass it to GetNextLevel(). I can pass the event args but that only gives me the selected value and I also need the level (which ddl was clicked). If I could send level and the ValueField I would be "golden".
Now the code. Here are my ddls
<div><TelerikFloatingLabel Text="Level 1"><TelerikComboBox Class="justification" AllowCustom="true" Data="@L1" ClearButton="false" TextField="Name" ValueField="TaxonomyId" @bind-Value=@L1Value OnChange="@(GetNextLevelTest)"></TelerikComboBox></TelerikFloatingLabel></div>
@if (!String.IsNullOrEmpty(L1Value))
{
<div><TelerikFloatingLabel Text="Level 2"><TelerikComboBox Class="justification" @ref="TestRef" id="L2" AllowCustom="true" Data="@L2" ClearButton="false" TextField="Name" ValueField="TaxonomyId" @bind-Value=@L2Value OnChange="@(() => GetNextLevel(L2Value, 2))"></TelerikComboBox></TelerikFloatingLabel></div>
}
@if (!String.IsNullOrEmpty(L2Value))
{
<div><TelerikFloatingLabel Text="Level 3"><TelerikComboBox Class="justification" Data="@L3" AllowCustom="true" TextField="Name" ClearButton=false ValueField="TaxonomyId" @bind-Value="@L3Value" OnChange="@(() => GetNextLevel(L3Value, 3))"></TelerikComboBox></TelerikFloatingLabel></div>
}
@if (!String.IsNullOrEmpty(L3Value))
{
<div><TelerikFloatingLabel Text="Level 4"><TelerikComboBox Class="justification" Data="@L4" AllowCustom="true" TextField="Name" ClearButton=false ValueField="TaxonomyId" @bind-Value="@L4Value" OnChange="@(() => GetNextLevel(L4Value, 4))"></TelerikComboBox></TelerikFloatingLabel></div>
}
@if (!String.IsNullOrEmpty(L4Value))
{
<div><TelerikFloatingLabel Text="Level 5"><TelerikComboBox Class="justification" Data="@L5" AllowCustom="true" ClearButton="false" TextField="Name" ValueField="TaxonomyId" @bind-Value="@L5Value" OnChange="@(() => GetNextLevel(L5Value, 5))"></TelerikComboBox></TelerikFloatingLabel></div>
}
Here is the GetNextLevel method. This is more for your edification as I don't think it will impact the answer? A lot of this code is validation if a user goes back up the list and chooses another value or selects the same value.
/// <summary>
/// Populates a change ddl based on the parent id of the previous ddl and adds the selection to a ChangeDetailDTO object.
/// </summary>
/// <param name="selectedValue">This has to be a string because of the ability to edit the selected value</param>
/// <param name="level"></param>
public async Task GetNextLevel(string selectedValue, int level)
{
//Get the appropriate Taxonomy List object
var SelectedLevels = GetType().GetProperty(DDLGroup+"Levels"??"").GetValue(this,null) as List<TaxonomyDdlDTO>;
//if this is replacing a level that is last in the index, remove the old value.
//further down I'm clearing a range if a new dd value is selected to remove all the child values
if (string.IsNullOrEmpty(selectedValue))
return;
//if the selected value is not changed, do nothing.
if (level <= SelectedLevels!.Count())
{
if (selectedValue == SelectedLevels[level-1].TaxonomyId)
return;
}
int selectedId = 0;
int.TryParse(selectedValue, out selectedId);
//Parent int of 0 means its a top-level item
if (selectedId != 0)
{
var currentLevel = TaxonomyList.Where(x => x.TaxonomyId == selectedValue).Single();
if (!SelectedLevels.Contains(currentLevel))
{
SelectedLevels.Add(currentLevel);
};
}
else
{
if (SelectedLevels.Count <= level-1 && SelectedLevels[level - 2] != null)
SelectedLevels.RemoveAt(level - 2);
SelectedLevels.Add(new TaxonomyDdlDTO()
{
TaxonomyId = selectedValue,
Name = selectedValue
});
}
//Event passes the new selection object to the parent page
if(DDLGroup == "Current")
await CurrentLevelSelectedEvent.InvokeAsync(SelectedLevels);
else
await NewLevelSelectedEvent.InvokeAsync(SelectedLevels);
//populates the next dropdown list based on the selection justmade
var nextLevelTaxonomy = TaxonomyList.Where(x => x.ParentId == selectedId).ToList();
//Level5 has no children.
if (level <= 4)
GetType().GetProperty(string.Concat("L", level + 1)).SetValue(this, nextLevelTaxonomy);
if (SelectedLevels.Count > level)
SelectedLevels.RemoveRange(level-1, SelectedLevels.Count-1);
}
I appreciate any suggestions you have.
Hi, in a combobox with filter and custom values, if user start typing and there are no items corresponding to the filter the dropdown is open also if it is empty.
Is it possibile to avoid this and open dropdown only if there are items?
PS. Also Autocomplete component have same behaviour
Thank you
The combobox works find when viewing on desktop browser. But when viewing on mobile devices, it launches the keyboard if the user attempts to select an item from the list.
I have set the below flags
Filterable = false
ClearButton = false
Do I just need to not use the combobox component on mobile?
Thanks
Billy
Good day, everyone
I found this thread today where you can define a custom template for your NoDataTemplate in MVC and it is implemented on an AutoComplete component. I need to implement something similar to this but for a TelerikComboBox instead and in Blazor, is it possible?
Thanks in advance.
PS: Sorry, I wrote the title wrong. Is NoDataTemplate instead of "NoTemplateData"