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:
::deep li.k-item.k-menu-item:hover {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
Hi,
While developing my app, I have a grid and I'd like to run the TelerikLoader while loading page or data...
I follow the example (I.E: https://demos.telerik.com/blazor-ui/grid/loading-animation)
but when I add the code, the VS2002 compiler says:
"The name 'ThemeConstants' does not exist in the current context "
I try to add the full namespace: Telerik.Blazor.ThemeConstants and it's still the same....
does anyone has a clue.
