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?

REPL

Makes it impossible to show e.g. error messages above a dialog.

            <GridToolBar>
                <AuthorizeView Roles="DOMAIN\GROUP">
                    <Authorized>
                        <GridCommandButton Command="Add" Icon="add">Add Permission</GridCommandButton>
                    </Authorized>
                </AuthorizeView>
                <TelerikButton OnClick="@_reloadPermissions"
                       Enabled="@_reloadEnabled"
                       FillMode="@(ThemeConstants.Button.FillMode.Solid)"
                       Rounded="@(ThemeConstants.Button.Rounded.Full)"
                       Shape="@(ThemeConstants.Button.Shape.Square)"
                       ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)"
                       Size="Medium">
                    <TelerikIcon Icon="arrow-rotate-cw"/>
                </TelerikButton>
            </GridToolBar>

Instead I get this:

I want the second button to be a round "refresh" button.

1. How can I set the tooltip values to be always visible? (the 42%, 25% & 33%)

2. Is it possible to set the inner text, like this?  (50)