Hi, one of my clients' automation team demands that each actionable element has it's own custom ID which they provide to us.

So on our custom components (or any HTML element) we just add, eg:

<div automation-id="some-important-div">...</div>

However, when we consume Telerik Blazor UI components we're struggling to fullfill this requirement.

Is there any way to add an arbitrary HTML attribute to inner components like this without having to re-implement each composable piece with our own template?

We're fine with the look and feel of components, so it feels like an overkill to have to re-do everything (for example, the calendar's header with clickable date, arrows and "today" elements, and then the date cells for each view) just to add this ID without changing the styles or structure.

The Resizable attribute o TelerikGrid is very useful, but it would be better if the last column's width could stretch to fit its container, whenever we resize other columns that make the former move from its previous position, like shown in the picture.

Is there a way to that automatic resize of the last column?

I want to create a table with TelerikGrid whose border corners are rounded (border-radius: 8px). However, I noticed that the corners are under the table's sharp corners as exemplified in the files below. My TelerikGrid is as follows:

<span>
<TelerikGrid Data=@GridData>
    <GridColumns>
        <GridColumn Width="5%" />
        <GridColumn Field="@nameof(...)"/>
        <GridColumn Field="@nameof(...)" />
        <GridColumn Field="@nameof(...)" />
        <GridColumn Field="@nameof(...)" />
        <GridColumn Field="@nameof(...)" />
    </GridColumns>
</TelerikGrid>
</span>

and its css rules in the corresponding razor.css (wrapped the telerik component within a span tag so as to use the ::deep selector):

::deep .k-grid{
    width: 100%;
    height: 100%;
    border: 1px solid #6495Ed4D;
    border-radius: 8px;
    opacity: 1;
}

I have a grid with a headertemplate who raise a contextmenu to popup and allow to select a date.

See for example: https://blazorrepl.telerik.com/QxkKbZPH059REjJ030

Now, if i open the datepicker and click on the arrows (for select previous or next month) the context menu automatically close.

Select a day or change the month or year in the datepicker does not cause this issue.

I would like to allow user to click on previous/next month arrow without the contextmenu closed.

Any suggestion?

Thanks

I feel like I'm missing something really simple here.  I want to display an icon with a menu item.  I'm following this example https://docs.telerik.com/blazor-ui/components/menu/icons and want to add the FontIcon.Menu. In the code below, I added the icon to the top level menu item. 

@layout TelerikLayout
@inherits LayoutComponentBase
@using Telerik.FontIcons;

<PageTitle>HR Taxonomy Change Management</PageTitle>

<div class="container">
    <div class="border">
        <div class="title">
            Taxonomy Change Management
        </div>
        <div class="login">
            <LoginDisplay />
        </div>
        <div style="height: 80px;">
            <TelerikMenu IconField="@(nameof(MenuItem.Icon))" Data="MenuItems" Orientation=@MenuOrientation.Horizontal></TelerikMenu>
        </div>
    </div>
    <div>
        <article class="content px-4">
            @Body
        </article>
    </div>
</div>

@code{
    public List<MenuItem> MenuItems { get; set; } = new List<MenuItem>();

    public class MenuItem
    {
        public string Text { get; set; }
        public bool Disabled { get; set; }
        public object Icon { get; set; }
        public IEnumerable<MenuItem> Items { get; set; }
    }

    protected override void OnInitialized()
    {
        MenuItems = new List<MenuItem>()
        {
            new MenuItem()
            {
                Text="None",
                Icon="@FontIcon.Menu",
                Items = new List<MenuItem>()
                {
                    new MenuItem {Text = "Home" },
                    new MenuItem {Text = "New Request"},
                    new MenuItem {Text = "Admin"}
                }
            }
        };

        base.OnInitialized();
    }
}

<style>
    #demo-runner {
    height: 400px;
    }
</style>

So I have a grid with a subgrid.

Sometimes the subgrid has enough data rows that it seems to the user the grid is doing nothing when in fact tis still getting ready to display its subgrid contents.

I was wondering if there was a way to show the Loader object when these rows are taking a bit to show up?

Is there a way to disable text selection.

I tried adding this css class 

.disable-selection {
    user-select: none;
}

on the <TelerikGrid/> level but I can still highlight text.

Hello.

I need to cancel a user selection based on  some criteria.  Any idea?  Example, User choose a new item in the dropdownlist and after check something in OnChange event I want to keep the original selection.

                       <TelerikDropDownList Data="@infosEtapeMaitriseCategories"                        
                                         @bind-Value="@CurrentlyEditingEtapeMaitrise.tlkpEtapeMaitriseCategorieId"
                                     TextField="TextField" ValueField="ValueField"
                                     Enabled="@tlkpEtapeMaitriseCategorieIdEnabled"                                             
                                     Width="100%">