*** UPDATE If I remove the set culture code, then it works **

Adding Format="{0:d}" to this code Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor.

works fine.

If I try to do the same I get this:

First Format="{0}"

Using Format="{0:d}" I get this. Same when I use any other formats like Format="{0:yyyy.MM.dd}"

When not using any kind of format. Not good enough. Missing the year

 <TelerikChart RenderAs="RenderingMode.Canvas">
            <ChartTitle Text="Prices"/>
            <ChartTooltip Visible="true"/>
            <ChartLegend Position="ChartLegendPosition.Bottom"/>

            <ChartSeriesItems>
                <ChartSeries Type="ChartSeriesType.Line"
                             Name=""
                             Data="@Details.PriceGraphs"
                             DashType="@DashType.Solid"
                             CategoryField="@nameof(InstrumentPriceGraph.UpdateDate)"
                             Field="@nameof(InstrumentPriceGraph.Price)">
                </ChartSeries>
            </ChartSeriesItems>

            <ChartValueAxes>
                <ChartValueAxis Min="@_yMinValue" Max="@_yMaxValue"/>
            </ChartValueAxes>

            <ChartCategoryAxes>
                <ChartCategoryAxis Type="ChartCategoryAxisType.Date" BaseUnit="ChartCategoryAxisBaseUnit.Days">
                    <ChartCategoryAxisLabels Step="2" Format="{0:d}">
                        <ChartCategoryAxisLabelsRotation Angle="-45"/>
                    </ChartCategoryAxisLabels>
                </ChartCategoryAxis>
            </ChartCategoryAxes>

        </TelerikChart>

var culture = new CultureInfo("da-DK");
culture.DateTimeFormat.ShortDatePattern = "dd-MM-yyyy";
CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;

1. I am creating a pie chart and the element the chart is nested in has a white background I cant seem to change please help.

2. I am using custom styling and have left out a component I would like to add  a single component. I have however changed some of the default telerik styling in the file is there a way I can get the exclusive css for a single component without needing a whole new file?

thanks

https://docs.telerik.com/blazor-ui/components/stepper/events

According to the docs, it says the OnChange event fires before the current step has changed. I'm assuming clicking the Stepper itself triggers this event, but what if I wanted to go to the next step by clicking on a custom button that I've created? This seems like a common use case, is this possible with the stepper?

I don't want to use the Wizard component because it doesn't seem possible to customize it to match my requirement: I want to keep all previous steps' content rendered on the page vertically as you progress through the wizard instead of having the each step content replaced by the next step content. The documentation doesn't seem to allow for customization of the step content rendering behaviour but please correct me if I'm wrong (https://docs.telerik.com/blazor-ui/components/wizard/structure/content).

Is there a way I can replace the checkbox with button for the selection of the row in the grid?

Blazor DataGrid Demos - CheckBox Only Selection | Telerik UI for Blazor

Hi,

I am using the TelerikMenu Blazor component and I am trying to change the background color of the submenu items when being hovered over.  I can successfully change the hover colors for the top-level menus but not the submenus.  When I am running the app, I can go into developer tools and write the css to change the submenu background when being hovered over, but when I try that same css in my page css file, only the top-level menu items are affected (meaning the hover affect only happens to the top-level menu),  I have attached a picture of the submenu with a background color change on hover via Developer Tools.

I am probably missing a hierarchy level in the css - any assistance is appreciated.

Thanks,

Mike

Menu creation tag:

<nav class="navbar navbar-dark navbar py-md-0" id="navbar-custom-style"> 
    <span class=" k-link  k-menu-link">
        <TelerikMenu Data="MenuItems" UrlField="@nameof(MenuItem.Page)" Orientation="MenuOrientation.Horizontal" Class="centered-menu">

        </TelerikMenu>

   </span>
</nav>

Menu creation code:

  public List<MenuItem> MenuItems { get; set; }

        protected override async Task OnInitializedAsync()
        {
            List<MenuItem> menuItems = new List<MenuItem>()
            {
                new MenuItem { Text = "Home", Page = "/", IconClass="oi oi-home" },
                new MenuItem { Text = "Application Health", Items = new List<MenuItem>()
                    {
                        new MenuItem { Text = "Counter", Page = "/counter" },
                        new MenuItem { Text = "Batch Review", Page = "/batchreview", IconClass="oi oi-bar-chart" },
                        new MenuItem { Text = "Closed Items", Page = "" },
                    }, IconClass="oi oi-heart" },
                new MenuItem { Text = "Fetch Data", Page = "/fetchdata", IconClass="oi oi-rich" },
            };
            MenuItems = menuItems;
        }          

Menu CSS (only affects top level menus):

::deep .centered-menu.k-menu .k-item {
    color: white;
    font-weight: bold;
    background: #007DBC;
    padding: 0;
}

::deep .k-item.k-menu-item:hover {
    color: whitesmoke;
    background-color: #0b6fa4;
}

When I add this to my page css from the dev tools (which only affected the sub-menus), only the top menu items are affected:

I have a Vertical Splitter pane that will not resize until I first collapse it and then expand it.  

I am getting an error in the browser when I first try to re-size it.

telerik-blazor.js:63 Uncaught TypeError: Cannot read properties of undefined (reading 'min')
    at e.value (telerik-blazor.js:63)
    at e.value (telerik-blazor.js:63)
    at e.value (telerik-blazor.js:63)
    at e.value (telerik-blazor.js:63)
    at Object.i.onResizableResize [as resize] (telerik-blazor.js:63)
    at e.value (telerik-blazor.js:1)
    at e.value (telerik-blazor.js:49)
    at Object.i.onDraggableDrag [as drag] (telerik-blazor.js:49)
    at e.value (telerik-blazor.js:1)
    at e.value (telerik-blazor.js:3)

Here is the markup of the Splitter:

 <TelerikSplitter Orientation="SplitterOrientation.Vertical" Height="100%" Class="accountWorkscopeSplitter">
                <SplitterPanes>
                    <SplitterPane Class="scrollablePane">
                        <LeftNav WorkspaceId="@WorkspaceId.Value" NavigationWorkspace="Account" OnNavItemSelected="NavItemSelected" />
                    </SplitterPane>
                    @if (showExpenditureCenter || showRevenueCenter)
                    {
                        <SplitterPane Collapsible="true" Resizable="true" Size="50%" Max="50%" Class="scrollablePane">
                            @if (showExpenditureCenter)
                            {
                                <div id="ExpenditureCenterDiv">
                                    <AccountCenter Type="AccountType.Expenditures"></AccountCenter>
                                </div>
                            }
                            @if (showRevenueCenter)
                            {
                                <div id="RevenueCenterDiv">
                                    <AccountCenter Type="AccountType.Revenues"></AccountCenter>
                                </div>
                            }
                        </SplitterPane>
                    }
                </SplitterPanes>
            </TelerikSplitter>

Hello, I've just started using the TelerikMultiSelect for the first time and it's working well, except I can't change the font size of the list of selected items. I've applied Class="MyStyle" which defines a font-size value, but it has no effect. The attached image shows the selected items with font-size 14px that I can't override and they are smaller than the surrounding elements.

Inspecting the source I can see a nest of k-xxx styles which I tried overriding as an experiment, but nothing has any effect.

Thanks, Greg