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;
}
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.
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.
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.
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
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> @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:
Type some text in the autocomplete → OnRead
is called ✅.
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?
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
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?
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.