I’m using a TelerikComboBox in a Blazor application, and I’ve encountered an issue where the dropdown requires two clicks to display the loader and populate the values. On the first click, nothing happens—the loader does not appear, and the dropdown remains empty. Only after clicking a second time does the loader show and the data load correctly.

Here’s the relevant code snippet:

<TelerikComboBox Data="LookupDropdown" @bind-Value="@Compare.Operand2.Value" TextField="@nameof(KeyValueDropdownsModel.Label)"
                 ValueField="@nameof(KeyValueDropdownsModel.Action)" Filterable="true" AllowCustom=IsEnabled
                 Placeholder=@PlaceholderContent FilterOperator="@FilterOperator" Width="270px" OnRead="LoadDropdownDataAsync">
    <ItemTemplate>
        <span class="selectedOptionCode" aria-label="@context.Label" title="@context.Description">@context.Label</span>
    </ItemTemplate>
    <HeaderTemplate>
        @if (IsLoading || isEOBCodeLoading)
        {
            <div class="dropdown-spinner">
                <TelerikLoader Type="@LoaderType.InfiniteSpinner" Size="@(ThemeConstants.Loader.Size.Small)"></TelerikLoader>
            </div>
        }
    </HeaderTemplate>

    <NoDataTemplate>
        @if (!IsLoading && !isEOBCodeLoading)
        {
            <div>No data available</div>
        }
    </NoDataTemplate>
    <ComboBoxSettings>
        <ComboBoxPopupSettings Height="auto" MinHeight="30px" MaxHeight="250px" />
    </ComboBoxSettings>
</TelerikComboBox>

As finding:

Hi,

When defining the selected value from code with a dynamically populated list (autocomplete that feeds itself as you type), defining the bound value from code does not update the rendering, regardless of calling StateAsChanged, Rebind or Refresh.

The value is properly set but the text-field is not updated from the defined TextField property, and i know for sure that the matching item is inside the Data list.

Is this a known limitation ? is there working example of such setup ?

Hi all,

I used https://www.telerik.com/blazor-ui/documentation/components/pdfviewer/toolbar to customize my toolbar and it works fine.

So, I need to hide/show Download and Print Buttons according user and kind of report.

How do I hide this buttons inside my blazor code?

Regards,

Nelson

Hi

I want to add a textbox in the  GridToolBarTemplate. Because of the built-in arrow navigation it is not possible to move the cursor inside the textbox. Is it possible to disable the default arrow navigation in the GridToolBar?

Example in this simple REPL

Enter any text in the Textbox, hit the left arrow keyboard button and notice the cursor stays at the end of the text.

Best regards

Bram

Version 12.0.0 removed the .k-item class from rendering on a tab strip's tab but that now means that the active tab looks identical to all other tabs. Is there a workaround or some way to get that back without manually recreating the CSS myself? 

The screenshot is from the docs to show it's not just my project or any custom config on my end:

https://www.telerik.com/blazor-ui/documentation/components/tabstrip/overview

I'm writing an OnShapeClick method that (among other things) should change the Color of the selected shape. I am defining shapes as such: 

<DiagramShapes>
    @foreach (Node node in Nodes)
    {
        <DiagramShape Id="@node.LinkID" >
            <DiagramShapeContent Text="@node.GetDisplayName()" />
            <DiagramShapeFill Color="@node.GetColor()"/>
        </DiagramShape>
    }
</DiagramShapes>

In OnShapeClick, I am updating the Color by changing a field for the specified node that results in node.GetColor() returning a new Value, and this works. 

async Task OnPersonClick(DiagramShapeClickEventArgs Args)
{
    foreach (Node node in Nodes)
    {
        if (node.LinkID.Equals(Args.Id))
            node.State = SelectedState.True;
        else
            node.State = SelectedState.False;
    }
}

The issue is that when the Diagram is re-rendered, the positions of all the shapes are recalculated. resulting in any Shapes that the user has dragged out of position to revert to their original position, or in the case of the Force Diagram, a complete reshuffle of the Shapes in the Diagram. This is undesired behavior. 

In short, how do I update the Color (or any property) of a Diagram Shape while maintaining the current positions of all shapes within the Diagram?

Hi all,

When TelerikTreeView is used within TelerikWindow's WindowContent, mouse hover events trigger continuous re-rendering of the entire window content, resulting in significant performance degradation. However, using TelerikTreeView directly on a page outside the window doesn't cause these re-rendering issues.

<TelerikWindow Visible=true>
    <WindowContent>
            <TelerikTreeView Data="@TreeData">
                <TreeViewBindings>
                    <TreeViewBinding>
                        <ItemTemplate>
                            @{
                                TreeItem itm = context as TreeItem;
                                <span @onclick="@( _ => NodeClick(itm) )">
                                    Node:
                                    <strong>@itm.Text</strong>
                                </span>
                            }
                        </ItemTemplate>
                    </TreeViewBinding>
                </TreeViewBindings>
            </TelerikTreeView>
    </WindowContent>
</TelerikWindow>

@code {
    string result { get; set; }
    async Task NodeClick(TreeItem clickeNode)
    {
        result = $"Last clicked node Id: {clickeNode.Id}";
    }

    // sample data

    public IEnumerable<TreeItem> TreeData { get; set; }

    public class TreeItem
    {
        public string Text { get; set; }
        public int Id { get; set; }
        public List<TreeItem> Items { get; set; } = new List<TreeItem>();
        public bool HasChildren { get; set; }
    }

    protected override void OnInitialized()
    {
        LoadHierarchical();
    }

    private void LoadHierarchical()
    {
        List<TreeItem> roots = new List<TreeItem>() {
            new TreeItem { Text = "Item 1", Id = 1, HasChildren = true },
            new TreeItem { Text = "Item 2", Id = 2, HasChildren = true }
        };

        roots[0].Items.Add(new TreeItem
        {
            Text = "Item 1 first child",
            Id = 3

        });

        roots[0].Items.Add(new TreeItem
        {
            Text = "Item 1 second child",
            Id = 4

        });

        roots[1].Items.Add(new TreeItem
        {
            Text = "Item 2 first child",
            Id = 5

        });

        roots[1].Items.Add(new TreeItem
        {
            Text = "Item 2 second child",
            Id = 6

        });

        TreeData = roots;
    }
}

We're starting a new internal project using Blazor (.NET 8/10) to build an in-house booking application.

Our UI/UX designs are already prepared in Figma, and we're now evaluating which Blazor component library would best support our implementation.

We are exploring component library which can easily be integrated with Figma design, save us re writing a component and reduce the development time.

• What was your experience like?

• How well did the components align with your design system (especially if using Figma)?

• Any performance, customization, or support issues?

• Would you recommend it for a booking-style application?

• Are free source component libraries better than enterprise paid libraries?

Thanks in advance for sharing your insights!

I've followed everything i can find about enforcing UTF-8 encoding, but this is still happening. It only happens in the drop down options of the aforementioned components, not after they are selected and not in the ASP.NET core <InputSelect> component.

I have no idea when this started but I suspect when we upgraded to 11.x control suite.

<GridColumn Field=@nameof(BookingEquipmentCommodityModel.ItemCount) Title="Count" Width="1.5rem" />

As you can see, there is no numeric template and this is a simple GridColumn, but I'm getting increment arrows on any column that is numeric (Int, Decimale, Double, etc.)?

I don't want them and have no idea why I'm getting them since I don't define the column with a template for TelerikNumericTextBox??

In my attempt (which failed) to work-around this issue, I setup a template for the column using TelerikNumericaTextBox to see I could disable the arrows ... and that didn't work either?

                                <GridColumn Field=@nameof(BookingEquipmentCommodityModel.CommodityWeight) Editable="true" Title="Weight" Width="3rem">
                                    <Template Context="cwContext">
                                        @{
                                            var cw = (BookingEquipmentCommodityModel)cwContext;
                                        }
                                        <TelerikNumericTextBox @bind-Value="@cw.CommodityWeight" Arrows="false"></TelerikNumericTextBox>
                                    </Template>
                                </GridColumn>

still get the arrows?

Help?