Hi,
I am trying to implement a loading spinner with the <TelerikAutoComplete> control.
I have overriden the <NoDataTemplate>
<p>@IsLoading</p>
<TelerikAutoComplete
@ref="@AutoCompleteControl"
Data="ActiveDataSet"
@bind-Value="SearchTerm"
DebounceDelay="500"
Placeholder="Search here..."
FilterOperator="StringFilterOperator.Contains"
ClearButton="true">
<NoDataTemplate>
@if (IsLoading)
{
<TelerikLoader Visible="true"
Size="@ThemeConstants.Loader.Size.Large"
ThemeColor="@ThemeConstants.Loader.ThemeColor.Tertiary"
Type="@LoaderType.ConvergingSpinner"/>
}
else
{
<p>No Data</p>
}
</NoDataTemplate>
</TelerikAutoComplete>where I'm getting the data and updating my 'IsLoading'
private async Task Search(string searchTerm)
{
try
{
// Long running search that updates the data
}
finally
{
IsLoading = false;
StateHasChanged();
// AutoCompleteControl.Rebind(); // Without this the loading spinner never goes away
}
}If I don't include the AutoCompleteControl.Rebind(); the loading indicator never goes away, despite the Data being updated and IsLoading being set to false.
Is there something I'm missing about how to update the binding inside the <NoDataTemplate>?
Thanks!
hi,
I've been working on creating a form using the Telerik Wizard component, allowing users to fill out information across different steps. I've been using the same model for binding data in several WizardSteps. I referred to the example here: https://demos.telerik.com/blazor-ui/wizard/overview . However, I've removed the confirmation page since it's not necessary for my use case.I'm wondering how I can two-way bind a TelerikDropDown selection to a complex model object rather than a primitive type such as an Id field. I'm trying to add a TelerikDropDownList to a page where the user can select a user-friendly name of an object and have that selection's value bound to the object itself rather than a primitive data type. For example:
<TelerikDropDownList Data="@DropDownItems" TextField="LabelField" ValueField="ValueField" @bind-Value="@SelectedItem"/>@code { public List<GenericDropDownModel<Item>> DropDownItems { get; set; } public IEnumerable<Item> AllItems { get; set; } public Item SelectedItem { get; set; } protected override Task OnInitializedAsync() { AllItems = await DataService.LoadItems(); SelectedItem = AllItems.First(); } private void SetDropDownItems() { List<GenericDropDownModel<Item>> dropDownItems = new List<GenericDropDownModel<Item>>(); if (AllItems != null) { foreach(var item in AllItems) { GenericDropDownModel<Item> dropDownItem = new GenericDropDownModel<Item>() { ValueField = item, LabelField = item.Name }; dropDownItems.Add(dropDownItem); } } DropDownItemsItems = dropDownItems; } public class GenericDropDownModel<T> { public string LabelField { get; set; } public T ValueField { get; set; } } public class Item { public string Name { get; set; } public IModel Model { get; set; } public IEnumerable<IOtherModel> OtherModels { get; set; } } public class Model { public int Id { get; set; } public string Name { get; set; } public string Info { get; set; }
public IAnotherModel MoreDetails { get; set; } }}
The drop-down is not allowing me to bind to non-primitive types nor specify a property of a property, i.e.:
<TelerikDropDownList Data="@AllItems" TextField="Name" ValueField="@Model.Info" @bind-Value="@SelectedInfo"/>
I get the following error with the first code snippet scenario:
System.InvalidOperationException: Telerik.Blazor.Components.TelerikDropDownList`2[GenericDropDownModel`1[Item],Item] does not support the type 'Item'. at Telerik.Blazor.Components.Common.TelerikSelectBase`2.TryParseValueFromString(String value, TValue& result, String& validationErrorMessage) at Telerik.Blazor.Components.Common.TelerikSelectBase`2.set_CurrentValueAsString(String value) at Telerik.Blazor.Components.TelerikDropDownList`2.SelectItem(ListDataItem item) at Telerik.Blazor.Components.TelerikDropDownList`2.OnParametersSetAsync() at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task) at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()If I minimize a TelerikWindow, the tooltip that appears on the "Restore window" button shows "Minimize" instead of (say) "Restore".
Please see attached file.
Version is 4.4.0.
Thank you.
Hi there.
I'm using the MultiSelect component and limiting how many items the user can select from the drop-down list.
I've used the following guide to achieve that goal (specifically the first code snippet in the "Solution" section): https://docs.telerik.com/blazor-ui/knowledge-base/multiselect-always-select-item-limit-total#solution
Adding the AutoClose="false" instruction in the TelerikMultiSelect element and selecting more than one item will create a mismatch between what is seen in the drop-down list VS what is seen in the input box.
Losing focus of the component and then regaining focus of it will show the correct items that have been selected, but deselecting the items in this state will also create the mismatch mentioned.
The following gif showcases both situations: https://i.gyazo.com/9ad670d9b3cffc3d0b43cb457bb57a6d.mp4
Here is the REPL link: https://blazorrepl.telerik.com/cdkCbXcm22boLMeV33
The issue does not happen because of the "static item" used in the example; here is a REPL link which has the code about the "static item" removed: https://blazorrepl.telerik.com/mHEsFjwQ26ywR1tD29
Hello, we have a strange behavior in the scheduler.
When first called up, the appointments in the timeline are displayed correctly in the order of their resource. (The text in the appointment corresponds to the id of the resource.)
If you switch the scheduler view to day and then back to timeline, everything is still displayed correctly.
However, if you switch to the weekly or monthly view and then back to the timeline, some of the appointments shift down by about 250px and end up in the wrong resource or no resource at all.
I am using the TelerikPanelBar with only 1 item to create a collapsible form.
Is it possible to control the color and background color of the HeaderTemplate.
<TelerikPanelBar Data="@Model"
ExpandedItems="@Model">
<PanelBarBindings>
<PanelBarBinding>
<HeaderTemplate>
<h4>Filters</h4>
</HeaderTemplate>
</PanelBarBinding>
</PanelBarBindings>

I have a simple TelerikGrid within a blazored modal:
<TelerikGrid Data="this.Model"
Height="400px">
<GridColumns>
<GridColumn Field="Id" Width="30px" Title="Id" />
<GridColumn Field="Name" Title="Name" />
<GridColumn Field="RoleId" Width="30px" Title="SRRid" />
</GridColumns>
</TelerikGrid>when I load the information I get 50 records, due to the modal size I can only see 15 records, however the vertical scrollbar is not being displayed.
Am I missing something else that I need to configure?
Good morning. In my code I've seen that AutoFitAllColumnsAsync works only from the second time on. I'm asking you if I'm missing something or doing something wrong.
Follows 2 repl link:
in the first one when you click on the upper button to load data, the data are loaded and then AutoFitAllColumnsAsync is called twice and works: https://blazorrepl.telerik.com/GxkiFivl46gBfE8o57
in the second one when you click on the upper button to load data, the data are loaded and then AutoFitAllColumnsAsync is called only once and doesn't work: https://blazorrepl.telerik.com/wdEsbsPF50K99GvR04
Please note that in the second example if you click again on the load data button the AutoFitAllColumnsAsync is correctly applied (in other words, in my examples AutoFitAllColumnsAsync works only from the second time on).
Please let me know if I have to change something in code. Thank you.

I have a Blazor server application that is displaying a Gantt control. For several of my users with smaller screen sizes they have noticed that the Tree and Timeline can get out of sync vertically. When scrolling the Tree stops and the Timeline keeps going:
I have also observed that resizing the browser window can result in differences in height of the Tree and Timeline: