I've followed everything i can find about enforcing UTF-8 encoding, but this is still happening. It only happens in the drop down options of the aforementioned components, not after they are selected and not in the ASP.NET core <InputSelect> component.

 

 

The Dropdownlist has an Open method to open it programatically, the DropdownButton has no such functionality.

Hi there

 

I'm trying to use DropDownlist with the Grouping field and the OnReadEvent, with mode = DropDownScrollMode.Scrollable

The OnRead event provides the grouping field to the request. The request is sent to my (API) server that handles the request, and the result is returned . Then after my OnReadHandler method ands, I get an internal exception: "System.NullReferenceException: 'Object reference not set to an instance of an object.'"

with following stack:

 

I am struggling to handle the request correctly and provide an answer back to the list that it can handle properly.

Nevertheless I get errors. Is there a working example of using the OnRead event with the GroupField property set to a property of the TItem? Or is this combination impossible inspite of DropDownScrollMode.Scrollable mode?

BTW - In case of large dropdownlist result set I want to fall back to virtual mode, and drop the grouping option, as it is documented that these are not compatible. (This is handled blazor side by checking the dataset count before the first OnRead call)

I've tried to find documentation on how to modify the CSS for the dropdownlist and it's popup but can't seem to figure out how to change the "Search" area size, nor the "Select Type" (they are too large).

I was able to figure out how to adjust the actual items:

and reference:

but I don't know what to use in CSS ... is there a list somewhere of the ".k" class selectors?

Rob.

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?