I have this javascript exception when use MultiColumnComboBox (but sometime also with ComboBox / DropDown).

If i continue debugging it go without issue, but it break always on component load.

 

I'm trying to adjust the existing size definitions as outlined here in your docs:

https://www.telerik.com/blazor-ui/documentation/components/dropdownlist/appearance

I'd like to adjust the definition for sm, md, lg as they don't work well with TailwindCSS settings.  For example lg is just a tad too large and md is a tad too small

This is lg:

This md:

I want to match the border size to our standard input text (aka Postal Code example above).  I can't seem to find where sm, lg, md are defined?  And, is there a relative "simple" way to modify without going down a "custom" theme path?

Rob.

 

Hi Folks,

For the below component the dropdown loads the data only after 10 seconds or so after the component is rendered on the browser.
How would I get it to load immediately on the component load and not show the "No data" message on dropdown selection. The dropdown is loaded with data from an api service to an oracle database and it returns about 100 records. 

@page "/Startup"
@rendermode @(new InteractiveServerRenderMode(prerender: false))
@using ance.UI.Components.Layout
@layout MainLayout
@inject NavigationManager Navigation
@inject tenance.UI.Services.ApiService apiService
@inject Blazored.SessionStorage.ISessionStorageService sessionStorage
@using sMaintenance.UI.Dtos
@using Microsoft.AspNetCore.Http
@using Microsoft.AspNetCore.DataProtection
@using estExtensions.Core.Principal
@using System.Text.Json;
@using System.IO;
@inject IHttpContextAccessor HttpContextAccessor
@inject IDataProtectionProvider DataProtectionProvider
@inject IConfiguration configuration;
@inject GlobalTokenContainer globalTokenContainer;

<h1 > Test Page</h1>
<label class="card-title">Select : </label>
<TelerikDropDownList Data="@Testdata"
TextField="UserName"
ValueField="NewideId"
@bind-Value="selectedValue"
OnChange="@OnUserSelectionChanged"
Width="20%" /> 
<br />
<br /><br />
<div style="display: flex; gap: 1rem; align-items: center;">
    <div style="display: flex; align-items: center; gap: 0.5rem;">
        <label class="card-title">NewwideID : </label>
        <TelerikTextBox @bind-Value="@Name" Width="150px"  ReadOnly="@true"/>
    </div>
    <div style="display: flex; align-items: center; gap: 0.5rem;">
        <label class="card-title">Role : </label>
        <TelerikTextBox @bind-Value="@Role" Width="150px" ReadOnly="@true" />
    </div>
</div>
<br />
<div>
    <label class="card-title">demo No. : </label>
    <TelerikTextBox @bind-Value="@ClaimNo" Width="20%" />
</div>
<br />
<div>
    <TelerikButton OnClick="@GoToClms" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)">GO</TelerikButton>
    <TelerikButton>Send Letter</TelerikButton>
    <TelerikButton OnClick="@GoToOtherPage">Catastrophe Manager</TelerikButton>
</div>
<br />
@if (!string.IsNullOrEmpty(warningMessage))
{
    <div class="alert alert-danger">Global token is empty </div>
}
@code {
    private string? NewideID;
    private string Role = "Adjster";
    private string? ClaimNo;
    public string? Name;
    private string Token = string.Empty;
    private List<AdjerDto> adjusters = new();
    private string? selectedValue;
    private string? globalToken;
    private const string CookieName = "UserInfo";
    private const bool V = true;
    private string cookieValue = "";
    private string? warningMessage;
    private string? baseHref; 

    public async Task GetOrFetchTokenAsync(string nwideId)
    {
        // Check if the token exists in session storage
        var globalToken = await sessionStorage.GetItemAsync<string>("gltoken");
        var wetoken= await sessionStorage.GetItemAsync<string>("wetoken");

        if (string.IsNullOrEmpty(gltoken))
        {
            gltoken= await apiService.GetGlobalTokenAsync(newideId);
            if (!string.IsNullOrEmpty(gltoken))
            {
                // Store the fetched token in session storage
                await sessionStorage.SetItemAsync("globaltoken", gltoken);
                globalTokenConer.GlolToken = gltoken;
            }
        }
        if (string.IsNullOrEmpty(cimToken))
        {
            wetoken= await apiService.GetCimTokenAsync(newideId);
            if (!string.IsNullOrEmpty(cimToken))
            {
                // Store the fetched token in session storage
                await sessionStorage.SetItemAsync("cimtoken", cimToken);
            }
        }
    }

    // Method to handle navigation to the Catastrophe Management page after obtaining a global token
    private async Task GoToOtherPage()
    {
        try
        {
            // Reset the global token to ensure a fresh start
            globalToken = string.Empty;

            // Proceed only if a Name is provided
            if (Name is not null)
            {
                // Fetch or retrieve token for the provided Name (possibly from a cache or API)
                await GetOrFetchTokenAsync(Name);

                // Attempt to get the actual global token from the API
                globalToken = await apiService.GetGlobalTokenAsync(Name);

                // Log and check if the token is successfully retrieved
                if (!string.IsNullOrWhiteSpace(globalToken))
                {
                    Console.WriteLine($"Received Global Token: {globalToken}");
                }
                else
                {
                    // Set a warning message if the token is null or empty
                    warningMessage = $"Warning: API returned an empty or null token for  {Name}";
                    Console.WriteLine(warningMessage);

                    // Trigger UI update and exit the method early
                    StateHasChanged();
                    return;
                }

                // Update the UI to reflect new state
                StateHasChanged();
            }

            // Store the global token in the browser's session storage
            await sessionStorage.SetItemAsync("globaltoken", globalToken);

            // If token is valid, clear warning message and navigate to the Catastrophe Management page
            if (!string.IsNullOrWhiteSpace(globalToken))
            {
                warningMessage = string.Empty;
                Navigation.NavigateTo($"{baseHref}CatastrophePages/CatastropheManagement?globalToken={globalToken}", true);
            }
        }
        catch (Exception ex)
        {
            // Log any exceptions that occur during the process
            Console.WriteLine(ex.Message);
        }
    }

    private async Task GoToClms()
    {
        try
        {
            gloToken = string.Empty;
            if (Name is not null)
            {
                await GetOrFetchTokenAsync(Name);
                glToken = await apiService.GetGlobalTokenAsync(Name);
                if (!string.IsNullOrWhiteSpace(glToken ))
                {
                    Console.WriteLine($"Received Global Token: {glToken }");
                }
                else
                {
                    warningMessage = $"Warning: API returned an empty or null token for  {Name}";
                    Console.WriteLine($"Warning: API returned an empty or null token for  { Name}");
                    StateHasChanged();
                    return;
                }
                StateHasChanged();
            }
            await sessionStorage.SetItemAsync("globaltoken", glToken );
            if (!string.IsNullOrWhiteSpace(ClaimNo) && !string.IsNullOrWhiteSpace(glToken ))
            {
                warningMessage = string.Empty;
                Navigation.NavigateTo($"{baseHref}ClaimDetails/{ClaimNo}?globalToken={glToken }", true);
            }
            else if (!string.IsNullOrWhiteSpace(globalToken))
            {
                warningMessage = string.Empty;
                Navigation.NavigateTo($"{baseHref}Claitory?globalToken={glToken }", true);
            }
         }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }
     
    }
    // Component Initialization code
    protected override async Task OnInitializedAsync()
    {
        await sessionStorage.SetItemAsync("name", "John Smith");
        var name = await sessionStorage.GetItemAsync<string>("name");
        warningMessage = string.Empty;
        baseHref = configuration.GetValue<string>("baseHref");
        Testdata= await GetLoadAersAsync();
    }
    // Adjuster Dropdown list selection changed event
    private async Task OnUserSelectionChanged(object value)
    {
        warningMessage = string.Empty;
        if (value is string selectedNwideId)
        {
            Name = selectedNwideId;
            globalToken = await apiService.GetGlobalTokenAsync(Name);
        }
        StateHasChanged();
    }
    // Fetch from the API
    public async Task<List<AdstrDto>> GetLoadAdjusAsync()
    {
            var response = await apiService.GetjustersAsync();
            return response ?? new List<AdstrDto>();
    }    
}

I have a custom grid filter where I use an animation container to show/hide.  When a value changes, I want to close the animation container similar to how the filter automatically closes on your control filters (treelist).  So, I have a button that toggles the filter state (ExpandCollapse).  Then, when a value changes in my filter (textbox in example) I call a method that should close the filter and refresh my data.  I find the OnChange event is called once a value is changed (textbox) but then also when the DatePicker closes and when the DropDownList closes and when the animation container is closed.  

The result is the toggle kinda goes nuts.  Its open/closed/opened at times where it shouldn't.  How do I get around this?


I tried to compare the existing value with the new value after removing the binding but, no success.

Toggle

I currently have a case to where I have a DropDownList with a ValueChange(), depending on which one the user chooses, I need to throw a popup for confirmation. As the user 'scrolls' through the options with the arrow keys, this will cause that popup to be selected. Outside of this, we do not like the idea of when pressing ESC, the last highlighted value is kept.

Is there any native control to change this? We have a lame workaround but it is highly desired to have the ability to limit a selection by the ENTER key. As far as we know, this 'style' should be 508 compliant.


Ex DropDownList:
<TelerikDropDownList
                          Value="@cart.brand"
                          Id="brand_dropdown"
                          Data="@Organizations"
                          ValueField="Name"
                          TextField="Name"
                          DefaultText=" "
                          Width="100%" 
                          TValue="string" 
                          TItem="BrandViewModel" 
                          ValueExpression="@(() => cart.brand)" 
                          ValueChanged="@((e) => HandleSelectBrand(e))"> 
</TelerikDropDownList>

The user doesn't have to select anything in my drop down.  So, if they select something and change their mind and want to clear it... how do I do it?

 

A DropDownList receives a List of Items and then displays the field I select via Reflection. In the example below that would be the "Text" field. How would I create a localized text in an easy way. I already inject the IStringLocalizer into this component but I cannot pass a method call to the dropdownlist as far as I know. Is there a way to tell Telerik globally to use my Localizer to translate all strings that would be rendered or sth like that? I have several ideas how I could add Localizations but they all seem rather complicated and I would like to know the intended way.

 <TelerikDropDownList Data="@Data"
                                         @bind-Value="@SelectedValue"
                                          TextField="@nameof(MyType.Text)"/>

Hello, i want use the treeview, i have many elements. so it stretch if i expand it over the screen, and this is not fine :)

so i want the treeview in the dropdown list. but it doestn work. it looks horrible. Have someone a idea or a soution. thank you.

this is my code. and i need a treeview. because i have expand items.

<TelerikDropDownList Data="@FlatData" @bind-Value="SelectedItemText" >
    <ItemTemplate>
        <TelerikTreeView Data="FlatData" SelectedItems="@SelectedItems" @bind-ExpandedItems="@ExpandedItems" />
    </ItemTemplate>
</TelerikDropDownList> 

EDIT: Title should say *Can't* enable/disable DropDownList rather than *Can*

I have a Dialog component with a DropDownList and a MultiSelect. When no items are selected in the MultiSelect, I want the DropDownList to be disabled. I've set it up like so:

When I put the DropDownList and MultiSelect directly into a Dialog, this doesn't work. Specifically, when I add items to the MultiSelect, the DropDownList doesn't get enabled. However, when I move this exact same code into a separate component and then embed THAT component into the Dialog, then it does. Any ideas why that would be?

I have a reproduction of the issue here: https://github.com/kbaley/TelerikBlazor/blob/main/TelerikBlazor/TelerikBlazor.Client/Pages/Home.razor

EDIT: I've tried calling StateHasChanged in the SelectChange handler but it doesn't change the behaviour.

Hi there.
I have a list of a class which contains 2 string properties, "MyValueField" and "MyTextField".
If one of the items in the list has the MyValueField property set to an empty string (in the example below it's the first item), selecting that item in the TelerikDropDownList will assign null to the binded value. Instead, an empty string should be assigned to the binded value variable.
It is worth noting that "externally" assigning the binded value variable to an empty string (either on initialization or through a button) will successfully work and the TelerikDropDownList component will display the selected item.

The following gif showcases the binded value variable becoming null when the item with MyValueField set to an empty string is selected through the TelerikDropDownList: https://i.gyazo.com/3d75359334d900a74334ae6de2493576.mp4
The following gif showcases the binded value variable becoming an empty string when pressing a button that sets it to one, and gets set to null when the first item in the TelerikDropDownList is selected: https://i.gyazo.com/12ee88a8e161f8c3b5a023d8fbc44a28.mp4

Here is the REPL link: https://blazorrepl.telerik.com/GfYbuCFt318IzZzv41
This also affects the ComboBox component: https://blazorrepl.telerik.com/czOPYjFf04sX7cIW36