Hello Team,
I have a requirement where I need to use microsoft word editor in blazor front end application. I found the closest component to it is the TelerikEditor. But it has a lot of limitations (like pages, columns, mail merge fields, footers etc). So, I need to do some customizations in the telerik editor (https://blazorrepl.telerik.com/QRkMwdvc41pMT93w35).
On initial research, I found that there is a library, Blazor Dev Express (https://docs.devexpress.com/Blazor/401891/components/rich-text-editor) that offers an editor similar to that of ms-word.
Is there any similar editor in Telerik UI for Blazor or is anything similar coming up soon in future upgrades?
Apologies if duplicate. It seems that when Tooltip's ShowEvent is set to Click, you can click anywhere in the browser window except on the element that triggers the tooltip to open. I think it would be better behavior to have the triggering element toggle the tooltip instead of only opening. Is there perhaps a workwround?
Hello,
Is there a way to fire an event (or listen to an existing one) for the Upload control when the user clicks on a file that has been added to the Files list of the Upload control? I'm populating the list of pre-existing files for records and I'd like to be able to let the user download them.
Thanks
I have a Blazor form with five cascading combo boxes. The method to load the next combo box is called by the OnChange() event. I've put in breakpoints and seen it hit that method every keystroke and I can't figure out why.
Its also refreshing the page on each keystroke. On each keystroke, the page refreshes, the OnChange method is called and then the page refreshes again. I understand why it does after, because there was a change. But its the before that is confusing me.
Here is an example of the combo boxes.
<div class="ms-section-header"> Change Details</div>
<input type="text" hidden="true" @bind="ChangeDetails.ChangeDetailId" />
<div>
<TelerikFloatingLabel Text="Level 1">
<TelerikComboBox @ref=cbl1 Class="justification" AllowCustom="true" Data="@L1" ClearButton="false" TextField="Name" ValueField="TaxonomyId" @bind-Value=@L1Value OnChange="@(() => GetNextLevel(L1Value, 1))"> </TelerikComboBox>
</TelerikFloatingLabel>
</div>
@if (!String.IsNullOrEmpty(L1Value))
{
<div>
<TelerikFloatingLabel Text="Level 2">
<TelerikComboBox @ref=cbl2 Class="justification" AllowCustom="true" Data="@L2" ClearButton="false" TextField="Name" ValueField="TaxonomyId" @bind-Value=@L2Value OnChange="@(() => GetNextLevel(L2Value, 2))"></TelerikComboBox>
</TelerikFloatingLabel>
</div>
}
I attached a file that contains the whole page HTML and at the bottom is the OnChange method.
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