Questions on UI for Blazor Forum

0 answers

22 views

TypeError: Cannot read properties of null (reading 'addEventListener')

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.

ComboBox

DropDownList

MultiColumnComboBox

asked on 18 Jun 2025

2 answers

58 views

ComboBox: How to prevent Text entry

How do I prevent the user from typing text into the text field in the combobox?

                                        <TelerikComboBox @bind-Value="@SessionOptionIndex1"
                                                         Data="@SessionOption1Items"
                                                         ShowClearButton="false"
                                                         TextField="Name" ValueField="Id" />

ComboBox

answered on 16 May 2025

0 answers

71 views

Proper way to reflect changes to a child control when a Combo box in parent is changed?

I have a child component that I am trying to get to re-render when a new value on a combo box on the parent component is changed. My child control is not re-rendering to reflect the value change.

This is my current code:

 <TelerikComboBox 
            @bind-Value="@SelectedId"            
            FilterOperator="@filterOperator"
            Data="@ParticipantsDDL"
            TextField="@nameof(ParticipantDDL.CodeName)"
            ValueField="@nameof(ParticipantDDL.Id)"
            Placeholder="Select/enter a participant code or name." 
            Width="40vh"
            DebounceDelay="200"
            OnChange="@OnComboValueChanged"
            Filterable="true">
        </TelerikComboBox>       
        @if (SelectedId > 0)
        {
            <PDParticipant ParticipantId="@SelectedId" />
        }

And my Handler:

   
private void OnComboValueChanged(object newValue)
    {
        SelectedId = (int)newValue;
        StateHasChanged();
    }

When I select a new value in the Combo box the SelectedId value changes on the parent page but I need to force the child control to re-render with the new code. How do I force the child control to rerender with the new data?

ComboBox

updated question on 19 Feb 2025

1 answer

74 views

Element reference is null for TelerikComboBox

I'm trying to reference a TelerikComboBox in a razor component, but it keeps returning null.
(I'm using version 6.2.0)

Any clues?

Html:

<TelerikComboBox Class="hide-combobox-buttons"
Data="@AllLabels"
Value="@Label"
@ref="ComboBoxRef"
ValueChanged="@((string newValue)=> ValueChanged(newValue))"
AllowCustom="true">
</TelerikComboBox>

@code{

private TelerikComboBox<string, string>? ComboBoxRef { get; set; }

[Parameter]
public IReadOnlyList<string>? AllLabels { get; set; }

private string Label { get; set; } = string.Empty;

protected override async Task OnInitializedAsync()
{
if (ComboBoxRef != null) //here it's always null
await ComboBoxRef.FocusAsync();

await base.OnInitializedAsync();
}

}

ComboBox

answered on 16 Jan 2025

1 answer

84 views

Value gets set to null if ValueField is an empty string

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

ComboBox

DropDownList

answered on 14 Jan 2025

1 answer

84 views

Focus Telerik widget on validation error

Hi, my goal is validate a form and focus telerik widget with validation errors.

Now i can find the element search for class "k-invalid" but how to get the widget reference so i can call the FocusAsync() method?

Thanks

answered on 14 Oct 2024

1 answer

86 views

How to extract selected record from TelerikMultiColumnComboBox

Hello Telerik,

How do I feed the selected record from the TelerikMultiColumnComboBox to my custom Component? Do I utilize the ValueMapper="@GetGeneratorRecord" somehow?

Thank you

<ComGenerator Generator="GetGeneratorRecord" />

@page "/"
@inject SerOHRDatabase serOHRDatabase
@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<div>Generator Name Search:</div>

<TelerikMultiColumnComboBox TItem="ModtblGenerator"
                            TValue="int"
                            ValueField="@nameof(ModtblGenerator.Id)"
                            TextField="@nameof(ModtblGenerator.GenName)"
                            Filterable="true"
                            @bind-Value="@intSelectedGenID"
                            ItemHeight="260"
                            ListHeight="28"
                            PageSize="15"
                            ScrollMode="@DropDownScrollMode.Virtual"
                            OnRead="@ReadItems"
                            ValueMapper="@GetGeneratorRecord"
                            Width="250px">

    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="@nameof(ModtblGenerator.GenName)"
                                   Title="Gen Name"
                                   HeaderClass="header"
                                   Class="genNameCell"
                                   Width="250px"></MultiColumnComboBoxColumn>
        <MultiColumnComboBoxColumn Field="@nameof(ModtblGenerator.GenNum)"
                                   Title="Gen Num"
                                   HeaderClass="header"
                                   Width="150px"></MultiColumnComboBoxColumn>
    </MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>

<ComGenerator Generator="GetGeneratorRecord" />

<p>Selected product Id: @intSelectedGenID</p>

@code {

    List<ModtblGenerator> lstGenerators;
    int intSelectedGenID;

    protected async Task ReadItems(MultiColumnComboBoxReadEventArgs args)
    {
        await LoadData();

        var result = lstGenerators.ToDataSourceResult(args.Request);
        args.Data = result.Data;
        args.Total = result.Total;
    }

    private async Task LoadData()
    {
        if (lstGenerators == null)
        {
            lstGenerators = await serOHRDatabase.GetAllGenerators();
        }
    }

    protected Task<ModtblGenerator> GetGeneratorRecord(int intSelectedGenID)
    {
        return Task.FromResult(lstGenerators.FirstOrDefault(x => x.Id == intSelectedGenID));
    }
}

<style>
    .header {
        font-weight: bold;
        color: black;
    }

    .genNameCell {
        color: darkblue;
        font-weight: bolder;
    }
</style>

ComboBox

answered on 06 Sep 2024

1 answer

97 views

How can I custom the placeholder (DateInput) "GridColumn FilterMenuType="@FilterMenuType.Menu""

Hi everyone!

I hace this Rowfilter

This is the Telerik Code

 <GridColumn FilterMenuType="@FilterMenuType.Menu" Field="@nameof(HechoDirectoClienteViewModel.FechaVencimiento)" Title="Fecha vencimiento" TextAlign="ColumnTextAlign.Right" Resizable="true" Sortable="true" Width="170px" HeaderClass="center-wrap">
     <Template>
         @((context as HechoDirectoClienteViewModel)?.FechaVencimiento?.ToString("dd/MM/yyyy"))
     </Template>
 </GridColumn>

It is possible changue the DateFormat "y/M/yyyy" to this "dd/MM/yyyy?

answered on 12 Jul 2024

1 answer

81 views

Select the only remaining option in a Filterable Combobox.

I have a TelerikComboBox where the Data is a list of objects with Text and Value parameters, AllowCustom="false," and Filterable="true." The user can start typing in their desired selection to narrow down the list of options in the dropdown. After a while, they will narrow the dropdown options to a single value. If they press enter, click on the item in the dropdown, press down, or finish typing the entire Text associated with that selection's Value, the selection will be made. However, if they tab to or click on the next component, the selection will NOT be made. My request is for a way to automatically select the only remaining item in the filtered dropdown list when the component loses focus.

ComboBox

answered on 10 Jun 2024

1 answer

157 views

ComboBox with AllowCustom is losing keystrokes randomly at normal typing speed

This ComboBox, with filtering and custom values enabled, glitches when typing in the box. At a normal typing speed, I'm seeing that about 10% of keystrokes are skipped, or appear briefly and then disappear.

<TelerikComboBox Data="@_data"
                 @bind-Value="@_value"
                 AllowCustom="true"
                 Filterable="true"
                 FilterOperator="@StringFilterOperator.Contains"
                 Enabled="@Enabled"></TelerikComboBox>
...
List<string> _data = new() { "Lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit" };
string _value { get; set; }

Dropped letters are slightly less frequent with DebounceDelay="0" ; it's worse with more items in the list. It seems to occur if you type more than 3-4 letters per second.

Also, clicking the cursor in the middle of the text and typing can cause the cursor to jump to the end of the input and jumble your letters around.

ComboBox

MultiColumnComboBox

updated question on 07 Jun 2024