In the main MS Blazor docs there is an article Avoid rerendering after handling events without state changes

They give an example of using a button click - eg

<button @onclick="EventUtil.AsNonRenderingEventHandler<MouseEventArgs>(HandleClick3)">
    Select me (Avoids Rerender and uses <code>MouseEventArgs</code>)
</button>

private void HandleClick3(MouseEventArgs args)
{
    dt = DateTime.Now;

    Logger.LogInformation(
        "This event handler doesn't trigger a rerender. " +
        "Mouse coordinates: {ScreenX}:{ScreenY}", 
        args.ScreenX, args.ScreenY);
}

How can this be applied to say the TelerikNumericTextBox ValueChanged event?

For example, the following gives errors

<TelerikNumericTextBox T="int" Value="@NumericTextBoxValue" 
ValueChanged="EventUtil.AsNonRenderingEventHandler<int>(NumericTextBoxChangeHandler)" 
Min="1" Max="120" Width="120px">
</TelerikNumericTextBox>

private void NumericTextBoxChangeHandler(int newValue)
{
    Console.WriteLine($"newValue == {newValue}");
    NumericTextBoxValue = newValue;
}

Is this possible in Telerik Blazor? Or is there another inbuilt mechanism to control which events automatically invokes StateHasChanged?

Hello, I'm programmatically setting the selected list (/from/ the available selection) on a MultiSelect.

It's bound to a List<string> that is part of a class: data.Value.

The MultiSelect is part of a "child" component that I use on more than one page.

On initial load, the List<string> that it is bound to is freshly instantiated in the class: public List<string> Value {get; set; } = new();

The very first time the code populates the list, the UI properly reflects the associated names (using key/value pairs from a dictionary).

After that, the UI doesn't change with further updates to the list.

My original code had Value.Clear() and then Value.Add(<new string values>) as required.

On a hunch, I changed it to re-instantiate the List instead of Value.Clear(), and now the UI refreshes as I expect it to.

I see the example https://docs.telerik.com/blazor-ui/components/multiselect/refresh-data first List.Clear()'s the List, then re-instantiates it, which I find odd.  Why .Clear() if you're going to re-instantiate it? 

    void ClearSelected()
    {
        TheValues.Clear();
        TheValues = new List<int>(TheValues);
    }

1) Is it supposed to work with .Clear() and then add new items after the first time?

2) Why does it work the first time with adding new items?

3) Am I doing something incorrectly?

4) Why does the example .Clear() and then re-instantiate it? 

Thanks!

Hi all,

I am using TelerikTreeList with custom filter menu. In the filter menu template I am using TelerikRadioGroup with Vertical layout but it is always display as Horizontal. I try to add css to a div outside with display:inline but it still does not work. It is only display as Vertical when I inspect element and then remove class k-filter-menu.

The problem is I have many items in the radioGroup so display Horizontal does not look good. Is there any workaround solution for this?

The code is look like this (I already removed some other columns)

    <TelerikTreeList Data="@Tasks"
                     IdField="Id"
                     Class="taskTreeView"
                     ParentIdField="ParentId"
                     Resizable="true"
                     EditMode="TreeListEditMode.Inline"
                     FilterMode="@TreeListFilterMode.FilterMenu"
                     OnRowRender="@OnRowRenderHandler">
        <TreeListToolBar>
            <TreeListCommandButton Command="Add" Icon="add">New Task</TreeListCommandButton>
        </TreeListToolBar>

        <TreeListColumns>
            
            <TreeListColumn Field=@nameof(TaskItem.DueDate) Title="Due Date" Width="100px" FieldType="@typeof(string)">
                <Template>
                    @{
                        var item = context as TaskItem;
                        <div>
                            @(item.DueDate.ToString("MMM d"))
                        </div>
                    }
                </Template>

                <FilterMenuTemplate>
                    @{
                        HireDateFilterMenuTemplateContext = context;
                        ExtendHireDateFilterDescriptor();
                    }

                    <div class="filter-radio">
                        <TelerikRadioGroup Data="@DateOptions"
                                           Value="@SelectedDueDateRadioSelector"
                                           ValueChanged="@((int value) =>
                                                     OnChangeHandler(value) )"
                                           Layout="RadioGroupLayout.Vertical"
                                           ValueField="@nameof(RadioOptionsModel.IdField)"
                                           TextField="@nameof(RadioOptionsModel.DisplayField)">
                        </TelerikRadioGroup>
                    </div>
                </FilterMenuTemplate>
            </TreeListColumn>
    </TelerikTreeList>

The UI looks like this

REPL

How to avoid this?

Hi,

I need to make a responsive layout with a splitter.

If I remove a SplitterPane with Telerik MediaQuery it renders in a different order, same as this question:

https://feedback.telerik.com/blazor/1509284-splitter-order-changed-after-hiding-and-showing-pane?_ga=2.220935836.529993596.1645460989-111903490.1447636048

I cannot recreate the whole layout, because one div will use leafletjs. I'm not using Telerik map because it lacks many features I need.

Example code:

https://blazorrepl.telerik.com/ccuQmwQF26uBicm739

For me the best solution would be to have something by Telerik like: https://golden-layout.com/ or https://www.htmlelements.com/blazor/blazor-ui/demos/blazor-dockinglayout?id=basic

Is it possible to have breadcrumbs with dropdowns?

Like this

I have a page with a list of widgets. Each widget show some data and has a detail button.

Details are displayed to the right of the list. So the dropdown will have an entry for each widget

Code

<TelerikNotification @ref="NotificationComponent"

HorizontalPosition="@NotificationHorizontalPosition.Center"
VerticalPosition="@NotificationVerticalPosition.Top" />

The attached photo shows how the notification gets rendered.

Please let me know how can I fix it, so that it either:

• Comes on top of all the other items. That's fine with me, since the user can just close it.
• Or, be limited to a certain size and let the user scroll.

Repro Steps:

Pick any example, even the default one in the documentation, and make its data type ObervableCollection, and all of a sudden the values of Sortable=@true on the Grid and rows get ignored.

This seems to be specific only to ObservableCollection. Even IReadOnlyList supports sorting just fine. There is nothing in the documentation mentioned about why ObservableCollection shouldn't support sorting.

If this is by design, please amend the documentation, otherwise please let us know if you're planning to fix it.

Thanks.

https://blazorrepl.telerik.com/QmEGmFYM497yvJqU02

I can't get page up/down to work.

Arrow navigation works fine in the grid.

I stumbled on this when I was trying to expand on the grid searchbox.

I would like to implement this usecase

1. User type a key shortcut I have implemented and the searchbox get focus (this I have implemented)
2. user type something and the grid are filtered (works)
3. user presses enter and the first row in the grid get focus ( Not sure how to set focus on a row in a filtered grid ) 
4. user navigates to the desired row and use space to activate the row (this should also work out of the box)

Right now I don't use the Navigable property because of the issue with page up/down This has to be fixed first.

Then I would like some help with setting focus on the first filtered row. I found this article https://docs.telerik.com/blazor-ui/knowledge-base/grid-get-filtered-data

Maybe when the user presses ENTER I can use the ToDataSourceResult extension method and then take the first row and add it to the selected rows collection. Or are there a easier way to set focus on the first row of a filtered dataset?