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%">

When I try the following I just get the underlining number: 343526.3

<ChartSeriesTooltip Visible="true">
                                <Template>
                                    @(string.Format("{0:C2}", (context.FormattedValue as object)))
                                </Template>
                            </ChartSeriesTooltip>

When I try, I get:

<ChartSeriesTooltip Visible="true">
                                <Template>
                                    @(string.Format("{0:C2}", (context.DataItem as object)))
                                </Template>
                            </ChartSeriesTooltip>

I am not sure what I am doing wrong here.

the class tis attached to:

public class MDRevNCostOverTime
        {
            [DisplayFormat(DataFormatString = "{0:C}")]
            public decimal Series1 { get; set; }
            [DisplayFormat(DataFormatString = "{0:C}")]
            public decimal Series2 { get; set; }
        }

How to disable window resizing (by default, the Window is resizable) of Popup Form Template (GridPopupEditSettings)

(similar to the Resizable="false" property for the TelerikWindow component). 

https://demos.telerik.com/blazor-ui/grid/popup-edit-form-template

Thank you for the help.