Telerik Forums
UI for Blazor Forum
1 answer
334 views

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?

Dimo
Telerik team
 answered on 28 Aug 2023
2 answers
414 views

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?

Edward
Top achievements
Rank 1
Veteran
Iron
 answered on 26 Aug 2023
1 answer
255 views
I have a menu I'd like to override the default style and am able to change the color of the text for the menu item but the separator between each text item doesn't change. How can I change the color of the separator.
Georgi
Telerik team
 answered on 25 Aug 2023
1 answer
95 views

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

Dimo
Telerik team
 answered on 25 Aug 2023
0 answers
308 views

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.

Chris
Top achievements
Rank 2
Iron
Iron
Iron
 updated question on 24 Aug 2023
1 answer
200 views

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>
From the setter of SearchTerm I call 'Search'

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!

Georgi
Telerik team
 answered on 24 Aug 2023
0 answers
321 views

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.
In the model, I have a few required fields, but I don't want to prevent users from moving to the next page if the current page's input is invalid. Instead, I'd like to collect all the validation messages and display them in their entirety on the last step. To achieve this, I placed a <TelerikValidationSummary> component in the last step of the wizard.
However, it seems that the validation messages aren't being displayed. I've attached a screenshot of my Razor page for your reference. It's a blazor webassembly app.
If anyone could provide insights or guidance on how to make the validation summary work properly, I'd greatly appreciate it!

Thanks in advance for your help!

Nidhi
Top achievements
Rank 1
 asked on 23 Aug 2023
11 answers
7.7K+ views

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()
Víctor
Top achievements
Rank 1
Iron
Iron
Iron
 updated answer on 23 Aug 2023
1 answer
116 views

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.

Georgi
Telerik team
 answered on 23 Aug 2023
1 answer
162 views

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

Georgi
Telerik team
 answered on 23 Aug 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?