Telerik Forums
UI for Blazor Forum
1 answer
9 views

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.

Hristian Stefanov
Telerik team
 answered on 01 Apr 2024
1 answer
26 views

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.

Hristian Stefanov
Telerik team
 answered on 25 Mar 2024
0 answers
16 views

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

Stefan
Top achievements
Rank 1
Veteran
Iron
 asked on 30 Jan 2024
0 answers
22 views

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>
Colin
Top achievements
Rank 1
 asked on 26 Jan 2024
1 answer
37 views

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?

Radko
Telerik team
 answered on 01 Jan 2024
1 answer
47 views

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>
I understand that I could specify the template and disable the editor within it, but in this case, it would be necessary to define the templates of almost every FormItem, and the auto-generated editors would lose their purpose. 

Regards. 
Twain.


1 answer
77 views

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.

Chris
Top achievements
Rank 2
Iron
Iron
Iron
 updated answer on 26 Oct 2023
1 answer
32 views

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

Dimo
Telerik team
 answered on 12 Oct 2023
1 answer
49 views

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

Svetoslav Dimitrov
Telerik team
 answered on 04 Oct 2023
2 answers
34 views

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"

Nahuel
Top achievements
Rank 1
Iron
 updated answer on 29 Sep 2023
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?