Telerik Forums
UI for Blazor Forum
1 answer
18 views

When I call "Dialogs.AlertAsync", I get null reference error. Any reason why?  The whole page is under TelerikRootComponent.


<TelerikGrid Data="@availableSchedules" class="myTelerik-grid" SelectionMode="GridSelectionMode.Multiple"
             SelectedItems="@selectedSchedules"
             SelectedItemsChanged="@((IEnumerable<BTWInstructorAvailability> newSelected) => OnRowSelect(newSelected))"
             ScrollMode="GridScrollMode.Scrollable" Height="300px">
    <GridColumns>
        <GridCheckboxColumn CheckBoxOnlySelection="true" SelectAll="false" />
        <GridColumn Field="InstructorName" Title="Instructor Name" />
        <GridColumn Field="StartDate" DisplayFormat="{0:MM/dd/yyyy}" Title="Start Date" />
        <GridColumn Field="EndDate" DisplayFormat="{0:MM/dd/yyyy}" Title="End Date" />
        <GridColumn Field="Languages" Title="Languages" />
    </GridColumns>
</TelerikGrid>


protected async Task OnRowSelect(IEnumerable<BTWInstructorAvailability> newSelected)
{
    // Enforce max selection of 3
    if (newSelected.Count() > 3)
    {
        await Dialogs.AlertAsync("Maximum of 3 lessons can be selected.");
        return; 
    }

    selectedSchedules = newSelected;
}

Dimo
Telerik team
 answered on 21 Aug 2025
1 answer
21 views

I have a grid that is needs to use EditMode=GridEditMode.Incell.  I have a Telerik CheckBox defined under Template for  a GridColumn.  In order to prevent the need to click twice on the checkbox in the grid (click once to enter edit and click again to actually change the state of the checkbox to checked/unchecked), I have to set the GridColumn to Editable=false and then use OnChange to set the model value:

 <TelerikGrid @ref="@BookingEquipmentGridRef"
              Data="@BookingEquipmentList"
              EditMode="@GridEditMode.Incell"
              OnEdit="@OnEquipmentEdit"
              OnRowClick="@OnEquipmentRowClick"
              OnRowRender="@OnRowRenderHandler"
              OnUpdate="@OnEquipmentUpdate"
              OnStateInit="@((GridStateEventArgs<BookingEquipmentModel> args) => OnEquipmentGridStateInit(args))"
              Height="226px"
              Size="@ThemeConstants.Grid.Size.Small"
              SelectionMode="GridSelectionMode.Single"
              SelectedItems="@SelectedEquipmentList"
              FilterMode="GridFilterMode.FilterMenu"
              Resizable="true"
              Sortable="true"
              Reorderable="true"
              Pageable="true"
              EnableLoaderContainer="false"
              PageSize="25">
   <GridColumns>
                <GridColumn Field=@nameof(BookingEquipmentModel.IsChassis) Title="Chassis" Editable="false" Filterable="false" Width="5rem">
                    <Template>
                        @{
                            var bem = (BookingEquipmentModel)context;
                        }
                        <TelerikCheckBox Value="@bem.IsChassis" ValueExpression="@(() => bem.IsChassis)" ValueChanged="@((bool newValue) => OnChassisChanged(newValue, bem))" />
                    </Template>
                </GridColumn>

   </GridColumns>
</TelerikGrid>

Because I have to set Editable=false the OnEdit event is not fired so I no longer can use args.IsCancelled = true to prevent cell update. In my OnChassisChanged I can not assigned the value to the model but the visual state will no longer match.


    private Task OnChassisChanged(bool newValue, object item)
    {
        if (item == null) return Task.CompletedTask;

        BookingEquipmentModel selectedEquipmentModel = (BookingEquipmentModel)item;

        if (EditableState(SelectedBooking, selectedEquipmentModel) == BookingEquipmentState.EditableStatus.No) return Task.CompletedTask;

        selectedEquipmentModel.IsChassis = newValue;
        selectedEquipmentModel.IsEdit = true;
        DataState.State = DataState.States.UnSaved;

        return Task.CompletedTask;
    }

My users were complaining about having to click twice on a checkbox to set it's new state (checked or unchecked) ... and I agree with their issue, but I can't seem to find a solution (and keep using the TelerikCheckBox) ... any suggestions?

I seem to recall reading  another thread from some other user having similar problem, but seem unable to locate it again.

 

 

Dimo
Telerik team
 answered on 21 Aug 2025
1 answer
12 views
How can I change the text for the save command for a row to say add when it's adding a new item and Update when it's updating a new item? Is there no official way and I have to manually do that? Thanks!
Dimo
Telerik team
 answered on 20 Aug 2025
1 answer
20 views

According to the following link, the Conversational UI component is complete and was released in Aug '25: conversational ui (chat)

However, I don’t see it referenced in the August release notes, documentation, or any related demos. Please, let me know if this component is available and I’ve just overlooked where to find it.

Dimo
Telerik team
 answered on 20 Aug 2025
1 answer
21 views

After upgrading our project from Telerik UI for Blazor v9 to v10, some of our pages started throwing the following error:

Unhandled exception rendering component: A Telerik component in the requested view requires a TelerikRootComponent in MainLayout or a parent component.
Read more at: https://docs.telerik.com/blazor-ui/knowledge-base/common-component-requires-telerikrootcomponent

This is unexpected because:

* All pages in our application use the same MainLayout.

* The MainLayout.razor already contains a <TelerikRootComponent> at the top level.

* Nothing else was changed in the project except the Telerik package upgrade (no modifications in layouts or routing).

The error appears only on some pages, while other pages using the exact same layout work fine.

Questions / Issues:

1) Is this a breaking change or regression introduced in v10?

2) Are there any known scenarios where a Telerik component would fail to detect the existing TelerikRootComponent in the MainLayout?

3) Could there be an internal change in v10 causing certain components (e.g. Grid, Window, DropDowns, etc.) to require a different layout inheritance?

Environment:

* Blazor Server (.NET 9)

* Telerik UI for Blazor v10.x (upgraded from v9.x)

* MainLayout.razor includes <TelerikRootComponent> wrapping the layout body.

Expected behavior:

All components should work correctly as they did in v9, since the TelerikRootComponent is already present in the main layout.

Could you please advise if this is a bug or if there is an additional migration step required when upgrading from v9 to v10?

 

Thank you.

Dimo
Telerik team
 answered on 20 Aug 2025
1 answer
20 views

I have a chart that shows different data but for same group data. I re-use the color between the area and column series since thay are about the same source data group. This makes my legend report each item tweice, which I do not want.

How can I disable legend item visibility for one series, but keep visibilitie for other series?

 

TIA - Hans

Dimo
Telerik team
 updated answer on 19 Aug 2025
1 answer
20 views

I am using the TelerikAutoComplete component in Blazor with a custom OnRead function to fetch items from a data source. The issue I am facing is:

  • When I type in the search box, OnRead executes as expected.

  • But when I erase the search text (set it back to null or empty string), the OnRead function is not triggered.


My expectation is that when the input is cleared, OnRead should fire again so that I can refresh the data (or return an empty dataset).


    <TelerikAutoComplete @ref="@autoCompleteRef"
                         TItem="@AutoCompleteLookupItem"
                         Id="@Id"
                         OnRead="@ReadItems"
                         DebounceDelay="@DebounceTimeMs"
                         Filterable="@true"
                         Placeholder="@Placeholder"
                         FilterOperator="@FilterOperator"
                         ValueField="@(nameof(AutoCompleteLookupItem.SelectedValue))"
                         Value="@Value"
                         ValueExpression="@( () => Value )"
                         OnChange="HandleValueConfirmation"
                         ValueChanged="@HandleValueChanged"
                         Enabled="IsEnabled"
                         Class="@Class"
                         OnBlur="@OnFocusLoose">

        <ItemTemplate>
            @if (!string.IsNullOrWhiteSpace(@context.SelectedValue))
            {
                @if (context.Hints == null || !context.Hints.Any())
                {
                    //If we do not have any hints. Display only values
                    @if (context.Value.Key == "--")
                    {
                        //Do not display label. Only display value
                        <span id="value">@context.SelectedValue</span>
                    }
                    else
                    {
                        //Display both label and value
                        <span id="label-and-value">@context.Value.Key: @context.SelectedValue</span>
                    }
                }

                else if (context.Hints.Count == 1)
                {
                    //If we only have single hint. Display value along with hint.
                    <span id="value-with-hint">
                        <strong>@context.SelectedValue</strong>
                        @if (!string.IsNullOrWhiteSpace(@context.Hints.First().Value))
                        {
                            <i>&nbsp;@context.Hints.First().Value</i>
                        }
                    </span>
                }

                else if (context.Hints.Count == 2)
                {
                    @if (string.IsNullOrWhiteSpace(this.Value) || !LookupBehavior.HasFlag(LookupBehavior.HighlightUserInput))
                    {
                        <span id="has-empty-value">
                            <span id="first-hint">@context.Hints.ElementAt(0).Key: @context.Hints.ElementAt(0).Value<br /></span>
                            <span id="selected-value">@context.Value.Key: @context.SelectedValue <br /></span>
                            <span id="second-hint">@context.Hints.ElementAt(1).Key: @context.Hints.ElementAt(1).Value</span>
                        </span>
                    }
                    else
                    {
                        <span id="has-value">
                            <span id="first-hint">@context.Hints.ElementAt(0).Key: @UIUtilities.HighlightUserInputWithBoldTags(HttpUtility.HtmlEncode(@context.Hints.ElementAt(0).Value), HttpUtility.HtmlEncode(this.Value)) <br /></span>
                            <span id="selected-value">@context.Value.Key:  @UIUtilities.HighlightUserInputWithBoldTags(HttpUtility.HtmlEncode(@context.SelectedValue), HttpUtility.HtmlEncode(this.Value)) <br /></span>
                            <span id="second-hint">@context.Hints.ElementAt(1).Key:  @UIUtilities.HighlightUserInputWithBoldTags(HttpUtility.HtmlEncode(@context.Hints.ElementAt(1).Value), HttpUtility.HtmlEncode(this.Value))</span>
                        </span>
                    }
                }
            }
        </ItemTemplate>
    </TelerikAutoComplete>

    <div class="icons">
        @if (IsEnabled)
        {
            <span>
                <a id="search-link" @onclick="@OpenAutoComplete" title="search">
                    <svg class="icon" aria-hidden="true" focusable="false">
                        <use xlink:href="icons/ece-sprite.svg#ece-icon-search"></use>
                    </svg>
                </a>
            </span>
        }
        else
        {
            <span class="disable-links">
                <a id="search-disabled-link">
                    <svg class="icon" aria-hidden="true" focusable="false">
                        <use xlink:href="icons/ece-sprite.svg#ece-icon-search"></use>
                    </svg>
                </a>
            </span>
        }

    </div>
</div>


@if (ShowRequiredMessage && !string.IsNullOrWhiteSpace(RequiredMessage))
{
    <span id="required-message" class="k-form-error k-invalid-msg ">
        @RequiredMessage
    </span>
}


@code {
    [Parameter]
    public string Id { get; set; }

    [Parameter]
    public string Placeholder { get; set; }

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    [Parameter]
    public string BoundField { get; set; }

    [Parameter]
    public EventCallback<string> ValueConfirmed { get; set; }

    [Parameter]
    public string Value { get; set; }

    [Parameter]
    public LookupBehavior LookupBehavior { get; set; } = LookupBehavior.None;

    [Parameter]
    public int DebounceTimeMs { get; set; } = 500;

    [Parameter]
    public int InitialSkip { get; set; } = 0;

    [Parameter] public Func<string, Task<List<AutoCompleteLookupItem>>> FilterMethod { get; set; }

    [Parameter]
    public StringFilterOperator FilterOperator { get; set; }

    [Parameter]
    public string? RequiredMessage { get; set; }

    [Parameter]
    public bool IsEnabled { get; set; } = true;


    [Parameter]
    public string Class { get; set; }

    public bool ShowRequiredMessage { get; set; }

    private List<AutoCompleteLookupItem> dataSource;

    private TelerikAutoComplete<AutoCompleteLookupItem> autoCompleteRef { get; set; }
    private string lastValue;
    private bool lostFocus;

    async Task ReadItems(AutoCompleteReadEventArgs args)
    {
        string userInput = string.Empty;
        if (args.Request.Filters.Count > 0)
        {
            Telerik.DataSource.FilterDescriptor filter = args.Request.Filters[0] as Telerik.DataSource.FilterDescriptor;
            userInput = filter.Value.ToString();
        }

        if (lastValue != userInput)
        {
            if (!lostFocus)
            {
                lastValue = userInput;
                args.Data = await FilterMethod.Invoke(userInput);
            }
            else
            {
                lastValue = this.Value;
                args.Data = await FilterMethod.Invoke(lastValue);
                lostFocus = false;
            }
        }
    }

    private void OnFocusLoose() => lostFocus = true;

    private async Task HandleValueConfirmation(object userChoice)
    {
        string currentValue = (string)userChoice;
        if (LookupBehavior.HasFlag(LookupBehavior.TriggerActionOnValueConfirmation))
        {
            if (currentValue != lastValue)
            {
                await ValueConfirmed.InvokeAsync((currentValue) ?? string.Empty);
                lastValue = currentValue;
            }
        }

        if (LookupBehavior.HasFlag(LookupBehavior.ValidateOnValueConfirmation))
        {
            if (ValueConfirmed.HasDelegate)
                ValueConfirmed.InvokeAsync(BoundField);

            ShowRequiredMessage = string.IsNullOrEmpty(this.Value) && !string.IsNullOrEmpty(RequiredMessage);
        }

        await ValueConfirmed.InvokeAsync((currentValue) ?? string.Empty);

    }


    async Task OpenAutoComplete()
    {
        await autoCompleteRef.FocusAsync();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            <!--
            Below script is used for opening the autocomplete suggestion upon clicking Search Icon
            -->
            await js.InvokeVoidAsync("TelerikTweaks.attachFocusHandler", autoCompleteRef.Id, ".k-autocomplete");
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task HandleValueChanged(object newValue)
    {
        this.Value = (string)newValue;
        await ValueChanged.InvokeAsync(this.Value);
    }
}

Steps to Reproduce:

  1. Type some text in the autocomplete → OnRead is called ✅.

  2. Erase the text so the input becomes empty (null or "") → OnRead is not called ❌.


Question:
Is this the expected behavior? If so, how can I force the autocomplete to execute OnRead when the input text is cleared (so I can refresh my dataset)?
Do I need to hook into another event (ValueChanged, OnChange, etc.) to manually call ReadItems in this case?

Dimo
Telerik team
 updated answer on 18 Aug 2025
1 answer
20 views

Hello,

I noticed that when TelerikDatePicker and TelerikTimePicker components are used with nullable DateOnly and nullable TimeOnly values, respectively, and ShowClearButton is set to true, the "X" button still appears in an empty field when the value is null. This shouldn’t happen, as there is no value to clear. When you click on the field to type a date or time, the "X" button disappears.

Here is the reproduction of the issue:

https://blazorrepl.telerik.com/GfaCbmlz03hT2mky54

It doesn’t seem like this is intended behavior. If it’s not, is there a workaround to prevent the "X" from appearing when there is no value?

Thanks,

Ivaylo

 

Ivan Danchev
Telerik team
 answered on 15 Aug 2025
1 answer
13 views

When a user makes a selection in a dropdown in the first row of a Blazor Grid I want to be able to hide the same column in all the remaining rows to prevent them from making selections in those dropdowns. Is this possible?

 

George
Top achievements
Rank 1
Iron
 answered on 13 Aug 2025
1 answer
12 views

I'm getting this error when bound data list for a detail template is null

I don't have a Parameter 'source' in any model so don't understand what this is in reference to?

 

<DetailTemplate>
    <div class="form-group form-inline right">
        @{
            var bookingEquip = context as BookingEquipmentModel;
            <TelerikGrid @ref="@bookingEquipmentCommodityGridRef" 
                         Data="bookingEquip.Commodities"
                         Pageable="true"
                         PageSize="4"
                         Resizable="true"
                         Size="@ThemeConstants.Grid.Size.Small"
                         Width="90rem"
                         EditMode="@GridEditMode.Incell"
                         OnDelete="@((GridCommandEventArgs args) => OnCommodityDelete(args, bookingEquip))"
                         OnCreate="@((GridCommandEventArgs args) => OnCommodityCreate(args, bookingEquip))"
                         OnUpdate="@((GridCommandEventArgs args) => OnCommodityUpdate(bookingEquip, args))">
                <GridToolBarTemplate>
                    <!-- can only add a single commodity if there are none associated with this equipment) -->
                    <GridCommandButton Command="Add" Class="btn-green" Icon="@FontIcon.Plus" Enabled="@(!bookingEquip.Commodities.Any())">Add Commodity</GridCommandButton>
                </GridToolBarTemplate>
                <GridColumns>
                    <!-- Commodity Types -->
                    <GridColumn Field=@nameof(BookingEquipmentCommodityModel.CommodityType) Editable="true" Title="Description" Width="6rem">
                        <EditorTemplate Context="cbecContext">
                            @{
                                _currentBookingEquipmentCommodityModel = cbecContext as BookingEquipmentCommodityModel;
                                if (_currentBookingEquipmentCommodityModel != null)
                                {
                                    <TelerikDropDownList Data="@_CommodityList"
                                                         Value="@_currentBookingEquipmentCommodityModel.CommodityTypeId"

for the Data reference, bookingEquip is NOT null but it's property bookingEquip.Commodities is indeed null (expected).

The grid displays correctly, but as soon as I click on the "+" expand it will crash with exception in the control.

I'm puzzled as to why this is happening?  When I populate other grids (not using a DetailTemplate) in my Blazor app, and the Data reference is a null, nothing is displayed/render in the grid and I just get a "No records available." ... which is good.  But the same behavior doesn't seem to happen when using DetailTemplate?

Any suggestions?

Rob.

 

 

 

Rob
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 11 Aug 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?